Kerning: como corrigir os espaços entre letras

O kerning é o ajuste do espaço entre duas letras específicas para que uma palavra pareça uniformemente espaçada. Alguns pares de formas deixam um buraco quando ficam lado a lado: a diagonal de um A junto à diagonal de um V, a aba de um T por cima de um o pequeno. O kerning aproxima esses pares ou, ocasionalmente, afasta um par apertado, até os espaços parecerem iguais ao olho. É diferente do tracking, que altera o espaçamento de todas as letras de uma linha de uma só vez.

Porque é que alguns pares de letras precisam de kerning

Cada letra de uma fonte fica numa caixa invisível com um pouco de espaço incorporado de cada lado. Isso serve para a maioria das combinações: n ao lado de o, h ao lado de e. Falha onde as formas estão abertas de um lado. Diagonais, braços salientes e letras redondas junto a retas criam bolsas de branco que parecem uma letra em falta.

O caso do r e do n está na origem de uma velha piada de tipógrafos: se compuseres a palavra kerning demasiado apertada, lê-se keming. É um bom lembrete de que o kerning funciona nos dois sentidos.

Quando fazer kerning à mão

As boas fontes trazem uma tabela de kerning, uma lista de pares e do quanto ajustar cada um, por isso o texto corrente e a maior parte do texto de interfaces já estão tratados. O kerning manual compensa o tempo quando o texto fica grande ou permanente.

• Títulos acima de cerca de 60 px no ecrã, onde um espaço de 2 px se torna um buraco visível.
• Logótipos e logótipos tipográficos, que serão vistos milhares de vezes em todos os tamanhos. O design de logótipos tipográficos vai mais longe.
• Texto todo em maiúsculas, onde diagonais como A, V, W e Y se alinham com mais frequência.
• Linhas de cartaz e de miniatura, onde três ou quatro palavras levam o design todo.
• Fontes gratuitas ou de exibição com tabelas de kerning pobres, que podem deixar pares comuns por ajustar.

Como fazer kerning a olho num título ou logótipo

O objetivo é uma área uniforme entre letras, não uma distância medida igual. Duas hastes retas, como H e I, precisam de mais espaço entre si. Uma reta junto a uma redonda, como H e O, precisa de um pouco menos. Duas redondas, como O e C, precisam de menos ainda. As diagonais e as abas precisam da maior correção de todas.

1. 1

   Define primeiro o tracking

   Decide o espaçamento geral da linha antes de mexeres nos pares. Fazer kerning de uma linha e depois mudar-lhe o tracking desfaz metade do teu trabalho.

2. 2

   Trabalha de três em três

   Olha para três letras de cada vez e ajusta a do meio para os dois espaços de cada lado coincidirem. Depois avança uma letra.

3. 3

   Vira-a ao contrário

   Vira a palavra ao contrário ou vê-a espelhada. Quando já não a consegues ler, vês formas e espaços em vez de letras.

4. 4

   Desfoca ou semicerra os olhos

   Um ligeiro desfoque transforma os espaços em manchas cinzentas. Qualquer mancha claramente mais clara ou mais escura do que as vizinhas é um par a corrigir.

5. 5

   Verifica pequeno e grande

   Vê a palavra no tamanho em que vai ser usada e no menor tamanho em que vai aparecer. Um logótipo tipográfico com kerning feito só no tamanho de cartaz pode empastar no tamanho de um favicon.

6. 6

   Deixa descansar e volta a olhar

   Volta depois de uma pausa. O kerning a olho vai-se desviando se olhares demasiado tempo, e olhos frescos apanham o par que apertaste demais.

A maioria das ferramentas de design deixa fazer kerning colocando o cursor entre duas letras e ajustando com um atalho de teclado. Nas aplicações da Adobe a unidade é um milésimo de em, por isso um valor de menos 40 aproxima o par em 4% do tamanho da letra, seja qual for esse tamanho.

Kerning métrico vs ótico

Muitas ferramentas de paginação oferecem dois modos automáticos. O kerning métrico usa os pares que o designer de tipos incorporou na fonte. O kerning ótico ignora-os e calcula o espaçamento a partir dos contornos de cada letra. O métrico é a melhor opção por omissão numa fonte bem feita, porque foi uma pessoa a tomar essas decisões. O ótico pode salvar uma fonte com tabela de kerning pobre ou em falta, e ajuda quando misturas duas fontes numa palavra.

Kerning em CSS

Os navegadores aplicam automaticamente o kerning de uma fonte na maior parte do texto, mas podes torná-lo explícito. A propriedade font-kerning liga ou desliga os pares incorporados. O CSS não tem uma propriedade para ajustar um par específico, por isso, num título ou logótipo isolado, o caminho habitual é envolver uma letra num span e deslocá-la com uma margem negativa ou com espaçamento entre letras.

/* Use the font's own kerning pairs everywhere */
body {
  font-kerning: normal;
}

/* Hand kerning one pair in a large headline: <h1>A<span class="k-av">V</span>A</h1> */
.k-av {
  margin-inline-start: -0.06em;
}

/* Monospaced code should never be kerned */
code, pre {
  font-kerning: none;
}

Se quiseres alterar o espaçamento de uma linha inteira e não de um só par, isso é tracking, definido com letter-spacing. Tracking vs kerning explica como os dois funcionam em conjunto com a entrelinha, e o espaçamento entre letras dá valores iniciais para maiúsculas, etiquetas e títulos.

Para saber mais sobre como fazer letra grande parecer intencional, vê as fontes de exibição e os fundamentos de tipografia. Num fundo em gradiente ou com textura, o espaçamento é só metade da legibilidade: uma palavra bem ajustada pode ainda quebrar-se onde a cor por trás muda. Um Mark do Gradiently leva a sua zona mais calma para trás das tuas palavras e escolhe tinta clara ou escura linha a linha, para um título cuidadosamente espaçado se ler de modo uniforme da primeira à última letra.