# Kerning: come correggere gli spazi tra le lettere

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

Quasi tutto il testo non ha bisogno di interventi manuali, perché i buoni font portano con sé il proprio kerning. Titoli grandi e wordmark sono un'altra storia: a quella dimensione ogni vuoto fuori posto si vede. Ecco come trovarli e correggerli.

## The short version

- Il kerning è la regolazione dello spazio tra una coppia precisa di lettere, come A e V oppure T e o.
- I font ben fatti contengono centinaia o addirittura migliaia di coppie di kerning, quindi il normale testo corrente raramente richiede un kerning manuale.
- Il kerning manuale conta soprattutto nei titoli grandi, nei loghi e nei wordmark, dove gli spazi irregolari diventano visibili.
- Lo scopo del kerning è uno spazio visivo uniforme tra le lettere, non una distanza misurata uguale.
- In CSS, `font-kerning: normal` attiva il kerning integrato del font, e di solito i browser lo applicano già per impostazione predefinita.

Il **kerning** è la regolazione dello spazio tra due lettere precise, in modo che una parola appaia spaziata in modo uniforme. Alcune coppie di forme lasciano un buco quando stanno una accanto all'altra: la diagonale di una A vicino alla diagonale di una V, la sporgenza di una T sopra una o piccola. Il kerning avvicina quelle coppie, o più raramente allontana una coppia troppo stretta, finché gli spazi sembrano uguali all'occhio. È diverso dal tracking, che cambia la spaziatura di tutte le lettere di una riga insieme.

## Perché alcune coppie di lettere hanno bisogno di kerning

Ogni lettera di un font sta dentro una scatola invisibile con un po' di spazio incorporato su ciascun lato. Funziona per la maggior parte delle combinazioni: n accanto a o, h accanto a e. Smette di funzionare dove le forme sono aperte su un lato. Diagonali, bracci sporgenti e lettere tonde accanto a lettere dritte creano tasche di bianco che sembrano una lettera mancante.

| Coppia | Perché si crea il vuoto | Correzione abituale |
| --- | --- | --- |
| AV, VA, AW, WA | Due diagonali si allontanano l'una dall'altra | Avvicinare in modo evidente |
| To, Ta, Te, Ty | Il braccio della T sporge sul vuoto | Infilare la minuscola sotto il braccio |
| LT, LY, LV | Il piede della L lascia un buco sopra di sé | Avvicinare, spesso di parecchio |
| Yo, Ya, Wo, Vo | Maiuscola diagonale sopra una minuscola tonda | Infilare come nelle coppie con la T |
| P., F., T., Y. | La punteggiatura sta sotto una sporgenza | Avvicinare il punto o la virgola |
| r e n, r e m | Se troppo strette si fondono in una sola lettera | Aprire un poco se si toccano |
| f seguita da ), ? o ' | Il gancio della f va a sbattere | Allontanare appena |

Le coppie che causano la maggior parte dei problemi di kerning. I font ne correggono già molte; controllale comunque a occhio alla dimensione del titolo.

Il caso r e n è all'origine di una vecchia battuta tra tipografi: se imposti la parola kerning con una spaziatura troppo stretta, si legge keming. Ricorda bene che il kerning lavora in entrambe le direzioni.

## Quando fare il kerning a mano

I buoni font includono una tabella di kerning, un elenco di coppie con quanto regolare ciascuna, quindi il testo corrente e la maggior parte dei testi d'interfaccia sono già a posto. Il kerning manuale vale il tempo che richiede quando il testo diventa grande o definitivo.

