The Universal Web

2.4 Entrelinha

Entrelinha para leitura em tela: line-height sem unidade no CSS, a exigência da WCAG 1.4.12 de tolerar 1.5 e por que o valor certo depende do comprimento da linha.

7 min read

Esta página foi traduzida com auxílio de IA. O original em inglês é a versão de referência.

O espaço entre as linhas de texto — entrelinha (leading) no impresso, line-height no CSS — está entre os ajustes mais decisivos da tipografia de tela. Sua função é de navegação: espaço em branco suficiente entre as linhas permite que o olho conclua uma linha, execute o longo movimento de retorno à margem esquerda e pouse na linha seguinte correta, em vez de reler a atual ou pular adiante. A edição de 2005 recomendava cerca de 140% do corpo da fonte, observando que os padrões dos navegadores, de 100–120%, eram apertados demais, sobretudo para leitores com baixa visão. Essa recomendação envelheceu bem; se algo mudou, a prática e as normas avançaram ligeiramente além dela.

O que mudou desde 2005

O valor original de cerca de 1.4 estava à frente de seu tempo e hoje se situa no extremo conservador da prática corrente. O texto corrido em sites bem compostos em 2026 costuma ficar entre 1.4 e 1.6, e o piso de acessibilidade foi formalizado: o Critério de Sucesso 1.4.12 Espaçamento de Texto da WCAG (nível AA) exige que o conteúdo suporte uma entrelinha aplicada pelo usuário de 1.5 vezes o corpo da fonte sem perda de conteúdo ou funcionalidade, e o critério mais antigo 1.4.8 Apresentação Visual (nível AAA) pede diretamente espaçamento entre linhas de pelo menos 1.5 dentro dos parágrafos. A leitura prática: 1.5 não é uma aspiração, é o valor que seu layout deve no mínimo tolerar — e, para a maioria das composições de texto corrido, é simplesmente um bom padrão.

Três parágrafos de linhas de preenchimento compostos com line-height 1.2, 1.5 e 2.0 — linhas apertadas se comprimem, 1.5 é o padrão para texto corrido, 2.0 se dispersa.

A segunda mudança é a forma de especificar a entrelinha. Em 2005, os designers definiam a entrelinha em pixels ou porcentagens. A prática moderna de CSS é enfática: use valores sem unidade (line-height: 1.5, não 24px ou 150%). A distinção importa por causa da herança. Um valor sem unidade é herdado como razão e recalculado em relação ao corpo de fonte de cada elemento; um valor em pixels ou porcentagem é computado uma única vez e herdado como comprimento fixo. Defina line-height: 24px no corpo de uma página e um título aninhado a 32px será renderizado com linhas sobrepostas. A entrelinha sem unidade faz toda a cascata escalar corretamente — o que também mantém os layouts intactos quando os usuários ampliam o texto.

Em terceiro lugar, os próprios layouts mudaram. Contêineres de texto com altura fixa eram comuns em 2005 e são a principal baixa da exigência do 1.4.12: uma caixa dimensionada para exatamente três linhas de texto com line-height 1.3 cortará seu conteúdo quando um leitor a sobrescrever para 1.5. Contêineres que abrigam texto devem se dimensionar a partir do conteúdo, usando min-height onde um mínimo for necessário, nunca uma altura fixa.

Entrelinha e medida são uma única decisão

O refinamento mais importante em relação ao capítulo original é que a entrelinha não pode ser escolhida isoladamente. Entrelinha e comprimento de linha (medida) são interdependentes, e o mecanismo é o movimento de retorno. Em uma linha curta, o retorno do olho para a esquerda é um salto breve e errar o alvo é raro, de modo que uma entrelinha mais apertada é tolerável. Em uma linha longa, o movimento de retorno é longo e impreciso; uma entrelinha generosa dá ao olho uma "pista de pouso" mais larga e torna a duplicação — reler a mesma linha — muito menos provável. Trata-se de um achado antigo da pesquisa de legibilidade, observado desde os estudos com impressos: a entrelinha aceitável cresce com a medida.

