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

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

Três palavras para três intervalos diferentes. Se as confundires, acabas a corrigir o errado. Eis o que cada uma controla, qual usar primeiro e os valores que servem de ponto de partida.

## The short version

- O tracking muda de uma só vez o espaço entre todas as letras de uma linha ou bloco de texto.
- O kerning muda o espaço entre um par específico de letras, como o A e o V.
- A entrelinha é a distância vertical entre linhas de texto, chamada line-height em CSS e na maioria das apps.
- Define primeiro a entrelinha e o tracking de um estilo inteiro e só depois ajusta pares individuais, apenas em letra grande.
- Os títulos grandes pedem normalmente tracking e entrelinha um pouco mais apertados, enquanto as maiúsculas e o texto pequeno pedem mais tracking.

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

| Termo | O que muda | Alcance | Nome em 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 carateres | `font-kerning` (só ligar ou desligar) |
| Entrelinha | Espaço entre linhas | Um parágrafo ou caixa de texto | `line-height` |

O trio do espaçamento de relance. Dois funcionam na horizontal, um na vertical, e só um atua sobre um único par.

## O que é o tracking em tipografia

O tracking é uma mudança uniforme. Seleciona uma linha, junta tracking e cada intervalo cresce na mesma medida. É a ferramenta para mudar a *textura* do texto: arejado e formal, ou denso e incisivo. Nas apps de design mede-se em milésimos de em (Adobe) ou em percentagem do tamanho da letra (Figma), e em CSS como `letter-spacing`, de preferência em em para acompanhar o tipo.

Há três situações que o pedem. Os títulos grandes costumam parecer soltos com o espaçamento por omissão, por isso um pouco de tracking negativo junta-os. As maiúsculas parecem apertadas, porque foram desenhadas para ficar ao lado de minúsculas, por isso pedem tracking positivo. E o texto muito pequeno, como etiquetas e linhas legais, lê-se melhor com um toque mais de ar. [Espaçamento entre letras](https://gradiently.design/pt-pt/guide/letter-spacing) trata de cada caso em pormenor.

## O que é o kerning

O kerning é uma reparação 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 ajustam-nos automaticamente, por isso em texto corrido podes deixar o kerning em paz. Em títulos, logótipos e marcas nominativas pode ser preciso ajustar um ou dois pares à mão. [Kerning](https://gradiently.design/pt-pt/guide/kerning) tem a lista completa de pares problemáticos e um método para os corrigir a olho.

## O que é a entrelinha em tipografia

A entrelinha (leading em inglês) vem do nome das tiras de chumbo que os impressores punham entre linhas de tipo metálico. Hoje é a altura da linha: a distância de uma linha de base à seguinte. Pouca e as hastes ascendentes chocam com as descendentes; demais e as linhas afastam-se em ideias separadas. Em regra, quanto mais longa a linha e mais pequeno o texto, mais entrelinha precisa. [Altura e comprimento da linha](https://gradiently.design/pt-pt/guide/line-height-and-line-length) explica porquê.

Uma publicação vertical com um sobretítulo em maiúsculas espaçadas a dizer NOVA ESTAÇÃO por cima de um título apertado a dizer Coleção de primavera já chegou

Onde cada definição pertence: tracking aberto no sobretítulo em maiúsculas, tracking e entrelinha apertados no título, espaçamento normal na linha de detalhe.

Uma publicação editorial vertical com uma pequena etiqueta espaçada a dizer NÚMERO 04 e um título a dizer Notas do estúdio

Um layout editorial. A sua letra pequena, a etiqueta e o subtítulo, lê-se com mais calma com entrelinha generosa e tracking ligeiramente aberto.

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

Trabalha da decisão maior para a menor. A entrelinha e o tracking definem o estilo; o kerning arruma o que sobra. Se os mudares pela ordem errada, desfazes o teu próprio trabalho.

1. **Escolhe tamanho e peso** O espaçamento depende de ambos. Define-os primeiro, porque um peso mais forte ou um tamanho maior pede valores diferentes.
2. **Define a entrelinha** Decide quão apertadas ficam as linhas. Os títulos vão mais apertados, os parágrafos mais soltos.
3. **Define o tracking do estilo** Aplica um só valor de tracking a todo o estilo de título, de etiqueta ou de texto corrido. Mantém-no coerente em todo o design.
4. **Ajusta os pares que ainda têm intervalo** Só em letra grande ou permanente. Procura AV, To, LT e pares semelhantes e ajusta-os um a um.
5. **Confere ao tamanho real** Vê o resultado ao tamanho em que as pessoas o verão. O espaçamento que parece certo com zoom pode parecer solto num telemóvel.

## Valores iniciais para tracking e entrelinha

São predefinições sensatas, não leis. As fontes diferem, e um tipo de destaque condensado comporta-se de forma muito diferente de uma geométrica larga. Usa-os para começar e depois confia no 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 destaque enorme, 120 px ou mais | -0,02em a -0,04em | -20 a -40 | 0,9 a 1,05 |
| Etiquetas em maiúsculas | 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 o mesmo: 0,05em equivale a 50 unidades. A entrelinha mostra-se como múltiplo do tamanho da letra.

### Erros comuns

- Fazer kerning de todos os pares quando o tracking está errado
- Apertar o tracking do texto corrido para caberem mais palavras
- Entrelinha por omissão num título de três linhas
- Maiúsculas com tracking a zero
- Tracking diferente em cada título de um conjunto

### Melhor

- Corrige primeiro o tracking, depois o kerning do que sobra
- Edita antes o texto
- Baixa a entrelinha do título para cerca de 1,1
- Abre as maiúsculas em 0,06em ou mais
- Um valor por estilo, escrito nas regras da tua 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;
}
```

Escreve `line-height` sem unidade para acompanhar o tamanho da letra, e `letter-spacing` em em pela mesma razão.

Guarda estes valores num só sítio para todas as páginas usarem o mesmo espaçamento para a mesma função. É o coração de um [sistema tipográfico](https://gradiently.design/pt-pt/guide/brand-typography-system). Se desenhas publicações sociais em vez de páginas web, aplica-se a mesma ideia: decide o espaçamento uma vez, escreve-o nas regras da marca e reutiliza-o. No Gradiently, o kit de marca guarda as tuas fontes de título e de texto e o Designer aplica-o ao dispor os novos tamanhos, por isso a letra mantém-se coerente de uma publicação quadrada 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.

### A entrelinha é o mesmo que a altura da linha?

Na prática, sim. Entrelinha é o termo tradicional da impressão e altura da linha é como o CSS e a maioria das apps de design chamam à distância entre linhas.

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

Primeiro o tracking. Define o espaçamento geral; o kerning corrige depois os poucos pares que ainda parecem desiguais, e só em letra grande.

### Como se chama o tracking em CSS?

`letter-spacing`. Escreve-o em em, como `0.05em`, para se manter proporcional quando o tamanho da letra muda.

### Que altura de linha deve ter o texto corrido?

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