7

Eu estou usando uma Font-Face que tem o estilo tipográfico antigo nos numerais é quero alinha-los com o texto.

inserir a descrição da imagem aqui

Veja que os números dessa fonte seguem o padrão antigo, onde o algarismo é alinhado com as ascendentes e descendentes da fonte e não na base-line

Fonte que estou usando Raleway: https://fonts.google.com/specimen/Raleway

Veja como os números dela são alinhados em comparação com o texto

inserir a descrição da imagem aqui


Como faço para alinhas os números com o restante do texto usando CSS ?

* {
  font-family: 'Raleway', sans-serif;
  font-size: 50px;
  text-align: center;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<span>span 1234567890</span>
<h1>título 1234567890</h1>

3
  • Boa pergunta, sempre passo por isso! Commented 17/10/2018 às 18:14
  • @JoãoPedroSchmitz é chato de mais quando a fonte é assim né! Mas acho que tem propriedade que resolve isso hein!
    – hugocsl
    Commented 17/10/2018 às 18:16
  • 1
    Deve haver :D, eu espero que tenha hehe Commented 17/10/2018 às 18:17

1 Resposta 1

6

O problema das fontes

Como o @hugocsl comentou na sua pergunta, existem algum tipos de fontes onde os números da fonte seguem um padrão antigo, onde o mesmo é alinhado com as ascendentes e descendentes da fonte e não na baseline. Veja:

Anatomia de uma fonte

Em text figures (figuras de texto), os numerais são compostos com alturas variadas que se assemelham a uma linha de texto. Alguns numerais, mais comumente 0, 1 e 2, não têm ascendentes nem descendentes e são de altura x como letras minúsculas, enquanto 6 e 8 têm ascendentes e 3, 4, 5, 7, 9 têm descendentes. Veja com um exemplo para facilitar o entendimento:

* {
  font-family: 'Raleway', sans-serif;
  font-size: 50px;
  text-align: center;
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<span>span 0123456789</span>

Se você analisar bem verá que o 0, 1 e 2 estão alinhados com as letras minúsculas, por sua vez o 6 e o 8 tem ascendentes e o resto dos números descendentes, como dito anteriormente.

Mas o que são ascendentes e descententes?

Os ascendentes são um traço vertical ascendente encontrado em certas letras minúsculas que se estendem além da "altura da capa" (cap height) ou da baseline. Descendentes são o traço vertical descendente nessas letras.

Mas isso é realmente um problema, essas fontes que não tem alinhamento na baseline?

Na verdade isso depende muito de cada ponto de vista, pode ser um problema para mim e para você não. Mas eu acredito que isso às vezes tira o padrão de um texto e também pode atrapalhar a leitura de um texto muito grande por distrair a pessoa. Se você não gostar ou não quiser resolver com CSS pode trocar de fonte ;D.

As soluções :0

Vamos ao que realmente interessa, a propriedade CSS que faz esse alinhamento a baseline acontecer, a font-feature-settings! Uma propriedade capaz de te dar controle sobre tipografia avançada nas fontes do tipo OpenType, como o caso da Raleway. O que nos vamos fazer com a nossa fonte é permitir lining figures (não tenho uma tradução para isso), também chamadas de modern figures, que tem altura uniforme e que são alinhadas com a baseline. Ressalto que a fonte tem lining figures mas que por padrão não vem habilitada nos navegadores.

Vale ressaltar que ela é compatível com quase todos os navegadores, mas use os prefixos para dar suporte a versões antigas.

Enfim, veja um exemplo e tire as suas próprias conclusões.

* {
  font-family: 'Raleway', sans-serif;
  font-size: 50px;
  text-align: center;
  -webkit-font-feature-settings: "lnum"; 
  -moz-font-feature-settings: "lnum"; 
  font-feature-settings: "lnum"; 
}
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

<span>span 0123456789</span>

Mas o que é o "lnum" passado a propriedade?

Na verdade essa é uma resposta simples, a mais simples que vou responder aqui. É meio que um sinônimo para lining figures. Existem diversos valores que você pode passar para a font-feature-settings e "lnum" é só um deles. Nesse link você tem uma lista completa e alguns exemplos.

Antes de terminar vou deixar outra solução que encontrei em uma pergunta no SO. Só deixo ela por ser uma gambiarra criativa e que pode servir de ajuda ou de solução para algumas pessoas em alguns casos.

h1 {
  font-family: Raleway;
  font-size: 2rem;
  border-bottom: 1px solid $text-color;
  border-top: 1px solid $text-color;
  padding: 2rem 0;
}

.raised {
  display: inline-block;
  vertical-align: 12%;
}
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>
  <span class="raised">5</span>
  Comments
</h1>

Algumas referências que usei para montar a resposta:

4
  • 1
    Valeu jovem! Ótima explicação
    – hugocsl
    Commented 18/10/2018 às 9:58
  • 1
    Obrigado mano!! Commented 18/10/2018 às 12:25
  • Pedrão vi essa propriedade que também parece alinhar os número font-variant-numeric: lining-nums; veja aqui mais detalhes w3.org/TR/css-fonts-3/#font-variant-numeric-prop
    – hugocsl
    Commented 23/10/2018 às 1:16
  • 1
    Show mano, não tinha visto essa, mas pela documentação que você passou parece que ela realiza esse alinhamento nos números. Vou testar ela e qualquer coisa incluo na resposta. Obrigado pela observação hehe! Commented 23/10/2018 às 1:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .