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

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, e os três são apresentados no básico da tipografia.

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.

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.

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.

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

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 para o comportamento completo.

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;
}

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

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 e de combinação de fontes para designs que se leem num relance.