Bhinish Dhiman

Por que 16px não é 16px: a altura-x de 872 famílias de fontes

Traduzido do original em inglês. Ler o original

Em 872 famílias de fontes medidas pelas tabelas OS/2, a altura-x vai de 0.351 em (Suravaram) a 0.84 em (Matangi), com mediana de 0.500 em e faixa do 5º ao 95º percentil de 0.411 a 0.570. Igualar a altura-x da Helvetica em 16px exige 15.2 px na Inter, 18.6 px na Times New Roman e 20.8 px na EB Garamond.

font-size: 16px define a altura de uma caixa invisível. O que o leitor vê são as minúsculas dentro dela, e o quanto da caixa as minúsculas ocupam é uma propriedade do tipo de letra. Tínhamos as medidas de 872 famílias na nossa tabela de métricas de fontes, então calculamos a distribuição.

O termo

Altura-x (x-height) é a altura de uma letra minúscula sem ascendente nem descendente, como o x, o a e o e, expressa como fração do em, a caixa que o font-size define. Uma fonte com altura-x de 0.5 em, a 16px, tem minúsculas de 8 px de altura. É a medida isolada que melhor prevê o quanto um texto parece grande, e é justamente a que o CSS não deixa você definir.

A medição

O src/lib/type/font-metrics.json é gerado a partir do @capsizecss/metrics 4.3.0, que lê a tabela OS/2 de cada fonte. O build mantém as famílias sans-serif, serifadas e monoespaçadas, exclui as famílias Noto e Material específicas de cada escrita e exclui 48 famílias cujos arquivos não informam altura-x ou informam uma abaixo de 0.35 em, o que deixa 872. Calculamos os percentis, a proporção por categoria e, para cada família, o tamanho em pixels que dá a mesma altura de minúsculas que a Helvetica a 16px; a Helvetica mede 0.523 em, contra a referência de 0.52 em em que a tabela de fontes do APCA é calibrada. Cálculo feito em 1º de outubro de 2026.

Percentil Altura-x (em) Tamanho para igualar a Helvetica a 16px
Mínimo 0.351 23.7 px
5º 0.411 20.3 px
10º 0.440 18.9 px
25º 0.478 17.4 px
Mediana 0.500 16.6 px
75º 0.524 15.9 px
90º 0.546 15.2 px
95º 0.570 14.6 px
Máximo 0.840 9.9 px

Entre o 5º e o 95º percentil, o mesmo tamanho nominal produz minúsculas que diferem por um fator de 1.39. Entre os extremos, 2.39.

A que distância as famílias ficam da referência

166 famílias, ou 19.0%, têm altura-x mais de 10% abaixo de 0.52 em. 39 famílias, 4.5%, ficam mais de 10% acima. Só 458, ou 52.5%, estão a até 5% dela. A referência descreve cerca de metade do catálogo; uma tabela de tamanhos mínimos calibrada nela está silenciosamente errada para a outra metade, e errada no sentido de pequena demais para uma família em cada cinco.

As medianas por categoria diferem menos do que a dispersão dentro de cada uma: sans-serif 0.508, serifadas 0.479, monoespaçadas 0.518. As serifadas ficam mais baixas em média porque a tradição old-style é pequena, mas a Merriweather, uma serifada, está em 0.556, e a Josefin Sans, uma sans, em 0.378.

Famílias conhecidas

Família Altura-x (em) Tamanho para igualar a Helvetica a 16px
Merriweather 0.556 15.0 px
Inter 0.546 15.2 px
Verdana 0.545 15.3 px
Roboto 0.528 15.8 px
Helvetica 0.523 15.9 px
Arial 0.519 16.0 px
Lato 0.506 16.4 px
Georgia 0.481 17.3 px
Source Serif 4 0.475 17.5 px
Times New Roman 0.447 18.6 px
Crimson Pro 0.420 19.8 px
EB Garamond 0.400 20.8 px
Cormorant Garamond 0.386 21.6 px
Josefin Sans 0.378 22.0 px

A EB Garamond a 16px tem minúsculas de 6.4 px de altura. A Inter a 16px as tem com 8.7 px, ou seja, 37% mais altas, no mesmo tamanho declarado. Duas páginas que “usam texto de 16px” podem diferir em mais de um degrau inteiro de uma escala tipográfica naquilo que o leitor realmente recebe.

O topo da distribuição não é o que parece

As famílias acima de 0.7 em, como Matangi, Anton, Antonio e Bebas Neue, são fontes display condensadas. A Bebas Neue informa uma altura-x de 0.700 em contra uma altura de maiúsculas de 0.700 em, porque não tem minúsculas e o arquivo dela mede versaletes no lugar; a Anton e a Antonio desenham minúsculas quase tão altas quanto as maiúsculas. “Altura-x grande” nessa ponta significa uma fonte de título, não uma fonte de texto generosa. O limite superior real para texto fica em torno de 0.55 a 0.58 em: Merriweather, Poppins, Oswald.

O que isso significa para um tamanho mínimo

A tabela do APCA dá um tamanho mínimo em cada nível de contraste para uma fonte próxima da referência, e a documentação dele manda ajustar esse mínimo multiplicando-o por 0.52 dividido pela altura-x da sua fonte. A tabela acima é essa correção, já calculada. Para a família mediana, é um ajuste de 4%; para o 5º percentil, de 27%; para a EB Garamond, de 30%. Nosso verificador de legibilidade tipográfica aplica essa correção a partir das mesmas métricas, então o mínimo que ele informa vale para a família que você escolheu, e não para a Helvetica.