Tipografia CSS: i quattro fondamentali

Il 90% del contenuto di un sito è testo. Eppure la tipografia è spesso l'ultima cosa a cui si pensa, finché non si legge male. Quattro proprietà bastano per il 90% del lavoro: font-family (quale carattere), font-size (quanto grande), line-height (quanto spazio verticale tra le righe) e letter-spacing (quanto spazio tra le lettere).

1. font-family: il font stack e il fallback

Non puoi essere certo che il font che preferisci sia installato su ogni dispositivo. Per questo font-family accetta un elenco di alternative, separate da virgola, un font stack: il browser prova la prima, e se non è disponibile passa alla successiva.

body { 
   font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
}

L'ultima voce dovrebbe sempre essere una famiglia generica: serif, sans-serif, monospace; mai tra virgolette. È la rete di sicurezza finale: se nessuno dei font richiesti è disponibile, il browser sceglie comunque qualcosa dello stile giusto, invece di un font a caso.

Fonte: MDN Web Docs: «font-family»: le famiglie generiche sono un meccanismo di fallback e dovrebbero essere l'ultimo elemento dell'elenco.

2. font-size: perché px è sconsigliato, e la differenza tra em e rem

Tre unità, tre comportamenti:

• px unità assoluta: sempre la stessa dimensione, non risponde alle preferenze dell'utente. MDN è netto: le unità assolute possono creare problemi di accessibilità, perché non si adattano se qualcuno ha aumentato la dimensione di default del testo nel browser.
• em relativa al font-size dell'elemento (o del genitore). Annidando più elementi in em, i valori si moltiplicano tra loro: un effetto «a cascata» che può sorprendere.
• rem relativa al font-size della radice (<html>): un solo riferimento fisso, non si accumula annidando.

html { 
   font-size: 100%; 
} 
/* rispetta il default del browser, di solito 16px */ 

h1 { 
   font-size: 2rem; 
} 
/* sempre 2x la dimensione di default (che di solito è 16px), ovunque si trovi */ 

p { 
   font-size: 1rem; 
}

MDN ci raccomanda che  per massimizzare l'accessibilità, dobbiamo usare valori relativi al font-size di default dell'utente, quindi rem (o em) invece di px: ci ritroveremo il testo con le stesse dimensioni in tutte le pagine del sito, ovviamente, in base a come verranno applicate le regole di stile ai diversi elementi html.

Vedi: MDN Web Docs: "<length>": le unità assolute possono causare problemi di accessibilità; preferire unità relative come em o rem per il font-size.

3. line-height: perché senza unità, e perché almeno 1.5

Il valore raccomandato da MDN è un numero senza unità (1.5, non 1.5em o 150%): è nella maggior parte dei casi il modo preferibile di impostare line-height, perché evita risultati imprevisti quando la proprietà viene ereditata da elementi figli con un font-size diverso.

body { 
   line-height: 1.5; /* corretto: si adatta al font-size di ciascun elemento figlio */ 
}

E c'è una soglia precisa da ricordare: MDN raccomanda un valore minimo di 1.5 per il testo dei paragrafi principali. Non è una questione estetica: aiuta le persone con ipovisione e chi ha difficoltà cognitive come la dislessia a seguire le righe senza perdersi.

Vedi: MDN Web Docs: «line-height»: un valore numerico senza unità è generalmente il modo preferito di impostare la proprietà; usare un valore minimo di 1.5 per il testo principale aiuta l'accessibilità (ipovisione, dislessia).

4. letter-spacing: il ritocco fine, con cautela

letter-spacing aggiunge spazio extra in più rispetto a quello naturale del font: non lo sostituisce. Valori positivi allargano, negativi restringono. MDN consiglia unità relative al font (em) piuttosto che fisse (px), così la spaziatura resta proporzionata quando cambia la dimensione del testo.

h1 { 
   letter-spacing: 0.02em; /* proporzionato: cresce e si riduce col font-size */ 
}

Una nota importante e spesso ignorata: MDN avvisa che non esiste un valore universale leggibile, perché ogni font ha proporzioni diverse e che alcune lingue (l'arabo, per esempio, dove le lettere devono restare visivamente connesse) non dovrebbero avere letter-spacing applicato affatto.

Vedi: MDN Web Docs: «letter-spacing»: raccomandazione di usare unità relative al font; nessun valore universale garantisce la leggibilità per tutti i font; alcune scritture non vanno spaziate.

5. La scala tipografica: una convenzione, non uno standard

Una pratica diffusa nel design (non una specifica CSS) è costruire i propri font-size come una scala: si parte da una dimensione base e si moltiplica per un rapporto fisso a ogni gradino, spesso definiti come custom property in CSS, per restare coerenti in tutto il sito senza inventare un nuovo numero ogni volta.

:root { 
/* utilizziamo delle variabili nelle quali memorizziamo dei valori, quando avremo bisogno di applicare una dimensione a un testo, richiameremo la variabile non il valore*/
   --font-size-sm: 0.875rem; 
   --font-size-base: 1rem; 
   --font-size-lg: 1.25rem; 
   --font-size-xl: 1.5rem; 
}

In sintesi

Nessuna di queste scelte è puramente estetica: ognuna ha un impatto diretto su chi deve leggere davvero il tuo testo, anche con un font diverso dal previsto, un browser con dimensioni personalizzate, o una vista meno acuta della tua.