Un testo può essere scritto benissimo e risultare comunque faticoso da leggere. Righe che attraversano tutto lo schermo, caratteri minuscoli, paragrafi compatti senza respiro: sono problemi di forma, non di contenuto, ma allontanano il lettore quanto una prosa confusa. La buona notizia è che si correggono con poche regole e qualche riga di CSS.
Leggibilità e decifrabilità
In tipografia si distingue spesso tra due qualità. La decifrabilità riguarda il singolo carattere: quanto facilmente si distinguono una «l» minuscola, una «I» maiuscola e il numero «1». La leggibilità riguarda il testo nel suo insieme: quanto è agevole leggere paragrafi interi senza stancarsi. Questo articolo si occupa soprattutto della seconda, che dipende più dall'impaginazione che dalla scelta del font.
La lunghezza della riga
Quando una riga è troppo lunga, l'occhio fatica a ritrovare l'inizio della successiva; quando è troppo corta, il ritmo di lettura si spezza di continuo. Per il testo continuo si indica tradizionalmente un intervallo di circa 45-75 caratteri per riga, spazi inclusi, con un valore vicino ai 65 come buon compromesso. Le linee guida WCAG, per il criterio di livello AAA sulla presentazione visiva, indicano un massimo di 80 caratteri.
In CSS l'unità ch, pari alla larghezza del carattere «0» del font corrente, è comoda per esprimere questo limite:
.articolo {
max-width: 68ch;
margin-inline: auto;
}
Su un monitor largo il testo resta così in una colonna comoda, centrata, invece di allungarsi da un bordo all'altro.
L'interlinea
L'interlinea, cioè la distanza verticale tra le righe, è uno dei parametri più sottovalutati. Il valore predefinito di molti browser è troppo stretto per paragrafi lunghi. Per il testo continuo un valore tra 1,4 e 1,7 volte il corpo funziona in genere bene; le WCAG, sempre al livello AAA, indicano almeno 1,5.
Righe più lunghe richiedono interlinea maggiore, perché l'occhio deve compiere un percorso di ritorno più ampio. I titoli, al contrario, possono avere interlinea più stretta, intorno a 1,1-1,25, perché sono brevi e un'interlinea ampia li farebbe sembrare frammentati.
La dimensione del carattere
Per il testo principale su schermo, 16 pixel CSS sono un punto di partenza ragionevole e corrispondono al valore predefinito dei browser. Molti siti di lettura scelgono 18 o anche 20 pixel su schermi grandi. Più importante del numero esatto è rispettare le preferenze dell'utente:
- esprimere le dimensioni in
rem, così che seguano l'impostazione del browser; - non bloccare lo zoom sui dispositivi mobili;
- verificare che la pagina resti utilizzabile con il testo ingrandito al 200%.
La dimensione percepita varia molto da un font all'altro: due caratteri impostati a 16 pixel possono sembrare di grandezze diverse, perché cambia l'altezza delle lettere minuscole. Per questo la scelta va sempre verificata a occhio, non solo nei valori.
Paragrafi e spaziature
Lo spazio tra i paragrafi aiuta a percepire la struttura. Un valore pari a circa una riga di testo è una scelta classica. Anche lo spazio prima di un titolo dovrebbe essere maggiore di quello dopo, così che il titolo si leghi visivamente al contenuto che introduce e non a quello che lo precede.
Paragrafi brevi, da tre a cinque frasi, sono più adatti allo schermo di blocchi da venti righe. Elenchi puntati, sottotitoli e frasi chiave in grassetto permettono la lettura per scansione, che sul web è la norma: molti lettori scorrono la pagina cercando il punto che li interessa prima di decidere se leggere tutto.
Allineamento e sillabazione
Sullo schermo il testo allineato a sinistra è quasi sempre la scelta migliore per le lingue che si leggono da sinistra a destra. La giustificazione, senza un buon sistema di sillabazione, crea spazi irregolari tra le parole, i cosiddetti «fiumi bianchi», che disturbano la lettura e sono particolarmente faticosi per chi ha la dislessia. Il testo centrato va riservato a righe brevi, come titoli o citazioni.
Contrasto e sfondo
Il testo deve avere un contrasto sufficiente con lo sfondo, ma il nero pieno su bianco pieno, su schermi molto luminosi, può risultare abbagliante per alcune persone. Un grigio molto scuro su un bianco leggermente caldo mantiene un contrasto ampiamente sufficiente riducendo il riverbero. Il grigio chiaro su bianco, invece, è un errore frequente che penalizza chiunque legga in condizioni non ideali.
Una base di partenza
html { font-size: 100%; }
body {
font-size: 1.125rem;
line-height: 1.6;
color: #1f1f1f;
background: #fdfcf9;
}
.articolo { max-width: 68ch; }
p + p { margin-top: 1em; }
h2 { line-height: 1.2; margin: 2em 0 0.5em; }
Non è una ricetta universale, ma un punto di partenza da adattare al carattere scelto e al tipo di contenuto.
In sintesi
- Righe di circa 45-75 caratteri e un'interlinea intorno a 1,5 rendono il testo più comodo.
- Le dimensioni in
remrispettano le preferenze dell'utente e lo zoom. - Paragrafi brevi, sottotitoli ed elenchi favoriscono la lettura per scansione.
- Allineamento a sinistra e contrasto adeguato evitano fatica inutile.
