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

Em tracking e kerning, a diferença é o alcance. O tracking ajusta o espaço entre todas as letras de uma seleção, então um título inteiro se abre ou se fecha de modo uniforme. O kerning ajusta o espaço entre um par específico, como o A e o V de WAVE, para corrigir um vão que a fonte deixou. A entrelinha, o terceiro do trio, não tem nada a ver com letras lado a lado: é o espaço vertical de uma linha de texto até a seguinte.

O que é tracking em tipografia

O tracking é uma mudança uniforme. Selecione uma linha, acrescente tracking e todo vão cresce na mesma medida. É a ferramenta para mudar a textura do texto: arejado e formal, ou denso e marcante. Em apps de design é medido em milésimos de em (Adobe) ou como porcentagem do tamanho da fonte (Figma), e em CSS como letter-spacing, de preferência escrito em em para acompanhar o tamanho do tipo.

Três situações pedem tracking. Títulos grandes costumam parecer soltos no espaçamento padrão, então um pouco de tracking negativo os aproxima. Caixa alta parece apertada, porque as maiúsculas foram desenhadas para ficar ao lado de minúsculas, então precisam de tracking positivo. E textos muito pequenos, como rótulos e linhas legais, se leem melhor com um toque a mais de ar. Espaçamento entre letras trata de cada caso em detalhe.

O que é kerning

O kerning é um reparo 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 os ajustam automaticamente, então no texto corrido você pode deixar o kerning em paz. Em títulos, logos e logotipos, talvez ainda precise ajustar um ou dois pares à mão. Kerning traz a lista completa de pares problemáticos e um método para corrigi-los a olho.

O que é entrelinha em tipografia

O termo inglês leading vem das tiras de chumbo que os impressores punham entre linhas de tipo de metal. Hoje é a altura de linha: a distância de uma linha de base à seguinte. Pouca, e as hastes ascendentes batem nas descendentes; muita, e as linhas se afastam em pensamentos separados. Como regra, quanto mais longa a linha e menor o texto, mais entrelinha ele pede. Altura e comprimento de linha explica por quê.

O que mudar primeiro: tracking, kerning ou entrelinha

Trabalhe da maior decisão para a menor. Entrelinha e tracking definem o estilo; o kerning arruma o que sobrar. Mude fora dessa ordem e você desfaz o próprio trabalho.

1. 1

   Escolha tamanho e peso

   O espaçamento depende dos dois. Defina-os primeiro, porque um peso mais pesado ou um tamanho maior pede valores diferentes.

2. 2

   Defina a entrelinha

   Decida quão justas as linhas se empilham. Títulos ficam mais justos, parágrafos mais soltos.

3. 3

   Defina o tracking do estilo

   Aplique um único valor de tracking ao estilo inteiro de título, rótulo ou texto corrido. Mantenha consistente em todo o design.

4. 4

   Ajuste com kerning os pares que ainda têm vão

   Só em tipo grande ou permanente. Procure AV, To, LT e pares parecidos e ajuste um a um.

5. 5

   Confira no tamanho real

   Veja o resultado no tamanho em que as pessoas vão ver. Um espaçamento que parece certo com zoom pode parecer solto no celular.

Valores de partida para tracking e entrelinha

São padrões sensatos, não leis. As fontes diferem, e uma fonte de exibição condensada não se comporta como uma geométrica larga. Use para começar e depois confie no seu 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;
}

Mantenha esses valores num só lugar para que toda página use o mesmo espaçamento para a mesma função. Esse é o coração de um sistema tipográfico. Se você cria posts sociais e não páginas web, vale a mesma ideia: decida o espaçamento uma vez, escreva nas regras da marca e reutilize. No Gradiently, o kit de marca guarda suas fontes de título e de texto e o Designer o aplica quando diagrama novos tamanhos, então o tipo continua consistente de um post quadrado a um story.