Entrelinha e comprimento da linha para textos legíveis

A entrelinha (line height) é a distância da linha de base de uma linha de texto até a linha de base da seguinte, e o comprimento da linha (que os tipógrafos chamam de medida) é quantos caracteres ficam numa linha. Para texto corrido, uma entrelinha de cerca de 1,4 a 1,6 vez o tamanho da fonte e um comprimento de linha de cerca de 45 a 75 caracteres é a faixa que se lê com conforto na maioria das fontes. Os títulos pedem menos entrelinha, muitas vezes de 1,05 a 1,25. Esses dois ajustes fazem mais pela legibilidade do que quase qualquer escolha de fonte.

Este guia explica por que essas faixas funcionam, como os dois ajustes se afetam e como defini-los em páginas web, slides e posts. Ele faz parte do guia mais amplo de básico da tipografia, ao lado do espaçamento entre letras.

O que a entrelinha e o comprimento da linha controlam

Ler é uma série de saltos. O olho capta algumas palavras, salta ao longo da linha e depois faz um longo movimento de volta para a esquerda para encontrar a próxima linha. O comprimento da linha decide o tamanho dessa viagem. A entrelinha decide o quanto é fácil pousar na linha certa no fim do movimento de volta.

Apertada demais, as linhas se amontoam: as descendentes encostam nas ascendentes e o movimento de volta cai na linha errada. Solta demais, o parágrafo se desfaz em tiras. Linhas longas demais perdem o olho no caminho de volta; linhas curtas demais tornam a leitura picotada.

Como escolher a entrelinha do texto corrido

Comece em 1,5 e ajuste a olho. Três coisas empurram o número para cima ou para baixo.

• Altura-x. Fontes com altura-x alta (minúsculas grandes em relação às maiúsculas) parecem mais densas, então precisam de mais entrelinha. Fontes com altura-x pequena podem ficar mais juntas.
• Comprimento da linha. Linhas longas precisam de mais entrelinha para que o movimento de volta tenha um alvo maior. Linhas curtas, como uma coluna estreita ou a tela do celular, podem usar um pouco menos.
• Peso e cor. Texto bold e texto claro sobre fundo escuro parecem mais pesados na página, então se beneficiam de um pouco mais de espaço entre as linhas.

As orientações de acessibilidade apontam na mesma direção. O critério de sucesso de espaçamento de texto do W3C pede que o conteúdo continue funcionando quando o leitor aumenta a entrelinha para 1,5 vez o tamanho da fonte, então qualquer layout construído em torno de 1,5 já passa nessa parte do teste. Nunca fixe a altura de uma caixa de texto tão justa que uma entrelinha maior corte as palavras.

Entrelinha para títulos e letras grandes

A entrelinha é uma proporção, então o espaço que ela cria cresce com o tamanho da fonte. Em 16 px, uma entrelinha de 1,5 acrescenta 8 px de espaço. Em 72 px, a mesma proporção acrescenta 36 px, muito mais do que um título precisa. É por isso que letras grandes parecem soltas com os ajustes do texto corrido e precisam ser apertadas conforme crescem.

Uma escala prática: texto corrido em 1,5, subtítulos em cerca de 1,3, títulos de 1,1 a 1,2 e linhas display muito grandes de 1,0 a 1,05. Confira as colisões nos ajustes mais apertados: uma descendente na primeira linha (g, y, p) pode bater num acento ou numa ascendente na segunda. Se isso acontecer, abra um pouco a entrelinha em vez de mover linhas individualmente.

Qual deve ser o comprimento de uma linha de texto

A faixa consagrada da tipografia de livros é de 45 a 75 caracteres por linha, contando letras, espaços e pontuação, com algo em torno de 60 a 70 parecendo mais natural para leitura contínua. Num site, isso costuma significar uma coluna de texto entre cerca de 560 e 720 px de largura com uma fonte de 16 a 18 px, mas depende da fonte, então meça em caracteres, não em pixels.

Para conferir, conte os caracteres de uma linha típica. Passar sempre de uns 80 significa que a coluna está larga demais; ficar abaixo de uns 40 significa que está estreita demais, com bordas irregulares e palavras curtas isoladas.

Larga demais: 110 caracteres

1100 × 180

Confortável: 65 caracteres

650 × 260

Estreita demais: 30 caracteres

300 × 480

Como definir entrelinha e comprimento da linha no CSS

Dois hábitos resolvem quase tudo. Escreva a entrelinha como um número sem unidade, para que cada elemento a calcule a partir do próprio tamanho de fonte, e limite o comprimento da linha com a unidade ch, que se baseia na largura do caractere zero na fonte atual. A página do MDN sobre line-height explica por que valores sem unidade são herdados com mais segurança do que pixels ou ems.

:root {
  --measure: 65ch;
}

body {
  font-size: 1.0625rem; /* 17px */
  line-height: 1.55;
}

.prose {
  max-width: var(--measure);
  margin-inline: auto;
}

.prose p + p {
  margin-block-start: 1em;
}

h1, h2 {
  line-height: 1.12;
  text-wrap: balance;
}

h3 {
  line-height: 1.3;
}

.caption {
  font-size: 0.875rem;
  line-height: 1.45;
  max-width: 55ch;
}

Entrelinha e comprimento da linha em posts e slides

Posts e slides são lidos em segundos, muitas vezes no celular, então as regras mudam. As linhas são curtas por natureza e são poucas. Mantenha os títulos apertados, em torno de 1,05 a 1,2, e limite qualquer linha de apoio a uma ou duas linhas curtas em torno de 1,3. Se um post precisa de um parágrafo com entrelinha de texto corrido, provavelmente ele precisa é de menos palavras.

Num post de 1080 por 1350, um título de três a seis palavras por linha se lê bem no tamanho do celular. Num slide de 1920 por 1080, o mesmo princípio vale do outro lado da sala: linhas curtas, títulos apertados, margens generosas. Os guias de fontes para redes sociais e de fundos para apresentações tratam do lado do tamanho.

Texto sobre um fundo carregado precisa de um pouco mais de tudo: mais entrelinha, um tamanho maior e uma área mais calma atrás. O guia de texto sobre um gradiente traz o método completo.

Um checklist rápido para um espaçamento legível

1. 1

   Defina o texto corrido primeiro

   Escolha o tamanho, uma entrelinha em torno de 1,5 e uma medida de 60 a 70 caracteres. Ajuste todo o resto a partir daí.

2. 2

   Aperte conforme o texto cresce

   Reduza a entrelinha dos subtítulos até os títulos e confira as linhas mais apertadas em busca de colisões.

3. 3

   Meça em caracteres

   Conte uma linha real. Se ela ficar fora de 45 a 75, ajuste o contêiner, não o tamanho da fonte.

4. 4

   Deixe o leitor mudar

   Evite caixas de texto de altura fixa, para que um texto maior ou um espaçamento mais largo nunca corte as suas palavras.