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

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.

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 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 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 explica porquê.

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

   Define a entrelinha

   Decide quão apertadas ficam as linhas. Os títulos vão mais apertados, os parágrafos mais soltos.

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

Tracking, kerning e entrelinha em 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;
}

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