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

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, e tutte e tre sono introdotte nelle basi della tipografia.

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.

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.

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.

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

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 per il comportamento completo.

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

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

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 e sugli abbinamenti di font per design che si leggono a colpo d’occhio.