# Kerning: como corrigir os espaços entre as letras

[Canonical HTML page](https://gradiently.design/pt-br/guide/kerning)

A maior parte do texto nunca precisa de um toque manual, porque boas fontes trazem o próprio kerning. Títulos grandes e logotipos são diferentes: nesse tamanho, cada espaço torto aparece. Veja como achá-los e corrigi-los.

## The short version

- Kerning é o ajuste do espaço entre um par específico de letras, como A e V ou T e o.
- Fontes bem feitas incluem centenas ou até milhares de pares de kerning, então o texto corrido comum raramente precisa de kerning manual.
- O kerning manual importa mais em títulos grandes, logos e logotipos, onde espaços irregulares ficam visíveis.
- O objetivo do kerning é um espaço visual uniforme entre as letras, não uma distância medida igual.
- Em CSS, `font-kerning: normal` ativa o kerning embutido da fonte, e os navegadores costumam aplicá-lo por padrão.

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.

| Par | Por que abre espaço | Correção usual |
| --- | --- | --- |
| AV, VA, AW, WA | Duas diagonais se inclinam para longe uma da outra | Aproximar bastante |
| To, Ta, Te, Ty | O braço do T paira sobre um espaço vazio | Encaixar a minúscula sob o braço |
| LT, LY, LV | O pé do L deixa um buraco acima dele | Aproximar, muitas vezes bastante |
| Yo, Ya, Wo, Vo | Maiúscula diagonal sobre uma minúscula redonda | Encaixar como nos pares com T |
| P., F., T., Y. | A pontuação fica sob uma projeção | Aproximar o ponto ou a vírgula |
| r e n, r e m | Podem se fundir em uma letra quando apertadas | Abrir um pouco se encostarem |
| f seguido de ), ? ou ’ | O gancho do f colide | Afastar um pouco |

Os pares que causam a maior parte dos problemas de kerning. As fontes já ajustam muitos deles; confira a olho no tamanho de título de qualquer jeito.

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](https://gradiently.design/pt-br/guide/wordmark-design) 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.

Cartaz vertical com a palavra WAVE em maiúsculas grandes e espaçamento uniforme entre as letras

Uma palavra feita quase só de diagonais, o caso mais difícil de espaçamento. Confira se W, A e V se encaixam de modo uniforme antes de exportar.

Post vertical de evento com o título Hoje à noite no The Yard em letras grandes sobre um degradê

To, Th e Ya aparecem em um único título curto. Nesse tamanho, cada par merece uma olhada antes de exportar.

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

### Evite

- Fazer kerning de texto corrido letra por letra
- Medir espaços com uma régua
- Fazer o kerning antes de definir o tracking
- Apertar até as letras se tocarem
- Confiar no espaçamento de uma fonte gratuita sem conferir

### Faça

- Deixar o texto corrido com o kerning próprio da fonte
- Julgar a olho, três letras por vez
- Definir o tracking e depois corrigir pares individuais
- Manter um fio de espaço, sobretudo em r e n
- Conferir AV, To, LT e Yo em todo título

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/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.

```css
/* 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;
}
```

Use unidades em para os ajustes manuais, para que a correção acompanhe o tamanho do texto. Faça kerning à mão só em títulos; nunca em texto corrido.

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](https://gradiently.design/pt-br/guide/tracking-vs-kerning) explica como os dois funcionam junto com a entrelinha, e [espaçamento entre letras](https://gradiently.design/pt-br/guide/letter-spacing) 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](https://gradiently.design/pt-br/guide/display-fonts) e [noções básicas de tipografia](https://gradiently.design/pt-br/guide/typography-basics). 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.

## FAQ

### O que é kerning em tipografia?

Kerning é o ajuste do espaço entre duas letras específicas, como A e V, para que uma palavra pareça espaçada de modo uniforme.

### Qual a diferença entre kerning e tracking?

O kerning muda o espaço entre um par de letras. O tracking muda o espaço entre todas as letras de uma linha ou bloco de uma vez.

### Preciso fazer kerning do texto corrido?

Raramente. Boas fontes incluem os próprios pares de kerning, que tratam bem o texto corrido. Reserve o kerning manual para títulos, logos e texto grande de exibição.

### Devo usar kerning métrico ou óptico?

Use o métrico em uma fonte bem feita, já que os pares foram definidos pelo designer da fonte. Experimente o óptico quando o kerning embutido for fraco ou você estiver misturando fontes.

### Como faço kerning de texto em CSS?

`font-kerning: normal` ativa os pares embutidos da fonte. Para ajustar um par, envolva uma letra em um span e empurre-a com uma pequena margem negativa em unidades em.