Calculadora de X Height Tipo Corpo Relacao

Entendendo a relação x-height × corpo da fonte

Na tipografia, o x-height (altura-x) é o quanto vai da linha de base até o topo das letras minúsculas que não têm ascendentes nem descendentes. Pense na letra “x” minúscula: é essa altura. Em relação ao corpo (em), o valor sai como x-height ÷ tamanho-fonte e costuma cair entre 45% e 55% nas famílias latinas modernas. Fontes display vão mais longe, às vezes passando dos 60%.

Com x-height maior, as minúsculas parecem maiores no mesmo corpo, o que ajuda bastante a legibilidade na tela em tamanhos pequenos. Por isso fontes modernas de UI como Helvetica, Inter, Arial e Roboto mantêm um x-height generoso, na faixa de 52–55%. Já fontes clássicas de livro como Times New Roman, Garamond e Baskerville seguem o caminho oposto, com x-height pequeno de 40–46%, o que dá espaço para ascendentes elegantes e deixa a leitura longa com uma cor de texto mais calma.

Aplicações

O x-height pesa mais em acessibilidade web, UI mobile, sinalização e basicamente qualquer texto renderizado abaixo de 14 px. Quando você combina duas fontes, a propriedade CSS @font-face { size-adjust: ... }, junto das métricas ascent-override e descent-override, permite alinhar os x-heights para que nenhuma das duas pareça de repente maior que a outra. Isso também mexe na escolha da entrelinha (line-height), porque um x-height maior precisa de mais entrelinha ou as linhas começam a colidir.

FAQ

Por que duas fontes em 16 px parecem ter tamanhos diferentes? Os x-heights delas são diferentes. Uma Inter em 16 px parece bem maior que uma Times no mesmo tamanho, porque a Inter fica por volta de 53% enquanto a Times anda mais perto de 45%.

X-height maior é sempre melhor? Não para texto corrido em livro. Quando o x-height fica grande demais, ele achata o ritmo de ascendentes e descendentes do qual o olho depende para correr pela linha. Para UI em tela, 50–55% é o ponto certo.

Como combinar x-heights entre fontes? Recorra ao CSS size-adjust (ou font-size-adjust: ex-height), que escala a fonte fallback até o x-height dela bater com o da primária. Assim a web font deixa de provocar layout shift (CLS) na hora em que carrega.