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

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, e as três são apresentadas em bases de tipografia.

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.

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.

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.

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

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

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

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.

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