- **Titoli sopra i 60 px circa a schermo**, dove un vuoto di 2 px diventa un buco visibile.
- **Loghi e wordmark**, che saranno visti migliaia di volte a ogni dimensione. Il [design del wordmark](https://gradiently.design/it/guide/wordmark-design) approfondisce.
- **Tutto maiuscolo**, dove diagonali come A, V, W e Y si incontrano più spesso.
- **Righe di poster e miniature**, dove tre o quattro parole reggono tutto il progetto.
- **Font gratuiti o display con tabelle di kerning scarne**, che possono lasciare senza correzione coppie comuni.

Un poster verticale con la sola parola WAVE in maiuscolo grande e con spaziatura uniforme tra le lettere

Una parola costruita quasi solo di diagonali, il caso più difficile per la spaziatura. Controlla che W, A e V si incastrino in modo uniforme prima di esportare.

Un post verticale per un evento con il titolo Stasera allo Yard in grande su un gradiente

To, Th e Ya compaiono tutte in un solo titolo breve. A questa dimensione ogni coppia merita un'occhiata prima di esportare.

## Come crenare a occhio un titolo o un wordmark

L'obiettivo è un'*area* uniforme tra le lettere, non una distanza misurata uguale. Due aste dritte, come H e I, richiedono più spazio. Una dritta accanto a una tonda, come H e O, ne richiede un po' meno. Due tonde, come O e C, ne richiedono ancora meno. Diagonali e sporgenze sono quelle che chiedono più correzione.

1. **Imposta prima il tracking** Decidi la spaziatura generale della riga prima di toccare le coppie. Crenare una riga e poi cambiarne il tracking annulla metà del tuo lavoro.
2. **Lavora a tre a tre** Guarda tre lettere alla volta e regola quella di mezzo in modo che i due spazi ai suoi lati siano uguali. Poi scorri di una lettera.
3. **Capovolgila** Ruota la parola o guardala allo specchio. Quando non riesci più a leggerla, vedi forme e spazi invece di lettere.
4. **Sfoca o strizza gli occhi** Una leggera sfocatura trasforma gli spazi in macchie grigie. Ogni macchia nettamente più chiara o più scura delle vicine è una coppia da correggere.
5. **Controlla in piccolo e in grande** Guarda la parola alla dimensione in cui sarà usata e a quella più piccola in cui comparirà. Un wordmark crenato solo a dimensione poster può impastarsi a dimensione favicon.
6. **Lascialo e riguardalo** Torna dopo una pausa. Il kerning a occhio si sfalsa se fissi troppo a lungo, e occhi freschi notano la coppia che hai stretto troppo.

La maggior parte degli strumenti di design permette di crenare mettendo il cursore tra due lettere e spostando con una scorciatoia da tastiera. Nelle app Adobe l'unità è un millesimo di em, quindi un valore di meno 40 avvicina la coppia del 4% della dimensione del testo, qualunque essa sia.

## Kerning metrico e ottico

Molti strumenti di impaginazione offrono due modalità automatiche. Il kerning **metrico** usa le coppie che il type designer ha inserito nel font. Il kerning **ottico** le ignora e calcola la spaziatura dai contorni di ciascuna lettera. Il metrico è l'impostazione migliore per un font ben fatto, perché quelle scelte le ha prese una persona. L'ottico può salvare un font con una tabella di kerning scadente o assente, e aiuta quando mescoli due font in una sola parola.

### Da evitare

- Crenare il testo corrente lettera per lettera
- Misurare gli spazi con un righello
- Crenare prima di impostare il tracking
- Stringere finché le lettere si toccano
- Fidarsi della spaziatura di un font gratuito senza controllare

### Da fare

- Lasciare il testo corrente al kerning del font
- Giudicare a occhio, tre lettere alla volta
- Impostare il tracking, poi correggere le singole coppie
- Tenere un filo di spazio, soprattutto tra r e n
- Controllare AV, To, LT e Yo in ogni titolo

## Il kerning in CSS

I browser applicano automaticamente il kerning del font alla maggior parte dei testi, ma puoi renderlo esplicito. La proprietà [font-kerning](https://developer.mozilla.org/en-US/docs/Web/CSS/font-kerning) attiva o disattiva le coppie integrate. In CSS non esiste una proprietà per regolare una singola coppia, quindi per un titolo o un logo la strada abituale è avvolgere una lettera in uno span e spostarla con un margine negativo o con la spaziatura tra le lettere.

```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 le unità em per le correzioni manuali, così si adattano alla dimensione del testo. Crena a mano solo i titoli, mai il testo corrente.

Se vuoi cambiare la spaziatura di un'intera riga invece di una sola coppia, quello è il tracking, impostato con `letter-spacing`. [Tracking e kerning](https://gradiently.design/it/guide/tracking-vs-kerning) spiega come i due lavorano insieme all'interlinea, e la [spaziatura tra le lettere](https://gradiently.design/it/guide/letter-spacing) dà valori di partenza per maiuscole, etichette e titoli.

Per saperne di più su come far sembrare voluto un testo grande, vedi i [font display](https://gradiently.design/it/guide/display-fonts) e le [basi della tipografia](https://gradiently.design/it/guide/typography-basics). Su uno sfondo sfumato o con texture, la spaziatura è solo metà della leggibilità: una parola ben crenata può comunque spezzarsi dove cambia il colore dietro. Un Mark di Gradiently sposta la sua zona più calma dietro le tue parole e sceglie inchiostro chiaro o scuro riga per riga, così un titolo spaziato con cura si legge in modo uniforme dalla prima all'ultima lettera.

## FAQ

### Che cos'è il kerning in tipografia?

Il kerning è la regolazione dello spazio tra due lettere precise, come A e V, in modo che una parola appaia spaziata in modo uniforme.

### Qual è la differenza tra kerning e tracking?

Il kerning cambia lo spazio tra una sola coppia di lettere. Il tracking cambia lo spazio tra tutte le lettere di una riga o di un blocco insieme.

### Devo fare il kerning al testo corrente?

Raramente. I buoni font includono le proprie coppie di kerning, che gestiscono bene il testo corrente. Riserva il kerning manuale a titoli, loghi e grandi caratteri display.

### Meglio kerning metrico od ottico?

Usa il metrico per un font ben fatto, dato che le sue coppie le ha impostate il type designer. Prova l'ottico quando il kerning integrato è scadente o stai mescolando font.

### Come si fa il kerning in CSS?

`font-kerning: normal` attiva le coppie integrate del font. Per regolare una coppia, avvolgi una lettera in uno span e spostala con un piccolo margine negativo in unità em.