# Tracking, kerning e interlinea: il trio della spaziatura

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

Tre parole per tre spazi diversi. Se le confondi finisci per correggere quello sbagliato. Ecco cosa controlla ciascuna, da quale partire e i numeri che funzionano come base.

## The short version

- Il tracking cambia lo spazio tra tutte le lettere di una riga o di un blocco di testo in una volta sola.
- Il kerning cambia lo spazio tra una coppia specifica di lettere, come A e V.
- L’interlinea è la distanza verticale tra le righe di testo, chiamata line height in CSS e nella maggior parte delle app.
- Imposta prima interlinea e tracking per un intero stile, poi applica il kerning alle singole coppie solo nei caratteri grandi.
- I grandi titoli di solito vogliono tracking e interlinea un po’ più stretti, mentre le maiuscole e il testo piccolo vogliono più tracking.

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.

| Termine | Cosa cambia | Ambito | Nome in CSS |
| --- | --- | --- | --- |
| Tracking | Spazio tra tutte le lettere | Una parola, una riga o un paragrafo | `letter-spacing` |
| Kerning | Spazio tra una coppia di lettere | Due caratteri | `font-kerning` (solo attivo o disattivo) |
| Interlinea | Spazio tra le righe | Un paragrafo o un riquadro di testo | `line-height` |

Il trio della spaziatura in breve. Due agiscono in orizzontale, uno in verticale, e uno solo funziona su una singola coppia.

## 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](https://gradiently.design/it/guide/letter-spacing) 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](https://gradiently.design/it/guide/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](https://gradiently.design/it/guide/line-height-and-line-length) spiega perché.

Un post verticale con un occhiello in maiuscole spaziate che dice NUOVA STAGIONE sopra un titolo compatto che dice Collezione primavera appena arrivata

Dove sta ogni impostazione: tracking aperto sull’occhiello in maiuscolo, tracking e interlinea stretti sul titolo, spaziatura normale sulla riga di dettaglio.

Un post editoriale verticale con una piccola etichetta spaziata che dice NUMERO 04 e un titolo che dice Appunti dallo studio

Un’impaginazione editoriale. Il testo piccolo, etichetta e sottotitolo, si legge con più calma con interlinea generosa e tracking leggermente aperto.

## 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. **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. **Imposta l’interlinea** Decidi quanto le righe si impilano strette. I titoli vanno più stretti, i paragrafi più larghi.
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. **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. **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.

| Ruolo del testo | Tracking (CSS) | Tracking (unità Adobe) | Interlinea |
| --- | --- | --- | --- |
| Testo corrente, da 14 a 20 px | 0 | 0 | da 1,4 a 1,6 |
| Titolo, da 48 px in su | -0,01em to -0,03em | -10 to -30 | da 1,0 a 1,15 |
| Grandi caratteri display, da 120 px in su | -0,02em to -0,04em | -20 to -40 | da 0,9 a 1,05 |
| Etichette in maiuscolo | 0,06em to 0,12em | 60 to 120 | da 1,2 a 1,3 |
| Testo piccolo sotto i 13 px | 0,01em to 0,02em | 10 to 20 | da 1,4 a 1,5 |

Il tracking in em CSS e nei millesimi di em di Adobe dice la stessa cosa: 0,05em equivale a 50 unità. L’interlinea è mostrata come multiplo della dimensione del font.

### Errori comuni

- Fare il kerning di ogni coppia quando il tracking è sbagliato
- Stringere il tracking del testo corrente per far stare più parole
- Interlinea predefinita su un titolo di tre righe
- Maiuscole con tracking a zero
- Tracking diverso su ogni titolo di una serie

### Meglio

- Sistemare prima il tracking, poi il kerning di ciò che resta
- Modificare invece il testo
- Portare l’interlinea del titolo a circa 1,1
- Aprire le maiuscole di 0,06em o più
- Un valore per stile, scritto nelle regole del brand

## Tracking, kerning e interlinea in CSS

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

Scrivi `line-height` senza unità perché scali con la dimensione del font, e `letter-spacing` in em per lo stesso motivo.

Tieni questi valori in un solo posto così ogni pagina usa la stessa spaziatura per lo stesso ruolo. È il cuore di un [sistema tipografico](https://gradiently.design/it/guide/brand-typography-system). 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.

## FAQ

### Che differenza c’è tra tracking e kerning?

Il tracking cambia la spaziatura tra tutte le lettere di una selezione. Il kerning cambia la spaziatura tra una coppia specifica di lettere.

### L’interlinea è la stessa cosa della line height?

Sì, in pratica. L’interlinea è il termine tradizionale della stampa e line height è come CSS e la maggior parte delle app di design chiamano la distanza tra le righe.

### Devo regolare prima il tracking o il kerning?

Prima il tracking. Imposta la spaziatura complessiva; il kerning poi corregge le poche coppie che sembrano ancora irregolari, e solo nei caratteri grandi.

### Come si chiama il tracking in CSS?

`letter-spacing`. Scrivilo in em, come `0.05em`, così resta proporzionale quando cambia la dimensione del font.

### Che interlinea deve avere il testo corrente?

Circa da 1,4 a 1,6 volte la dimensione del font per il testo corrente, e circa da 1,0 a 1,15 per i grandi titoli.