Calculadora de Altura de Linha: Encontre o Entrelinhamento Perfeito para Qualquer Tamanho de Fonte

A altura de linha é uma das decisões tipográficas mais impactantes — e mais ignoradas — que você vai tomar. Muito apertada e o texto parece claustrofóbico. Muito espaçada e o olho perde o fio entre as linhas. Acertar essa medida faz a diferença entre um texto que convida à leitura e um que você luta para acompanhar.

A Tooladex Line Height Calculator ajuda você a encontrar o valor certo para qualquer tamanho de fonte e obtê-lo na unidade CSS exata de que precisa — razão sem unidade, px, em ou rem.

O que é altura de linha (e o que é entrelinha)?

Altura de linha é a distância vertical de uma linha de base à seguinte — a altura total alocada para cada linha de texto. Na tipografia impressa, esse mesmo conceito é chamado de entrelinha (leading, pronunciado "leding"), nome que vem das tiras de chumbo que os tipógrafos colocavam entre as fileiras de tipos metálicos.

No CSS, a propriedade line-height controla isso diretamente. Um valor de 1.5 em uma fonte de 16px significa que cada linha ocupa 24px de espaço vertical.

Sem unidade, px, em ou rem — qual usar?

O CSS oferece várias formas de expressar a altura de linha:

A razão sem unidade é quase sempre a escolha certa para texto corrido e títulos. Um valor fixo em pixels vai quebrar se um estilo pai ou a preferência do usuário alterar o tamanho da fonte — o texto pode se sobrepor. Um valor sem unidade herda e escala de forma elegante.

WCAG 1.4.12: o piso de acessibilidade

O Critério de Sucesso 1.4.12 das Web Content Accessibility Guidelines (WCAG) (Espaçamento de Texto, Nível AA) exige que os usuários possam definir a altura de linha do texto corrido em pelo menos 1,5× o tamanho da fonte sem perda de conteúdo ou funcionalidade.

Na prática, a abordagem mais simples é começar com 1.5 ou mais para o texto corrido, o que significa que você já está em conformidade por padrão e dá ao seu conteúdo o espaço que ele precisa.

Altura de linha recomendada por caso de uso

Estes são pontos de partida. Sempre teste com conteúdo real na largura de coluna desejada — colunas estreitas geralmente precisam de uma razão ligeiramente maior.

Como usar a calculadora

1. Insira o tamanho da fonte em pixels (ex.: 16 para texto corrido, 32 para um H1).
2. Arraste o controle deslizante de razão ou escolha um predefinido (Apertado → Solto).
3. Leia os resultados — você obterá a razão, o valor em pixels, em, rem e uma declaração CSS pronta para copiar.
4. Verifique o selo WCAG — a ferramenta indica se sua razão atende ao WCAG 1.4.12 para texto corrido.
5. Pré-visualize — veja o bloco de texto ao vivo se reorganizar instantaneamente conforme você ajusta os valores.

/* Texto corrido — em conformidade com WCAG, sem unidade (recomendado) */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Título — entrelinha mais apertada */
h1 {
  font-size: 2rem;
  line-height: 1.2;
}

/* Texto em letras miúdas */
figcaption {
  font-size: 0.875rem;
  line-height: 1.6;
}