# Espaçamento entre letras: quando abrir e quando apertar a letra

[Canonical HTML page](https://gradiently.design/pt-pt/guide/letter-spacing)

Umas centésimas de em decidem se uma etiqueta parece cuidada ou apertada. Vê onde juntar espaço entre as letras, onde o tirar e onde não lhe mexer.

## The short version

- O espaçamento entre letras, também chamado tracking, é a quantidade uniforme de espaço que se junta ou se tira entre todas as letras de um trecho de texto.
- O kerning é diferente: ajusta o espaço entre pares específicos de letras, como A e V, e normalmente já vem incluído na fonte.
- As maiúsculas e as etiquetas pequenas precisam quase sempre de espaçamento extra, tipicamente entre 0.05em e 0.12em.
- Os títulos grandes costumam ficar melhor ligeiramente apertados, muitas vezes entre 0.01em e 0.03em, porque o espaçamento por omissão da fonte foi desenhado para tamanhos mais pequenos.
- O texto corrido deve, em regra, ficar com o espaçamento entre letras por omissão da fonte.

O **espaçamento entre letras** (tracking) é o espaço uniforme que se junta ou se tira entre todas as letras de uma palavra ou de uma linha. A regra curta: abre o espaçamento nas maiúsculas e nas etiquetas pequenas, aperta-o ligeiramente nos títulos grandes e deixa o texto corrido com o valor por omissão da fonte. A maioria dos problemas de espaçamento em designs reais vem de fazer o contrário: maiúsculas deixadas apertadas, títulos grandes deixados soltos e parágrafos espaçados para encher uma caixa.

O espaçamento entre letras é uma das três definições de espaçamento que determinam como o texto se lê. As outras duas são [a entrelinha e o comprimento da linha](https://gradiently.design/pt-pt/guide/line-height-and-line-length), e as três são apresentadas em [bases de tipografia](https://gradiently.design/pt-pt/guide/typography-basics).

## Tracking e kerning: qual é a diferença

As duas palavras usam-se como sinónimos, mas fazem trabalhos diferentes. O **tracking** altera de forma uniforme o espaçamento de toda uma seleção. O **kerning** altera o espaço entre um par específico de letras, porque algumas formas deixam intervalos estranhos com o espaçamento por omissão: pensa em *AV*, *To*, *Ty* ou *LT*.

| Pergunta | Tracking | Kerning |
| --- | --- | --- |
| O que altera | O espaço entre todas as letras de uma seleção | O espaço entre um par de letras |
| Quem costuma defini-lo | Tu, por estilo: etiquetas, títulos, legendas | O designer de tipos, nas tabelas de kerning da fonte |
| Quando lhe mexes | Sempre que compões maiúsculas, etiquetas ou letra de destaque | Raramente: logótipos, títulos grandes, pares difíceis |
| Em CSS | `letter-spacing` | `font-kerning`, ativo por omissão na maioria dos navegadores |

O tracking é uma decisão de estilo que tomas muitas vezes. O kerning é um pormenor de ofício que verificas em tamanhos grandes.

As boas fontes trazem milhares de pares de kerning, por isso em tamanhos de texto raramente precisas de fazer kerning à mão. Em tamanhos de título e de logótipo, os pequenos intervalos tornam-se visíveis, e ajustar à mão um ou dois pares vale o minuto que demora.

## Porque é que as maiúsculas precisam de mais espaçamento

As minúsculas são desenhadas para ficar ao lado de outras minúsculas: ascendentes, descendentes e formas redondas criam um contorno variado que o olho lê como a forma de uma palavra. As maiúsculas são blocos de altura semelhante, por isso com o espaçamento por omissão amontoam-se numa barra compacta. Um pouco de tracking extra separa-as e torna cada letra mais fácil de reconhecer.

Quanto, depende do tamanho. Maiúsculas minúsculas, como uma etiqueta ou um antetítulo a 11 a 13 px, aguentam 0.08em a 0.12em. Maiúsculas em tamanho de subtítulo precisam de menos, cerca de 0.04em a 0.06em. Maiúsculas muito grandes num título podem não precisar de nada, ou até de um ligeiro aperto.

Uma publicação vertical de anúncio com um pequeno antetítulo em maiúsculas espaçadas por cima de um título grande

Um antetítulo em maiúsculas com tracking aberto por cima de um título com espaçamento normal.

Um cartaz vertical de evento com uma etiqueta em maiúsculas espaçadas e um título com maiúscula só no início

Maiúsculas pequenas com espaçamento extra leem-se como uma etiqueta, não como um grito.

## Quando apertar o espaçamento entre letras

As fontes são espaçadas para um determinado intervalo de tamanhos, normalmente os de texto. Ampliado para 60 ou 100 px, o mesmo espaçamento fica arejado e a palavra deixa de se ler como uma só forma. Apertar ligeiramente os títulos grandes, muitas vezes entre 0.01em e 0.03em, volta a uni-los. As fontes com um eixo de tamanho ótico ou um corte Display separado fazem-no muitas vezes por ti, e essa é uma das vantagens explicadas em [fontes variáveis](https://gradiently.design/pt-pt/guide/variable-fonts).

Aperta com cuidado. Letras que se tocam, ou letras redondas que começam a fundir-se, são sinal de que foste longe demais, sobretudo nos pesos carregados. Verifica os pares no limite do que a fonte faz bem, como *rn* (que se pode ler como *m*) e *cl* (que se pode ler como *d*).

### Evita

- Espaçamento por omissão em etiquetas minúsculas em maiúsculas
- Tracking solto num título de 96 px
- Espaçar texto corrido para encher uma linha ou uma caixa
- Tracking negativo em texto pequeno para caberem mais palavras

### Faz

- 0.05em a 0.12em em maiúsculas pequenas e etiquetas
- Um ligeiro aperto em letra muito grande
- Espaçamento por omissão nos parágrafos
- Texto mais curto ou uma fonte mais estreita quando falta espaço

## Espaçamento entre letras em CSS

Define `letter-spacing` em `em` e não em píxeis, para que o espaçamento acompanhe o tamanho da fonte. Um valor que serve a uma etiqueta de 12 px continua assim proporcionalmente certo se a etiqueta crescer para 14 px. Vê a referência da MDN sobre [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) para conheceres todo o comportamento.

```css
body {
  letter-spacing: normal; /* leave paragraphs alone */
  font-kerning: normal;
}

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.button {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.display {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Tracking also adds space after the last letter.
   Balance it when centring a short label. */
.eyebrow--centred {
  padding-inline-start: 0.1em;
}
```

Tracking positivo para maiúsculas pequenas, um pouco para botões, um ligeiro aperto para letra de destaque e nada para texto corrido.

> **O espaço no fim** Os navegadores também juntam espaçamento depois do último carácter. Numa etiqueta centrada e com muito tracking, isso empurra o texto ligeiramente para a esquerda. Um pouco de padding equivalente do lado inicial, como no código acima, volta a equilibrá-lo.

## Espaçamento entre letras em texto pequeno, etiquetas e números

O texto pequeno ganha com um pouco de espaço extra, porque em tamanhos pequenos as letras esbatem-se umas nas outras, sobretudo em letra clara sobre uma base escura. Muitas famílias de fontes já abrem o espaçamento nos tamanhos óticos pequenos. Se a tua não o fizer, 0.01em a 0.03em em legendas e letra miúda pode ajudar. Os números em tabelas ganham mais com algarismos tabulares (`font-variant-numeric: tabular-nums`) do que com tracking, porque ficam alinhados em colunas.

Há mais dois casos que pedem cuidado. As escritas ligadas, como a árabe, não devem ser espaçadas, porque o espaçamento quebra as ligações entre as letras. E o texto em minúsculas raramente deve ser aberto: minúsculas espaçadas desfazem as formas das palavras que as tornam fáceis de ler.

Uma publicação quadrada de estatística com um número grande e uma pequena etiqueta em maiúsculas espaçadas por cima

Números grandes ligeiramente apertados, com uma pequena etiqueta espaçada por cima, mantêm uma publicação de estatística compacta e clara.

## Um ponto de partida de espaçamento para cada função

Usa estes valores como predefinição e depois ajusta a olho para a tua fonte. Vê o resultado no tamanho real, num ecrã real, porque o espaçamento que parece certo com zoom numa tela de design fica muitas vezes diferente a 100 por cento.

| Função do texto | Tamanho típico | Espaçamento entre letras |
| --- | --- | --- |
| Antetítulo ou etiqueta, maiúsculas | 11 a 13 px | 0.08em a 0.12em |
| Texto de botão | 14 a 16 px | 0 a 0.02em |
| Texto corrido | 16 a 18 px | Valor da fonte |
| Subtítulo, maiúsculas | 18 a 24 px | 0.04em a 0.06em |
| Título | 32 a 56 px | 0 a -0.01em |
| Título de destaque | 64 px ou mais | -0.01em a -0.03em |

Valores de partida para texto latino. As fontes mais largas precisam de menos espaço extra; as condensadas aguentam mais.

Se o teu design assenta sobre um gradiente ou uma foto, o espaçamento também afeta a legibilidade: letras finas e muito apertadas desaparecem mais depressa num campo agitado do que letras abertas. Junta estas definições aos conselhos de [texto sobre um gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) e de [combinação de fontes](https://gradiently.design/pt-pt/guide/font-pairing) para designs que se leem num relance.

## FAQ

### Qual é a diferença entre espaçamento entre letras e kerning?

O espaçamento entre letras, ou tracking, altera de forma uniforme o espaço entre todas as letras de uma seleção. O kerning ajusta o espaço entre um par específico de letras, como A e V, e vem quase todo incluído na fonte.

### Quanto espaçamento entre letras devem ter as maiúsculas?

Cerca de 0.05em a 0.12em em maiúsculas pequenas, como etiquetas e antetítulos, e menos à medida que o tamanho cresce. Títulos em maiúsculas muito grandes podem não precisar de nenhum.

### O texto corrido deve ter espaçamento entre letras?

Normalmente não. As fontes são espaçadas para tamanhos de texto pelos seus designers, por isso o espaçamento por omissão é em regra o mais legível para parágrafos.

### Porquê usar em para o letter-spacing em CSS?

Um valor em em acompanha o tamanho da fonte, por isso o espaçamento mantém-se proporcional quando o texto aumenta ou diminui. Um valor em píxeis fica fixo e depressa se torna apertado ou solto demais.