Entrelinha e comprimento de linha para texto legível

A entrelinha é a distância entre a linha de base de uma linha de texto e a linha de base da seguinte, e o comprimento de linha (a que os tipógrafos chamam medida) é o número de caracteres numa linha. Para texto corrido, uma entrelinha de cerca de 1,4 a 1,6 vezes o tamanho da letra e um comprimento de linha de cerca de 45 a 75 caracteres é o intervalo que se lê com conforto na maioria dos tipos de letra. Os títulos pedem menos entrelinha, muitas vezes de 1,05 a 1,25. Estas duas definições fazem mais pela legibilidade do que quase qualquer escolha de tipo de letra.

Este guia explica porque é que estes intervalos funcionam, como as duas definições se influenciam e como as ajustar em páginas web, diapositivos e publicações nas redes sociais. Faz parte do guia mais amplo de noções básicas de tipografia, ao lado do espaçamento entre letras.

O que controlam realmente a entrelinha e o comprimento de linha

Ler é uma série de saltos. O olho apanha algumas palavras, salta ao longo da linha e depois faz um longo movimento de regresso para a esquerda para encontrar a linha seguinte. O comprimento de linha decide quanto dura esse percurso. A entrelinha decide quão fácil é aterrar na linha certa no fim do regresso.

Apertada demais, as linhas amontoam-se: as descendentes tocam nas ascendentes e o regresso aterra na linha errada. Solta demais, o parágrafo desfaz-se em tiras. Linhas demasiado longas perdem o olho no caminho de volta; linhas demasiado curtas tornam a leitura aos solavancos.

Como escolher a entrelinha para texto corrido

Começa em 1,5 e ajusta a olho. Há três fatores que fazem o número subir ou descer.

• Altura x. Os tipos de letra com uma altura x grande (minúsculas grandes em relação às maiúsculas) parecem mais densos, por isso precisam de mais entrelinha. Os tipos de letra com uma altura x pequena podem ficar mais apertados.
• Comprimento de linha. As linhas longas precisam de mais entrelinha para que o regresso tenha um alvo mais largo. As linhas curtas, como numa coluna estreita ou no ecrã de um telemóvel, podem usar um pouco menos.
• Peso e cor. O texto a negrito e o texto claro sobre um fundo escuro parecem mais pesados na página, por isso beneficiam de um pouco mais de espaço entre linhas.

As orientações de acessibilidade apontam no mesmo sentido. O critério de sucesso sobre espaçamento de texto do W3C pede que o conteúdo continue a funcionar quando um leitor aumenta a entrelinha para 1,5 vezes o tamanho da letra, por isso qualquer composição pensada à volta de 1,5 já passa essa parte do teste. Nunca fixes a altura de uma caixa de texto de forma tão justa que uma entrelinha maior corte as palavras.

Entrelinha para títulos e letra grande

A entrelinha é uma proporção, por isso o espaço que cria cresce com o tamanho da letra. A 16 px, uma entrelinha de 1,5 acrescenta 8 px de espaço. A 72 px, a mesma proporção acrescenta 36 px, muito mais do que um título precisa. É por isso que a letra grande parece solta com valores de texto corrido e precisa de apertar à medida que cresce.

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

Que comprimento deve ter uma linha de texto

O intervalo consagrado da tipografia de livros é de 45 a 75 caracteres por linha, contando letras, espaços e pontuação, com algo entre 60 e 70 a parecer mais natural para leitura contínua. Num site, isso significa normalmente uma coluna de texto com cerca de 560 a 720 px de largura para um tamanho de letra de 16 a 18 px, mas depende do tipo de letra, por isso mede em caracteres e não em píxeis.

Para verificar, conta os caracteres de uma linha típica. Se passar regularmente de cerca de 80, a coluna é larga demais; abaixo de cerca de 40, é estreita demais, com margens irregulares e palavras curtas isoladas.

Larga demais: 110 caracteres

1100 × 180

Confortável: 65 caracteres

650 × 260

Estreita demais: 30 caracteres

300 × 480

Definir a entrelinha e o comprimento de linha em CSS

Dois hábitos cobrem quase tudo. Escreve a entrelinha como um número sem unidade, para que cada elemento a calcule a partir do seu próprio tamanho de letra, e limita o comprimento de linha com a unidade ch, que se baseia na largura do carácter zero no tipo de letra atual. A página da MDN sobre line-height explica porque é que os valores sem unidade se herdam com mais segurança do que píxeis 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 de linha em publicações e diapositivos

As publicações nas redes sociais e os diapositivos leem-se em segundos, muitas vezes num telemóvel, por isso as regras mudam. As linhas são curtas por natureza e são poucas. Mantém os títulos apertados, perto de 1,05 a 1,2, e limita qualquer linha de apoio a uma ou duas linhas curtas a cerca de 1,3. Se uma publicação precisa de um parágrafo com entrelinha de texto corrido, provavelmente precisa antes de menos palavras.

Numa publicação de 1080 por 1350, um título com três a seis palavras por linha lê-se bem no tamanho de um telemóvel. Num diapositivo de 1920 por 1080, o mesmo princípio aplica-se do outro lado da sala: linhas curtas, títulos apertados, margens generosas. Os guias sobre tipos de letra para redes sociais e fundos para apresentações tratam a questão do tamanho.

Texto sobre um fundo carregado precisa de um pouco mais de tudo: mais entrelinha, um tamanho maior e uma zona mais calma por trás. Texto sobre gradiente explica o método completo.

Uma lista rápida para um espaçamento legível

1. 1

   Define primeiro o texto corrido

   Escolhe o tamanho, uma entrelinha perto de 1,5 e uma medida de 60 a 70 caracteres. Afina tudo o resto a partir daqui.

2. 2

   Aperta à medida que a letra cresce

   Desce a entrelinha dos subtítulos aos títulos e verifica colisões nas linhas mais apertadas.

3. 3

   Mede em caracteres

   Conta uma linha real. Se ficar fora de 45 a 75, corrige o contentor, não o tamanho da letra.

4. 4

   Deixa o leitor alterar

   Evita caixas de texto de altura fixa, para que texto maior ou mais espaçamento nunca corte as tuas palavras.