# Spaziatura tra le lettere: quando aprire il testo e quando stringerlo

[Canonical HTML page](https://gradiently.design/it/guide/letter-spacing)

Pochi centesimi di em decidono se un’etichetta sembra curata o soffocata. Ecco dove aggiungere spazio tra le lettere, dove toglierlo e dove lasciarlo com’è.

## The short version

- La spaziatura tra le lettere, detta anche tracking, è la quantità uniforme di spazio aggiunta o tolta tra tutte le lettere di un testo.
- La crenatura, o kerning, è diversa: regola lo spazio tra coppie specifiche di lettere, come A e V, e di solito è già integrata nel font.
- Maiuscole ed etichette piccole hanno quasi sempre bisogno di spaziatura in più, in genere tra 0.05em e 0.12em.
- I titoli grandi di solito rendono meglio leggermente stretti, spesso di 0.01em fino a 0.03em, perché la spaziatura predefinita del font è pensata per dimensioni più piccole.
- Il testo corrente va normalmente lasciato con la spaziatura predefinita del font.

La **spaziatura tra le lettere** (tracking) è lo spazio uniforme aggiunto o tolto tra tutte le lettere di una parola o di una riga. La regola breve: aggiungi spaziatura a maiuscole ed etichette piccole, stringila leggermente sui titoli grandi e lascia il testo corrente con il valore predefinito del font. La maggior parte dei problemi di spaziatura nei design reali nasce dal fare il contrario: maiuscole lasciate strette, titoli grandi lasciati larghi e paragrafi allargati per riempire un riquadro.

La spaziatura tra le lettere è una delle tre impostazioni di spazio che determinano come si legge un testo. Le altre due sono [interlinea e lunghezza della riga](https://gradiently.design/it/guide/line-height-and-line-length), e tutte e tre sono introdotte nelle [basi della tipografia](https://gradiently.design/it/guide/typography-basics).

## Tracking e kerning: qual è la differenza

I due termini vengono usati come sinonimi, ma fanno lavori diversi. Il **tracking** cambia in modo uniforme la spaziatura di un’intera selezione. Il **kerning**, o crenatura, cambia lo spazio tra una coppia specifica di lettere, perché alcune forme lasciano vuoti sgradevoli con la spaziatura predefinita: pensa ad *AV*, *To*, *Ty* o *LT*.

| Domanda | Tracking | Kerning |
| --- | --- | --- |
| Cosa cambia | Lo spazio tra tutte le lettere di una selezione | Lo spazio tra una coppia di lettere |
| Chi di solito lo imposta | Tu, per stile: etichette, titoli, didascalie | Il type designer, nelle tabelle di kerning del font |
| Quando intervenire | Ogni volta che componi maiuscole, etichette o testo display | Di rado: loghi, titoli grandi, coppie difficili |
| In CSS | `letter-spacing` | `font-kerning`, attivo per impostazione predefinita nella maggior parte dei browser |

Il tracking è una scelta di stile che fai spesso. Il kerning è un dettaglio di mestiere da controllare alle dimensioni grandi.

I buoni font arrivano con migliaia di coppie di kerning, quindi alle dimensioni del testo raramente devi intervenire a mano. Alle dimensioni di titoli e loghi i piccoli vuoti diventano visibili, e sistemare a mano una coppia o due vale il minuto che richiede.

## Perché le maiuscole vogliono più spaziatura

Le minuscole sono disegnate per stare accanto ad altre minuscole: ascendenti, discendenti e forme tonde creano un profilo vario che l’occhio legge come la forma di una parola. Le maiuscole sono squadrate e di altezza simile, quindi con la spaziatura predefinita si ammassano in una barra compatta. Un po’ di tracking in più le separa e rende ogni lettera più facile da riconoscere.

Quanto dipende dalla dimensione. Le maiuscole minuscole, come un’etichetta o un occhiello da 11 a 13 px, possono prendere da 0.08em a 0.12em. Le maiuscole a dimensione di sottotitolo ne vogliono meno, intorno a 0.04em fino a 0.06em. Le maiuscole molto grandi in un titolo possono non averne bisogno affatto, o persino volere una leggera stretta.

Un post verticale di annuncio con un piccolo occhiello in maiuscolo spaziato sopra un grande titolo

Un occhiello in maiuscolo spaziato sopra un titolo con spaziatura normale.

Un poster verticale per un evento con un’etichetta in maiuscolo spaziato e un titolo in minuscolo

Maiuscole piccole con spaziatura in più si leggono come un’etichetta, non come un urlo.

## Quando stringere la spaziatura tra le lettere

I font sono spaziati per una certa gamma di dimensioni, di solito quelle del testo. Portata a 60 o 100 px, la stessa spaziatura sembra ariosa e la parola smette di leggersi come un’unica forma. Stringere leggermente i titoli grandi, spesso di 0.01em fino a 0.03em, li ricompatta. I font con un asse di dimensione ottica o una versione Display separata spesso lo fanno per te, uno dei vantaggi spiegati nei [font variabili](https://gradiently.design/it/guide/variable-fonts).

Stringi con attenzione. Lettere che si toccano, o lettere tonde che cominciano a fondersi, sono il segno che sei andato troppo oltre, soprattutto con i pesi bold. Controlla le coppie al limite di ciò che il font sa fare bene, come *rn* (che può leggersi *m*) e *cl* (che può leggersi *d*).

### Da evitare

- Spaziatura predefinita su piccole etichette in maiuscolo
- Tracking largo su un titolo da 96 px
- Allargare il testo corrente per riempire una riga o un riquadro
- Tracking negativo sul testo piccolo per farci stare più parole

### Da fare

- Da 0.05em a 0.12em su maiuscole piccole ed etichette
- Una leggera stretta sul testo molto grande
- Spaziatura predefinita per i paragrafi
- Testo più breve o un font più stretto quando manca spazio

## La spaziatura tra le lettere in CSS

Imposta `letter-spacing` in `em`, non in pixel, così la spaziatura scala con la dimensione del font. Un valore adatto a un’etichetta da 12 px resterà proporzionalmente giusto anche se l’etichetta cresce a 14 px. Vedi il riferimento MDN per [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) per il comportamento completo.

```css
body {
  letter-spacing: normal; /* leave paragraphs alone */
  font-kerning: normal;
}

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

.button {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.display {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Tracking also adds space after the last letter.
   Balance it when centring a short label. */
.eyebrow--centred {
  padding-inline-start: 0.1em;
}
```

Tracking positivo per le maiuscole piccole, poco per i pulsanti, una leggera stretta per il testo display e niente per il testo corrente.

> **Lo spazio in coda** I browser aggiungono la spaziatura anche dopo l’ultimo carattere. Su un’etichetta centrata e molto spaziata, questo sposta il testo leggermente a sinistra. Un po’ di padding equivalente sul lato iniziale, come nel codice qui sopra, lo ribilancia.

## Spaziatura per testo piccolo, etichette e numeri

Il testo piccolo trae vantaggio da un po’ di spazio in più, perché alle piccole dimensioni le lettere si confondono, soprattutto con testo chiaro su fondo scuro. Molte famiglie di font aprono già la spaziatura alle piccole dimensioni ottiche. Se la tua non lo fa, da 0.01em a 0.03em su didascalie e note in piccolo può aiutare. I numeri nelle tabelle guadagnano più dalle cifre tabellari (`font-variant-numeric: tabular-nums`) che dal tracking, perché si allineano in colonna.

Altri due casi richiedono attenzione. Le scritture corsive legate, come l’arabo, non vanno spaziate, perché la spaziatura rompe i collegamenti tra le lettere. E il testo in minuscolo va spaziato di rado: le minuscole spaziate spezzano le forme delle parole che lo rendono facile da leggere.

Un post quadrato con un numero grande e una piccola etichetta in maiuscolo spaziato sopra

Numeri grandi leggermente stretti, con una piccola etichetta spaziata sopra, mantengono un post statistico compatto e chiaro.

## Un punto di partenza per la spaziatura di ogni ruolo

Usa questi valori come base, poi regolali a occhio per il tuo font. Guarda il risultato alla dimensione reale, su uno schermo reale, perché una spaziatura che sembra giusta ingrandita sulla tela di progetto spesso appare diversa al 100 per cento.

| Ruolo del testo | Dimensione tipica | Spaziatura |
| --- | --- | --- |
| Occhiello o etichetta, maiuscolo | Da 11 a 13 px | Da 0.08em a 0.12em |
| Testo dei pulsanti | Da 14 a 16 px | Da 0 a 0.02em |
| Testo corrente | Da 16 a 18 px | Predefinita del font |
| Sottotitolo, maiuscolo | Da 18 a 24 px | Da 0.04em a 0.06em |
| Titolo | Da 32 a 56 px | Da 0 a -0.01em |
| Titolo display | Da 64 px in su | Da -0.01em a -0.03em |

Valori di partenza per il testo latino. I font larghi vogliono meno spazio aggiunto; quelli condensati possono prenderne di più.

Se il tuo design sta su un gradiente o una foto, la spaziatura incide anche sulla leggibilità: lettere sottili e strette spariscono più in fretta su un fondo movimentato rispetto a quelle aperte. Abbina queste impostazioni ai consigli su [il testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) e sugli [abbinamenti di font](https://gradiently.design/it/guide/font-pairing) per design che si leggono a colpo d’occhio.

## FAQ

### Qual è la differenza tra spaziatura tra le lettere e kerning?

La spaziatura tra le lettere, o tracking, cambia in modo uniforme lo spazio tra tutte le lettere di una selezione. Il kerning regola lo spazio tra una coppia specifica di lettere, come A e V, ed è per lo più integrato nel font.

### Quanta spaziatura devono avere le maiuscole?

Circa da 0.05em a 0.12em per le maiuscole piccole come etichette e occhielli, e meno man mano che la dimensione cresce. I titoli molto grandi in maiuscolo possono non averne bisogno.

### Il testo corrente deve avere spaziatura aggiunta?

Di solito no. I font sono spaziati per le dimensioni del testo dai loro designer, quindi la spaziatura predefinita è normalmente la più leggibile per i paragrafi.

### Perché usare em per letter-spacing in CSS?

Un valore in em scala con la dimensione del font, quindi la spaziatura resta proporzionata quando il testo si ingrandisce o si rimpicciolisce. Un valore in pixel resta fisso e diventa presto troppo stretto o troppo largo.