Tracking, kerning e interlinea: il trio della spaziatura

Nel confronto tracking e kerning, la differenza è l’ambito. Il tracking regola lo spazio tra tutte le lettere di una selezione, così un intero titolo si apre o si stringe in modo uniforme. Il kerning regola lo spazio tra una coppia specifica, come la A e la V in WAVE, per correggere un vuoto lasciato dal font. L’interlinea, il terzo del trio, non c’entra con le lettere affiancate: è lo spazio verticale da una riga di testo alla successiva.

Cos’è il tracking in tipografia

Il tracking è una modifica uniforme. Selezioni una riga, aggiungi tracking e ogni spazio cresce della stessa quantità. È lo strumento per cambiare la trama del testo: arioso e formale, oppure fitto e incisivo. Nelle app di design si misura in millesimi di em (Adobe) o come percentuale della dimensione del font (Figma), e in CSS come letter-spacing, meglio scritto in em così scala con il carattere.

Lo richiedono tre situazioni. I grandi titoli di solito sembrano sciolti con la spaziatura predefinita, quindi un po’ di tracking negativo li compatta. Le maiuscole sembrano strette, perché sono state disegnate per stare accanto alle minuscole, quindi hanno bisogno di tracking positivo. E il testo molto piccolo, come etichette e righe legali, si legge meglio con un po’ più di aria. Spaziatura tra le lettere tratta ogni caso nel dettaglio.

Cos’è il kerning

Il kerning è una riparazione locale. Alcune coppie di lettere lasciano un buco visibile o uno scontro anche in un font ben spaziato: AV, To, LT, Yo, P seguita da un punto. I font includono una tabella di queste coppie e le correggono in automatico, quindi per il testo corrente puoi lasciare stare il kerning. In titoli, loghi e wordmark potresti ancora dover correggere a mano una coppia o due. Kerning ha l’elenco completo delle coppie problematiche e un metodo per sistemarle a occhio.

Cos’è l’interlinea in tipografia

L’interlinea prende il nome dalle strisce di piombo che i tipografi mettevano tra le righe di caratteri metallici. Oggi è la line height: la distanza da una linea di base alla successiva. Troppo poca e le aste ascendenti si scontrano con le discendenti; troppa e le righe si allontanano in pensieri separati. Di regola, più la riga è lunga e il testo piccolo, più interlinea serve. Interlinea e lunghezza della riga spiega perché.

Cosa cambiare per primo: tracking, kerning o interlinea

Lavora dalla decisione più grande alla più piccola. Interlinea e tracking definiscono lo stile; il kerning ripulisce ciò che resta. Se cambi nell’ordine sbagliato annullerai il tuo stesso lavoro.

1. 1

   Scegli dimensione e peso

   La spaziatura dipende da entrambi. Impostali per primi, perché un peso più pesante o una dimensione maggiore richiede valori diversi.

2. 2

   Imposta l’interlinea

   Decidi quanto le righe si impilano strette. I titoli vanno più stretti, i paragrafi più larghi.

3. 3

   Imposta il tracking per lo stile

   Applica un solo valore di tracking all’intero stile di titolo, etichetta o testo corrente. Mantienilo coerente in tutto il design.

4. 4

   Applica il kerning alle coppie che ancora stonano

   Solo nei caratteri grandi o permanenti. Cerca AV, To, LT e coppie simili e correggile una alla volta.

5. 5

   Controlla alla dimensione reale

   Guarda il risultato alla dimensione con cui le persone lo vedranno. Una spaziatura che sembra giusta ingrandita può sembrare sciolta su un telefono.

Valori di partenza per tracking e interlinea

Sono impostazioni sensate, non leggi. I font sono diversi, e un carattere display condensato si comporta in modo del tutto diverso da un sans geometrico largo. Usali per cominciare, poi fidati dell’occhio.

Tracking, kerning e interlinea in CSS

:root {
  font-kerning: normal; /* use the font's own pairs */
}

body {
  font-size: 1.0625rem;
  line-height: 1.55;      /* leading */
  letter-spacing: 0;      /* tracking */
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

Tieni questi valori in un solo posto così ogni pagina usa la stessa spaziatura per lo stesso ruolo. È il cuore di un sistema tipografico. Se progetti post social e non pagine web, vale la stessa idea: decidi la spaziatura una volta, scrivila nelle regole del brand e riusala. In Gradiently il kit del brand contiene i tuoi font per titoli e testo e il Designer lo applica quando imposta nuove dimensioni, così il carattere resta coerente da un post quadrato a una storia.