Na prática: uma nota lateral de 45 caracteres pode ser lida confortavelmente com 1.4; uma coluna de artigo de 75 caracteres pede 1.6 ou mais. Se um layout impõe linhas longas, compense com entrelinha. Melhor ainda, restrinja a medida (assunto do próximo capítulo) para que a entrelinha possa permanecer na faixa intermediária confortável.

A variabilidade entre tipos, apontada no original, continua valendo. O line-height é calculado a partir do corpo da fonte, mas o que o leitor percebe é o canal branco entre a massa visual de uma linha e a da seguinte — e isso depende da altura de x, do comprimento de ascendentes e descendentes e do peso do traço. Um tipo de altura de x grande, como a Verdana, preenche mais plenamente seu eixo tipográfico (em) e parece mais apertado a um dado line-height do que um tipo de altura de x pequena no mesmo ajuste. Tipos escuros, em negrito ou condensados também pedem mais respiro. Julgue a entrelinha olhando parágrafos compostos, não confiando em um número.

Títulos são diferentes

A orientação de 1.4–1.6 se aplica a texto corrido contínuo. Títulos seguem a lógica oposta: em corpos grandes, uma entrelinha proporcional deixa vãos enormes entre linhas quebradas, separando visualmente o título de si mesmo. Títulos de várias linhas leem melhor apertados — tipicamente 1.1 a 1.25, aproximando-se de 1.0 em composições de exibição muito grandes. Como o line-height sem unidade é herdado como razão, os estilos de título devem definir explicitamente seus próprios valores mais apertados, em vez de herdar a entrelinha do texto corrido. As exigências de espaçamento da WCAG dizem respeito a blocos de texto, não a manchetes de exibição, mas os títulos ainda não podem ser cortados quando os usuários aplicam sobrescritas — mais um motivo para evitar contêineres de destaque com altura fixa.

Duas notas menores. Primeiro, os extremos prejudicam em ambas as direções: o alerta do original contra entrelinha excessiva permanece, pois linhas flutuando em espaço branco demais dificultam a busca pela linha seguinte e fragmentam o parágrafo como unidade — além de aproximadamente 2.0, o texto corrido começa a se desintegrar. Segundo, interfaces também são texto: botões, rótulos de formulário e navegação precisam de um line-height sensato o bastante para sobreviver a quebras de linha e a sobrescritas do usuário, e o hábito comum de centralizar texto de interface de linha única com truques que presumem que ele nunca quebrará é uma falha recorrente do 1.4.12.

No CSS

body { line-height: 1.5; }      /* unitless — scales with size */
h1, h2 { line-height: 1.15; }   /* display sizes want less */
figcaption { line-height: 1.4; }

/* Longer measures need more leading: */
.wide-column { line-height: 1.6; }

Recomendações

  • Componha o texto corrido com entrelinha de 1.5 como padrão; ajuste dentro de aproximadamente 1.4–1.7 conforme o tipo e a medida.
  • Use sempre valores de line-height sem unidade, para que a razão seja herdada e escale corretamente.
  • Aumente a entrelinha à medida que o comprimento da linha cresce; medidas longas precisam de mais respiro para o movimento de retorno.
  • Aperte os títulos para aproximadamente 1.1–1.25, definidos explicitamente nos estilos de título.
  • Nunca fixe a altura de contêineres que abrigam texto; deixe o conteúdo determinar a altura, com min-height onde necessário.
  • Teste com uma sobrescrita de espaçamento de texto (entrelinha 1.5, conforme WCAG 1.4.12) e com zoom de 200% para confirmar que nada é cortado ou se sobrepõe.
  • Avalie a entrelinha visualmente para cada tipo — altura de x e peso mudam a forma como o mesmo número se lê.

Leituras adicionais