Kerning: come correggere gli spazi tra le lettere

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.

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

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. 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. 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. 3

   Capovolgila

   Ruota la parola o guardala allo specchio. Quando non riesci più a leggerla, vedi forme e spazi invece di lettere.

4. 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. 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. 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.

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

/* 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 vuoi cambiare la spaziatura di un'intera riga invece di una sola coppia, quello è il tracking, impostato con letter-spacing. Tracking e kerning spiega come i due lavorano insieme all'interlinea, e la spaziatura tra le lettere 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 e le basi della tipografia. 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.