Calculadora de Tamanho Fonte Baseline Leading

Tamanho de fonte, baseline e leading no corpo de texto

A baseline é aquela linha invisível sobre a qual as letras se apóiam; descendentes como a cauda do “g” ou do “p” descem abaixo dela. Já o leading mede a distância vertical de uma baseline até a seguinte. Quando você vai compor um trecho longo de texto, uma regra que funciona na prática vai de leading = 1,4 × tamanho até leading = 1,6 × tamanho, o que cai direto em line-height: 1.4–1.6 no CSS.

Outras duas medidas empurram o número para um lado ou para o outro. Uma é a cap-height, a altura das maiúsculas, pense num “H”; a outra é a x-height, a altura das minúsculas, como num “x”. Quando a fonte tem x-height generosa, caso de Inter, Source Sans e Roboto, dá para ficar no piso da faixa. Fontes de x-height pequena, como Garamond ou Caslon, pedem um leading mais folgado. Robert Bringhurst sistematizou tudo isso em The Elements of Typographic Style, onde essas proporções sustentam o que ele diz sobre corpo de texto legível.

Aplicações

Web designers recorrem a isso ao acertar o line-height num design system. Designers editoriais usam para montar livros e revistas no InDesign. Aparece também em auditorias de acessibilidade que conferem o WCAG 1.4.12 (Text Spacing), e nos times de dev na hora de definir defaults razoáveis para os tokens de tipografia.

FAQ

Por que 1,4 a 1,6 especificamente? Abaixo de 1,4 as descendentes de uma linha começam a esbarrar nas ascendentes da linha de baixo. Acima de 1,6 o olho perde o rastro de onde a próxima linha começa, e aí você acaba relendo ou pulando. A faixa intermediária é o que mantém o olhar deslizando.

Leading é o mesmo que line-height? No CSS, quase. O line-height define a altura do slot inteiro da linha, que é o tamanho da fonte mais o leading, repartido metade acima e metade abaixo. Lá na impressão, “leading” era só a tira extra de chumbo que o compositor encaixava entre as baselines.

Títulos pedem a mesma faixa? Não. Tamanhos display grandes, de 32 px para cima, pedem algo mais apertado, tipo line-height: 1.1–1.25. Nesse ponto a linha já é tão longa na horizontal que sobra ar vertical de sobra.