# Espaçamento entre letras: quando abrir e quando apertar o texto

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

Alguns centésimos de em decidem se um rótulo parece pensado ou apertado. Veja onde acrescentar espaço entre as letras, onde tirar e onde deixar como está.

## The short version

- O espaçamento entre letras, também chamado de tracking, é a quantidade uniforme de espaço acrescentada ou retirada entre todas as letras de um trecho de texto.
- O kerning é diferente: ele ajusta o espaço entre pares específicos de letras, como A e V, e normalmente já vem embutido na fonte.
- Caixa-alta e rótulos pequenos quase sempre precisam de espaçamento extra, em geral entre 0,05em e 0,12em.
- Títulos grandes costumam ficar melhores um pouco mais apertados, muitas vezes de 0,01em a 0,03em, porque o espaçamento padrão da fonte é desenhado para tamanhos menores.
- O texto corrido normalmente deve ficar com o espaçamento entre letras padrão da fonte.

O **espaçamento entre letras** (tracking) é o espaço uniforme acrescentado ou retirado entre todas as letras de uma palavra ou linha. A regra curta: abra o espaçamento em caixa-alta e em rótulos pequenos, aperte um pouco nos títulos grandes e deixe o texto corrido no padrão da fonte. A maioria dos problemas de espaçamento em designs reais vem de fazer o contrário: maiúsculas apertadas, títulos grandes soltos e parágrafos espaçados para preencher uma caixa.

