Calculadora de X Height Tipo Corpo Relacao

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

Na tipografia, o x-height (altura-x) é a distância vertical da linha de base até o topo das letras minúsculas sem ascendentes ou descendentes — literalmente a altura da letra “x” minúscula. A relação com o corpo (em) é expressa como x-height ÷ tamanho-fonte e fica entre 45% e 55% nas famílias latinas modernas, podendo chegar a 60% ou mais em fontes display.

Um x-height maior faz as minúsculas parecerem maiores no mesmo corpo, melhorando a legibilidade na tela em tamanhos pequenos. Fontes modernas de UI como Helvetica, Inter, Arial e Roboto têm x-height generoso (52–55%), enquanto fontes clássicas de livro como Times New Roman, Garamond e Baskerville têm x-height pequeno (40–46%), favorecendo ascendentes elegantes e cor de texto mais calma em leitura longa.

Aplicações

O x-height é crítico para acessibilidade web, UI mobile, sinalização e qualquer texto renderizado abaixo de 14 px. Ao misturar duas fontes, designers usam a propriedade CSS @font-face { size-adjust: ... } ou as métricas ascent-override/descent-override para alinhar x-heights e evitar salto desagradável no tamanho aparente. Também influencia a escolha da entrelinha (line-height) — x-height maior exige mais entrelinha para evitar colisão entre linhas.

FAQ

Por que duas fontes em 16 px parecem ter tamanhos diferentes? Porque seus x-heights diferem. Uma Inter 16 px parece visivelmente maior que uma Times 16 px porque o x-height da Inter é ~53% contra ~45% da Times.

X-height maior é sempre melhor? Não para texto corrido em livro — x-heights muito grandes achatam o ritmo de ascendentes e descendentes que ajuda o olho a escanear. Faixa ideal para UI em tela é 50–55%.

Como combinar x-heights entre fontes? Use CSS size-adjust (ou font-size-adjust: ex-height) para que a fonte fallback seja escalada de modo a igualar o x-height da primária — eliminando layout shift (CLS) quando a web font carrega.