# Entrelinha e comprimento da linha para textos legíveis

[Canonical HTML page](https://gradiently.design/pt-br/guide/line-height-and-line-length)

A maior parte dos textos cansativos de ler tem a fonte certa e o espaçamento errado. Dois ajustes resolvem quase tudo: a altura de cada linha e até onde ela se estende.

## The short version

- A entrelinha é a distância vertical de uma linha de texto até a seguinte, e o comprimento da linha é quantos caracteres cabem numa linha.
- O texto corrido costuma se ler melhor com 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.
- Os títulos precisam de uma entrelinha mais apertada que o texto corrido, muitas vezes de 1,05 a 1,25, porque letras grandes já têm bastante espaço entre as linhas.
- Quanto mais longa a linha, mais entrelinha ela precisa, para que o olho encontre o começo da linha seguinte sem escorregar.
- No CSS, defina a entrelinha sem unidade, como `line-height: 1.5`, e limite o comprimento da linha com `max-width` em unidades `ch`.

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](https://gradiently.design/pt-br/guide/typography-basics), ao lado do [espaçamento entre letras](https://gradiently.design/pt-br/guide/letter-spacing).

## 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.

| Ajuste | Pouco | Confortável | Demais |
| --- | --- | --- | --- |
| Entrelinha do texto corrido | Abaixo de 1,2: as linhas se amontoam e colidem | 1,4 a 1,6 | Acima de 2: o parágrafo se separa em tiras |
| Entrelinha dos títulos | Abaixo de 1: letras de duas linhas se tocam | 1,05 a 1,25 | Acima de 1,4: um título de duas linhas parece dois títulos |
| Comprimento da linha do texto corrido | Abaixo de uns 40 caracteres: picotado | 45 a 75 caracteres | Acima de uns 90 caracteres: o olho se perde |

Faixas iniciais para texto em alfabeto latino. A altura-x da sua fonte e o tamanho em que você a usa mudam esses valores um pouco para cima ou para baixo.

## 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](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html) 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.

### Evite

- Uma entrelinha para todos os tamanhos do design
- Texto corrido em 1,2 porque fica arrumado no mockup
- Títulos em 1,5, fazendo um título de duas linhas se desmanchar
- Caixas de texto de altura fixa que cortam quando o espaçamento cresce

### Faça

- Entrelinha mais apertada conforme o texto cresce
- Texto corrido em torno de 1,5, ajustado à fonte
- Títulos entre 1,05 e 1,25
- Caixas que crescem com o texto

## 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.

Um post em retrato com um título de duas linhas com entrelinha apertada sobre um gradiente quente

Um título de duas linhas bem junto, em torno de 1,1, se mantém como um único pensamento.

Um post em retrato com um título e um parágrafo de texto corrido com entrelinha mais generosa

O texto de apoio embaixo ganha mais espaço, porque é lido linha por linha.

## 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

O mesmo parágrafo em três medidas. A coluna confortável tem cerca de dois terços da largura da larga e é muito mais fácil de acompanhar.

> **Tela larga não significa texto largo** Num monitor grande, acrescente espaço em volta da coluna ou uma segunda coluna para imagens e notas. Esticar o texto corrido para preencher a tela é a causa mais comum de páginas que parecem difíceis de ler.

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) explica por que valores sem unidade são herdados com mais segurança do que pixels ou ems.

```css
: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;
}
```

Entrelinhas sem unidade que apertam conforme o texto cresce e uma medida em caracteres. O `ch` se baseia num único glifo, então confira um parágrafo real e ajuste o valor se a sua fonte for larga.

## 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](https://gradiently.design/pt-br/guide/fonts-for-social-media) e de [fundos para apresentações](https://gradiently.design/pt-br/guide/presentation-backgrounds) tratam do lado do tamanho.

Um post em retrato listando três itens em linhas curtas sobre um fundo em gradiente suave

Um post de lista mantém cada item numa linha curta, então a entrelinha só precisa manter a lista unida.

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](https://gradiently.design/pt-br/guide/text-on-gradient) traz o método completo.

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

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. **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. **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. **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.

## FAQ

### Qual é uma boa entrelinha para texto corrido?

Cerca de 1,4 a 1,6 vez o tamanho da fonte, na maioria das fontes e telas. Comece em 1,5 e ajuste conforme a altura-x da fonte e o comprimento das linhas.

### Qual é o comprimento de linha ideal para leitura?

Cerca de 45 a 75 caracteres por linha, contando os espaços, com algo entre 60 e 70 parecendo mais natural para leituras longas. No CSS, um `max-width` de 60ch a 70ch é um bom começo.

### Entrelinha e line-height são a mesma coisa?

Quase. O termo leading vem dos tipos de metal, quando tiras de chumbo eram colocadas entre as linhas. Nas ferramentas digitais, o line-height é a distância completa de uma linha de base até a seguinte, que é o que a maioria das pessoas hoje chama de entrelinha.

### Por que os títulos precisam de uma entrelinha menor que o texto corrido?

A entrelinha é uma proporção do tamanho da fonte, então em tamanhos grandes a mesma proporção acrescenta muito mais espaço. Os títulos costumam ficar melhores entre 1,05 e 1,25.