O espaçamento entre letras é um dos três ajustes de espaço que definem como um texto se lê. Os outros dois são a [altura da linha e o comprimento da linha](https://gradiently.design/pt-br/guide/line-height-and-line-length), e os três são apresentados no [básico da tipografia](https://gradiently.design/pt-br/guide/typography-basics).

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

As duas palavras são usadas como sinônimos, mas fazem trabalhos diferentes. O **tracking** muda o espaçamento de uma seleção inteira de forma uniforme. O **kerning** muda o espaço entre um par específico de letras, porque algumas formas deixam vãos estranhos no espaçamento padrão: pense em *AV*, *To*, *Ty* ou *LT*.

| Pergunta | Tracking | Kerning |
| --- | --- | --- |
| O que muda | O espaço entre todas as letras de uma seleção | O espaço entre um par de letras |
| Quem costuma definir | Você, por estilo: rótulos, títulos, legendas | O designer da fonte, nas tabelas de kerning dela |
| Quando você mexe | Sempre que compõe caixa-alta, rótulos ou texto display | Raramente: logos, títulos grandes, pares estranhos |
| No CSS | `letter-spacing` | `font-kerning`, ativado por padrão na maioria dos navegadores |

O tracking é uma decisão de estilo que você toma com frequência. O kerning é um detalhe de acabamento que você confere em tamanhos grandes.

Boas fontes vêm com milhares de pares de kerning, então em tamanhos de texto você raramente precisa ajustar à mão. Em tamanhos de título e de logo, pequenos vãos ficam visíveis, e ajustar à mão um ou dois pares vale o minuto que leva.

## Por que a caixa-alta precisa 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 quadradas e têm alturas parecidas, então no espaçamento padrão elas se amontoam numa barra sólida. Um pouco de tracking extra as separa e torna cada letra mais fácil de reconhecer.

Quanto depende do tamanho. Maiúsculas minúsculas, como um rótulo ou sobretítulo de 11 a 13 px, aceitam de 0,08em a 0,12em. Maiúsculas em tamanho de subtítulo precisam de menos, em torno de 0,04em a 0,06em. Maiúsculas muito grandes num título podem não precisar de nada, ou até de um leve aperto.

Um post de anúncio em retrato com um pequeno sobretítulo em maiúsculas espaçadas acima de um título grande

Um sobretítulo espaçado em maiúsculas acima de um título com espaçamento normal.

Um cartaz de evento em retrato com um rótulo em maiúsculas espaçadas e um título em caixa normal

Maiúsculas pequenas com espaçamento extra se leem como rótulo, não como grito.

## Quando apertar o espaçamento entre letras

As fontes são espaçadas para uma faixa específica de tamanhos, geralmente tamanhos de texto. Ampliado para 60 ou 100 px, o mesmo espaçamento parece arejado demais e a palavra deixa de se ler como uma forma única. Apertar um pouco os títulos grandes, muitas vezes de 0,01em a 0,03em, junta tudo de novo. Fontes com eixo de tamanho óptico ou com uma versão Display separada costumam fazer isso por você, uma das vantagens explicadas em [fontes variáveis](https://gradiently.design/pt-br/guide/variable-fonts).

Aperte com cuidado. Letras que se tocam, ou letras redondas que começam a se fundir, são sinal de que você foi longe demais, principalmente em pesos bold. Confira os pares no limite do que a fonte faz bem, como *rn* (que pode parecer *m*) e *cl* (que pode parecer *d*).

### Evite

- Espaçamento padrão em rótulos pequenos em maiúsculas
- Tracking solto num título de 96 px
- Espaçar o texto corrido para preencher uma linha ou caixa
- Tracking negativo em texto pequeno para caber mais palavras

### Faça

- De 0,05em a 0,12em em maiúsculas pequenas e rótulos
- Um leve aperto em textos muito grandes
- Espaçamento padrão nos parágrafos
- Texto mais curto ou uma fonte mais estreita quando falta espaço

## Espaçamento entre letras no CSS

Defina o `letter-spacing` em `em`, não em pixels, para que o espaçamento acompanhe o tamanho da fonte. Assim, um valor que serve para um rótulo de 12 px continua proporcionalmente certo se o rótulo crescer para 14 px. Veja a referência do MDN sobre [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) para o comportamento completo.

```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 leve aperto para texto display e nada para o texto corrido. O comentário final lembra que o tracking também acrescenta espaço depois da última letra.

> **O espaço no final** Os navegadores acrescentam o espaçamento entre letras depois do último caractere também. Num rótulo centralizado e muito espaçado, isso empurra o texto um pouco para a esquerda. Um pouco de padding equivalente no início, como no código acima, reequilibra.

## Espaçamento para texto pequeno, rótulos e números

O texto pequeno ganha com um pouco de espaço extra, porque em tamanhos pequenos as letras se embaralham, principalmente texto claro sobre fundo escuro. Muitas famílias de fontes já abrem o espaçamento nos tamanhos ópticos pequenos. Se a sua não faz isso, de 0,01em a 0,03em em legendas e letras miúdas 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.

Mais dois casos pedem cuidado. Escritas cursivas conectadas, como o á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 espaçado: minúsculas espaçadas quebram as formas das palavras que as tornam fáceis de ler.

Um post quadrado de estatística com um número grande e um pequeno rótulo em maiúsculas espaçadas acima dele

Números grandes um pouco apertados, com um pequeno rótulo espaçado acima, deixam um post de estatística compacto e claro.

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

Use estes valores como padrão e depois ajuste a olho para a sua fonte. Veja o resultado no tamanho real, numa tela real, porque um espaçamento que parece certo com zoom numa tela de design muitas vezes parece diferente a 100 por cento.

| Função do texto | Tamanho típico | Espaçamento entre letras |
| --- | --- | --- |
| Sobretítulo ou rótulo, 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 | Padrão 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 display | 64 px ou mais | -0,01em a -0,03em |

Valores iniciais para texto em alfabeto latino. Fontes mais largas precisam de menos espaço extra; fontes condensadas aceitam mais.

Se o seu design fica sobre um gradiente ou uma foto, o espaçamento também afeta a legibilidade: letras finas e muito apertadas somem mais rápido sobre um fundo carregado do que letras abertas. Combine esses ajustes com as dicas de [texto sobre um gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) e de [combinação de fontes](https://gradiently.design/pt-br/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, muda 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 em geral já vem embutido na fonte.

### Quanto espaçamento a caixa-alta deve ter?

Cerca de 0,05em a 0,12em para maiúsculas pequenas, como rótulos e sobretítulos, e menos à medida que o tamanho cresce. Títulos muito grandes em maiúsculas 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, então o espaçamento padrão costuma ser o mais legível para parágrafos.

### Por que usar em no letter-spacing do CSS?

Um valor em em acompanha o tamanho da fonte, então o espaçamento continua proporcional quando o texto aumenta ou diminui. Um valor em pixels fica fixo e logo fica apertado ou solto demais.