Calculadora de Tamanho Fonte Baseline Leading

Tamanho de fonte, baseline e leading no corpo de texto

Na tipografia, a baseline é a linha invisível onde as letras se apóiam (descendentes como a cauda do “g” ou do “p” ficam abaixo dela), enquanto o leading é a distância vertical entre baselines consecutivas. Para corpo de texto contínuo, a regra prática é leading = 1,4 × tamanho a leading = 1,6 × tamanho — em CSS isso corresponde diretamente a line-height: 1.4–1.6.

Duas métricas relacionadas modulam o cálculo: a cap-height (altura das maiúsculas como “H”) e a x-height (altura das minúsculas como “x”). Fontes com x-height generosa (Inter, Source Sans, Roboto) leem bem no piso da faixa; fontes com x-height pequena (Garamond, Caslon) pedem leading mais folgado. Robert Bringhurst, em The Elements of Typographic Style, formalizou essas proporções como base do corpo de texto legível.

Aplicações

Usado por web designers ajustando line-height em design systems, designers editoriais configurando livros e revistas no InDesign, auditorias de acessibilidade verificando WCAG 1.4.12 (Text Spacing) e devs definindo defaults para tokens de tipografia.

FAQ

Por que 1,4 a 1,6 especificamente? Abaixo de 1,4 as descendentes de uma linha colidem com as ascendentes da seguinte; acima de 1,6 o olho perde a conexão entre linhas e relê ou pula. A faixa ótima mantém o olhar fluindo.

Leading é o mesmo que line-height? Na prática do CSS, sim: line-height define a altura total do slot (tamanho da fonte + leading distribuído metade acima, metade abaixo). Na tipografia impressa, “leading” designava historicamente apenas a tira extra de chumbo entre baselines.

Títulos pedem a mesma faixa? Não. Tamanhos display grandes (32 px ou mais) leem melhor com line-height: 1.1–1.25 porque o varrer horizontal longo já oferece ar vertical suficiente.