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:
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: