Calculadora de Leading Vertical Baseline

Entrelinha Vertical (Line-Height)

Entrelinha (em inglês leading, nome que vem das tiras de chumbo que os tipógrafos colocavam entre as linhas na composição metálica) é o espaço vertical entre as baselines de linhas consecutivas. O CSS expressa isso como line-height, de preferência como multiplicador sem unidade do tamanho da fonte. A conta é entrelinha = font-size × line-height, então um corpo 16px com line-height: 1.5 resulta em 24px de entrelinha.

Algumas proporções aparecem o tempo todo: 1.5× o tamanho da fonte no corpo web padrão, 1.2× em títulos compactos e 1.7× ou mais quando você quer uma leitura longa confortável. Em Elements of Typographic Style, Robert Bringhurst sugere começar com cerca de 30% acima do tamanho do corpo. Matthew Carter e outros tipógrafos fazem um alerta parecido: o line-height deve crescer conforme a linha fica mais longa, porque colunas mais largas pedem mais entrelinha para o olho achar o caminho de volta à próxima linha.

Aplicações

Pense em tipografia web (line-height), editorial impresso, layout de e-books, documentação técnica e nos baseline grids do Adobe InDesign que alinham o texto entre colunas. Design systems como Tailwind já entregam os passos prontos: leading-tight (1.25), leading-normal (1.5), leading-relaxed (1.625), leading-loose (2).

Perguntas frequentes

Line-height sem unidade ou em px? Use sem unidade. O line-height: 1.5 herda de forma proporcional, enquanto o line-height: 24px trava num valor só e quebra elementos filhos que usam um tamanho de fonte diferente.

Por que mais apertado em títulos? Texto display grande já carrega bastante peso visual, então entrelinha 1.5 acaba só deixando buracos de espaço vertical. Algo em torno de 1.1–1.25 mantém o título parecendo um bloco só.

O que é baseline grid? É uma grade horizontal em que cada linha de texto se encaixa no mesmo ritmo vertical, normalmente em múltiplos da entrelinha do corpo, como incrementos de 8px. O design editorial recorre a isso o tempo todo.