# Kerning: como corrigir os espaços entre letras

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

A maior parte do texto nunca precisa de um toque manual, porque as boas fontes trazem o seu próprio kerning. Os títulos grandes e os logótipos são diferentes: nesse tamanho, cada espaço desajeitado vê-se. Aqui fica como os encontrar e corrigir.

## The short version

- O kerning é o ajuste do espaço entre um par específico de letras, como A e V ou T e o.
- As fontes bem feitas incluem centenas ou até milhares de pares de kerning, por isso o texto corrente raramente precisa de kerning manual.
- O kerning manual importa sobretudo em títulos grandes, logótipos e logótipos tipográficos, onde os espaços irregulares se tornam visíveis.
- O objetivo do kerning é um espaço visual uniforme entre letras, não uma distância medida igual.
- Em CSS, `font-kerning: normal` ativa o kerning incorporado da fonte, e os navegadores costumam aplicá-lo por omissão.

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.

| Par | Porque abre espaço | Correção habitual |
| --- | --- | --- |
| AV, VA, AW, WA | Duas diagonais inclinam-se em sentidos opostos | Aproximar de forma notória |
| To, Ta, Te, Ty | O braço do T paira sobre espaço vazio | Encaixar a minúscula debaixo do braço |
| LT, LY, LV | O pé do L deixa um buraco por cima | Aproximar, muitas vezes bastante |
| Yo, Ya, Wo, Vo | Maiúscula diagonal sobre minúscula redonda | Encaixar como nos pares com T |
| P., F., T., Y. | A pontuação fica debaixo de uma aba | Aproximar o ponto final ou a vírgula |
| r e n, r e m | Podem fundir-se numa só letra se apertados | Abrir ligeiramente se se tocarem |
| f seguido de ), ? ou ’ | O gancho do f colide | Afastar um pouco |

Os pares que causam a maioria dos problemas de kerning. As fontes já ajustam muitos destes; verifica-os a olho no tamanho de título de qualquer maneira.

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

Um cartaz vertical com a palavra WAVE em maiúsculas grandes, com espaçamento uniforme entre letras

Uma palavra feita quase só de diagonais, o caso mais difícil de espaçar. Verifica se o W, o A e o V encaixam por igual antes de exportares.

Uma publicação vertical de evento com o título Hoje no The Yard em letra grande sobre um gradiente

Neste título curto aparecem pares delicados, como Ho e Yo. Neste tamanho, cada par merece uma olhadela antes de exportar.

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

### Evita

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

### Faz

- Deixar o texto corrente ao kerning da própria fonte
- Avaliar a olho, três letras de cada vez
- Definir o tracking e depois corrigir pares individuais
- Manter um fio de espaço, sobretudo em r e n
- Verificar AV, To, LT e Yo em cada título

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

```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;
}
```

Usa unidades em nos ajustes manuais para a correção acompanhar o tamanho da letra. Faz kerning manual só em títulos, nunca em texto corrente.

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](https://gradiently.design/pt-pt/guide/tracking-vs-kerning) explica como os dois funcionam em conjunto com a entrelinha, e o [espaçamento entre letras](https://gradiently.design/pt-pt/guide/letter-spacing) 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](https://gradiently.design/pt-pt/guide/display-fonts) e os [fundamentos de tipografia](https://gradiently.design/pt-pt/guide/typography-basics). 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.

## FAQ

### O que é o kerning em tipografia?

O kerning é o ajuste do espaço entre duas letras específicas, como A e V, para uma palavra parecer uniformemente espaçada.

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

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

### Preciso de fazer kerning ao texto corrente?

Raramente. As boas fontes incluem os seus próprios pares de kerning, que tratam bem o texto corrente. Guarda o kerning manual para títulos, logótipos e letra grande de exibição.

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

Usa o métrico numa fonte bem feita, já que os pares foram definidos pelo designer de tipos. Experimenta o ótico quando o kerning incorporado de uma fonte for fraco ou quando misturares fontes.

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

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