# Tracking, kerning e entrelinha: o trio do espaçamento

[Canonical HTML page](https://gradiently.design/pt-br/guide/tracking-vs-kerning)

Três nomes para três vãos diferentes. Misture e você acaba corrigindo o errado. Veja o que cada um controla, qual ajustar primeiro e os números que servem de ponto de partida.

## The short version

- O tracking muda o espaço entre todas as letras de uma linha ou de um bloco de texto de uma vez.
- O kerning muda o espaço entre um par específico de letras, como A e V.
- A entrelinha é a distância vertical entre linhas de texto, chamada de line-height no CSS e na maioria dos apps.
- Defina primeiro a entrelinha e o tracking de um estilo inteiro e só depois ajuste pares individuais com kerning, em tipos grandes.
- Títulos grandes costumam pedir tracking e entrelinha um pouco mais justos, enquanto caixa alta e texto pequeno pedem mais tracking.

Em **tracking e kerning**, a diferença é o alcance. O tracking ajusta o espaço entre todas as letras de uma seleção, então um título inteiro se abre ou se fecha de modo uniforme. O kerning ajusta o espaço entre um par específico, como o A e o V de WAVE, para corrigir um vão que a fonte deixou. A entrelinha, o terceiro do trio, não tem nada a ver com letras lado a lado: é o espaço vertical de uma linha de texto até a seguinte.

| Termo | O que muda | Alcance | Nome no CSS |
| --- | --- | --- | --- |
| Tracking | Espaço entre todas as letras | Uma palavra, linha ou parágrafo | `letter-spacing` |
| Kerning | Espaço entre um par de letras | Dois caracteres | `font-kerning` (só ligado ou desligado) |
| Entrelinha | Espaço entre linhas | Um parágrafo ou caixa de texto | `line-height` |

O trio do espaçamento num relance. Dois atuam na horizontal, um na vertical, e só um age sobre um único par.

## O que é tracking em tipografia

O tracking é uma mudança uniforme. Selecione uma linha, acrescente tracking e todo vão cresce na mesma medida. É a ferramenta para mudar a *textura* do texto: arejado e formal, ou denso e marcante. Em apps de design é medido em milésimos de em (Adobe) ou como porcentagem do tamanho da fonte (Figma), e em CSS como `letter-spacing`, de preferência escrito em em para acompanhar o tamanho do tipo.

Três situações pedem tracking. Títulos grandes costumam parecer soltos no espaçamento padrão, então um pouco de tracking negativo os aproxima. Caixa alta parece apertada, porque as maiúsculas foram desenhadas para ficar ao lado de minúsculas, então precisam de tracking positivo. E textos muito pequenos, como rótulos e linhas legais, se leem melhor com um toque a mais de ar. [Espaçamento entre letras](https://gradiently.design/pt-br/guide/letter-spacing) trata de cada caso em detalhe.

## O que é kerning

O kerning é um reparo local. Alguns pares de letras deixam um buraco visível ou uma colisão mesmo numa fonte bem espaçada: AV, To, LT, Yo, P seguido de ponto final. As fontes incluem uma tabela desses pares e os ajustam automaticamente, então no texto corrido você pode deixar o kerning em paz. Em títulos, logos e logotipos, talvez ainda precise ajustar um ou dois pares à mão. [Kerning](https://gradiently.design/pt-br/guide/kerning) traz a lista completa de pares problemáticos e um método para corrigi-los a olho.

## O que é entrelinha em tipografia

O termo inglês leading vem das tiras de chumbo que os impressores punham entre linhas de tipo de metal. Hoje é a altura de linha: a distância de uma linha de base à seguinte. Pouca, e as hastes ascendentes batem nas descendentes; muita, e as linhas se afastam em pensamentos separados. Como regra, quanto mais longa a linha e menor o texto, mais entrelinha ele pede. [Altura e comprimento de linha](https://gradiently.design/pt-br/guide/line-height-and-line-length) explica por quê.

Um post vertical com uma linha de apoio em caixa alta espaçada dizendo NOVA ESTAÇÃO acima de um título bem justo dizendo Coleção de primavera chegou

Onde cada ajuste se encaixa: tracking aberto na linha de apoio em caixa alta, tracking e entrelinha justos no título, espaçamento normal na linha de detalhe.

Um post editorial vertical com um pequeno rótulo espaçado dizendo EDIÇÃO 04 e um título dizendo Notas do ateliê

Um layout editorial. O tipo pequeno, o rótulo e o subtítulo, se lê com mais calma com entrelinha generosa e tracking levemente aberto.

## O que mudar primeiro: tracking, kerning ou entrelinha

Trabalhe da maior decisão para a menor. Entrelinha e tracking definem o estilo; o kerning arruma o que sobrar. Mude fora dessa ordem e você desfaz o próprio trabalho.

1. **Escolha tamanho e peso** O espaçamento depende dos dois. Defina-os primeiro, porque um peso mais pesado ou um tamanho maior pede valores diferentes.
2. **Defina a entrelinha** Decida quão justas as linhas se empilham. Títulos ficam mais justos, parágrafos mais soltos.
3. **Defina o tracking do estilo** Aplique um único valor de tracking ao estilo inteiro de título, rótulo ou texto corrido. Mantenha consistente em todo o design.
4. **Ajuste com kerning os pares que ainda têm vão** Só em tipo grande ou permanente. Procure AV, To, LT e pares parecidos e ajuste um a um.
5. **Confira no tamanho real** Veja o resultado no tamanho em que as pessoas vão ver. Um espaçamento que parece certo com zoom pode parecer solto no celular.

## Valores de partida para tracking e entrelinha

São padrões sensatos, não leis. As fontes diferem, e uma fonte de exibição condensada não se comporta como uma geométrica larga. Use para começar e depois confie no seu olho.

| Função do texto | Tracking (CSS) | Tracking (unidades Adobe) | Entrelinha |
| --- | --- | --- | --- |
| Texto corrido, 14 a 20 px | 0 | 0 | 1,4 a 1,6 |
| Título, 48 px ou mais | -0,01em a -0,03em | -10 a -30 | 1,0 a 1,15 |
| Tipo de exibição enorme, 120 px ou mais | -0,02em a -0,04em | -20 a -40 | 0,9 a 1,05 |
| Rótulos em caixa alta | 0,06em a 0,12em | 60 a 120 | 1,2 a 1,3 |
| Texto pequeno abaixo de 13 px | 0,01em a 0,02em | 10 a 20 | 1,4 a 1,5 |

O tracking em em do CSS e em milésimos de em da Adobe diz a mesma coisa: 0,05em equivale a 50 unidades. A entrelinha aparece como múltiplo do tamanho da fonte.

### Erros comuns

- Aplicar kerning em cada par quando o tracking está errado
- Apertar o tracking do texto corrido para caber mais palavras
- Entrelinha padrão num título de três linhas
- Caixa alta com tracking zero
- Tracking diferente em cada título de um conjunto

### Melhor

- Corrija o tracking primeiro e depois o kerning do que sobrar
- Edite o texto em vez disso
- Reduza a entrelinha do título para cerca de 1,1
- Abra a caixa alta em 0,06em ou mais
- Um valor por estilo, anotado nas regras da marca

## Tracking, kerning e entrelinha em CSS

```css
:root {
  font-kerning: normal; /* use the font's own pairs */
}

body {
  font-size: 1.0625rem;
  line-height: 1.55;      /* leading */
  letter-spacing: 0;      /* tracking */
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
```

Escreva `line-height` sem unidade para acompanhar o tamanho da fonte e `letter-spacing` em em pelo mesmo motivo.

Mantenha esses valores num só lugar para que toda página use o mesmo espaçamento para a mesma função. Esse é o coração de um [sistema tipográfico](https://gradiently.design/pt-br/guide/brand-typography-system). Se você cria posts sociais e não páginas web, vale a mesma ideia: decida o espaçamento uma vez, escreva nas regras da marca e reutilize. No Gradiently, o kit de marca guarda suas fontes de título e de texto e o Designer o aplica quando diagrama novos tamanhos, então o tipo continua consistente de um post quadrado a um story.

## FAQ

### Qual a diferença entre tracking e kerning?

O tracking muda o espaçamento entre todas as letras de uma seleção. O kerning muda o espaçamento entre um par específico de letras.

### Entrelinha é o mesmo que line-height?

Na prática, sim. Entrelinha é o termo tradicional da impressão e line-height é como o CSS e a maioria dos apps de design chamam a distância entre linhas.

### Devo ajustar primeiro o tracking ou o kerning?

Primeiro o tracking. Ele define o espaçamento geral; o kerning então corrige os poucos pares que ainda parecem irregulares, e só em tipo grande.

### Como se chama tracking em CSS?

`letter-spacing`. Escreva em em, como `0.05em`, para que continue proporcional quando o tamanho da fonte mudar.

### Que line-height o texto corrido deve ter?

Cerca de 1,4 a 1,6 vezes o tamanho da fonte para texto corrido e cerca de 1,0 a 1,15 para títulos grandes.