Kerning: como corrigir os espaços entre as letras

O kerning é o ajuste do espaço entre duas letras específicas para que uma palavra pareça espaçada de modo uniforme. Alguns pares de formas deixam um buraco quando ficam lado a lado: a diagonal de um A junto à diagonal de um V, o braço de um T sobre um o minúsculo. O kerning aproxima esses pares, ou às vezes afasta um par apertado, até que os espaços pareçam iguais ao olho. É diferente do tracking, que muda o espaçamento de todas as letras de uma linha de uma vez.

Por que alguns pares de letras precisam de kerning

Cada letra de uma fonte fica dentro de uma caixa invisível com um pouco de espaço embutido de cada lado. Isso funciona para a maioria das combinações: n ao lado de o, h ao lado de e. Falha onde as formas são abertas de um lado. Diagonais, braços projetados e letras redondas ao lado de retas criam bolsões de branco que parecem uma letra faltando.

O caso de r e n é a origem de uma velha piada de tipógrafos: componha a palavra kerning apertada demais e ela se lê como keming. É um bom lembrete de que o kerning funciona nos dois sentidos.

Quando fazer kerning à mão

Boas fontes vêm com uma tabela de kerning, uma lista de pares e de quanto ajustar cada um, então o texto corrido e a maior parte do texto de interface já estão resolvidos. O kerning manual vale o tempo quando o texto fica grande ou permanente.

• Títulos acima de cerca de 60 px na tela, onde um espaço de 2 px vira um buraco visível.
• Logos e logotipos, que serão vistos milhares de vezes em todos os tamanhos. Design de logotipo vai além.
• Tudo 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 carregam o design inteiro.
• Fontes gratuitas ou de exibição com tabelas de kerning ralas, que podem deixar pares comuns sem ajuste.

Como fazer kerning de um título ou logotipo a olho

O objetivo é uma área uniforme entre as letras, não uma distância medida igual. Duas hastes retas, como H e I, precisam de mais espaço entre elas. Uma reta ao lado de uma redonda, como H e O, precisa de um pouco menos. Duas redondas, como O e C, precisam do menos. Diagonais e projeções precisam da maior correção de todas.

1. 1

   Defina o tracking primeiro

   Decida o espaçamento geral da linha antes de mexer nos pares. Fazer o kerning de uma linha e depois mudar o tracking desfaz metade do seu trabalho.

2. 2

   Trabalhe de três em três

   Olhe três letras por vez e ajuste a do meio para que os dois espaços ao lado dela fiquem iguais. Depois avance uma letra.

3. 3

   Vire de cabeça para baixo

   Gire a palavra ou veja-a espelhada. Quando você não consegue mais lê-la, vê formas e espaços em vez de letras.

4. 4

   Desfoque ou aperte os olhos

   Um leve desfoque transforma os espaços em manchas cinza. Qualquer mancha visivelmente mais clara ou mais escura que as vizinhas é um par para corrigir.

5. 5

   Confira pequeno e grande

   Veja a palavra no tamanho em que será usada e no menor tamanho em que aparecerá. Um logotipo com kerning feito só no tamanho de cartaz pode empastar no tamanho de favicon.

6. 6

   Deixe de lado e olhe de novo

   Volte depois de uma pausa. O kerning a olho se desvia se você encara por tempo demais, e olhos descansados enxergam o par que você apertou demais.

A maioria das ferramentas de design deixa você fazer o kerning colocando o cursor entre duas letras e ajustando com um atalho de teclado. Nos apps da Adobe a unidade é um milésimo de em, então um valor de menos 40 aproxima o par em 4% do tamanho do texto, qualquer que seja esse tamanho.

Kerning métrico vs óptico

Muitas ferramentas de layout oferecem dois modos automáticos. O kerning métrico usa os pares que o designer da fonte embutiu nela. O kerning óptico ignora esses pares e calcula o espaçamento a partir dos contornos de cada letra. O métrico é o melhor padrão para uma fonte bem feita, porque uma pessoa tomou essas decisões. O óptico pode salvar uma fonte com tabela de kerning fraca ou ausente e ajuda quando você mistura duas fontes em uma palavra.

Kerning em CSS

Os navegadores aplicam o kerning de uma fonte automaticamente na maior parte do texto, mas você pode torná-lo explícito. A propriedade font-kerning liga ou desliga os pares embutidos. O CSS não tem propriedade para ajustar um par específico, então, para um único título ou logo, o caminho usual é envolver uma letra em um span e empurrá-la com uma margem negativa ou 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 você quer mudar o espaçamento de uma linha inteira e não de um par, isso é tracking, definido com letter-spacing. Tracking vs kerning explica como os dois funcionam junto com a entrelinha, e espaçamento entre letras dá valores iniciais para maiúsculas, rótulos e títulos.

Para saber mais sobre como fazer um texto grande parecer intencional, veja fontes de exibição e noções básicas de tipografia. Sobre um fundo em degradê ou texturizado, o espaçamento é só metade da legibilidade: uma palavra bem ajustada ainda pode se desfazer onde a cor atrás dela muda. Um Mark do Gradiently move a sua área mais calma para trás das suas palavras e escolhe tinta clara ou escura por linha, então um título espaçado com cuidado se lê de modo uniforme da primeira à última letra.