I numeri della leggibilità web: righe, spaziature, font
Lunghezza delle righe, spaziature, dimensione del font sono parametri che incidono sulla leggibilità: l'occhio che legge non procede in modo lineare ma per salti, e solo in certe condizioni questo processo complesso può avvenire facilmente.
Lettura: 4 minuti
I numeri che seguono non sono dogmi, ma linee guida da applicare con buon senso. È importante perciò comprendere le ragioni da cui tali linee guida derivano.
Lunghezza delle righe
La riga di un testo dovrebbe avere una lunghezza compresa fra 45 e 75 caratteri (spazi inclusi).
Per quale motivo dovremmo limitare la lunghezza di una riga? Il motivo è che noi non leggiamo ogni singola lettera di una parola né ogni parola di una frase. Il processo di lettura non è lineare: alterna momenti in cui l’occhio si ferma e rimane concentrato su un punto particolare (fissazioni) ad altri in cui l’occhio compie movimenti rapidi (saccadi). La lettura è un processo predittivo: attraverso la combinazione di fissazioni e saccadi il nostro cervello cerca di inferire, “indovinare” le parole. Una riga troppo lunga o troppo breve ostacola questo processo e rallenta la lettura.
Accessibilità
Anche le linee guida per l’accessibilità (WCAG 2.1) raccomandano di creare righe inferiori agli 80 caratteri.
Spazio bianco
Lo spazio bianco non è spazio perso.
È diretto corollario della lunghezza delle righe. Se la riga ha una lunghezza limitata è molto probabile che ai lati del testo rimanga dello spazio bianco. Lo spazio bianco è fondamentale, per più ragioni:
- facilita la leggibilità e la scansione dei contenuti
- guida l’occhio verso il contenuto
- aiuta a stabilire una gerarchia visiva (la psicologia della gestalt insegna che non esiste figura senza sfondo)
- contribuisce a tramettere un senso di eleganza.
Dimensioni del carattere
Il testo principale di una pagina, il cosiddetto body copy, dovrebbe avere una dimensione di 14-16px; non dovrebbe andare (troppo) al di sotto o al di sopra.
16 pixel è la dimensione del testo che i browser mostrano per default. È il valore che permette su monitor una leggibilità pari a quella della gran parte dei libri (considerando che il monitor è normalmente a una distanza maggiore). Questo valore è legato anche alla lunghezza delle righe: un font troppo piccolo fa aumentare la lunghezza della riga; uno troppo grande la riduce. La chiave è quindi trovare il giusto equilibrio tra grandezza del font e lunghezza della riga.
Bisogna tenere conto del fatto che, a parità di misura, i font con maggiore altezza della x (come ad esempio il Verdana) appaiono più grandi; mentre quelli con minore altezza della x (come il Georgia) appaiono più piccoli. Nei CSS, inoltre, è meglio impostare le dimensioni del font attraverso misure relative come percentuali, em o rem: 100%, 1 rem o 16 pixel si equivalgono.
Le obiezioni tipiche contro queste linee guida sono che:
- un testo più piccolo evita lo scroll
- testi più piccoli permettono di avere pagine più ricche di contenuto
- l’utente può sempre aumentare la dimensione del testo con lo zoom del browser.
Tutte queste argomentazioni sono fuorvianti:
- lo scroll non è un problema, è un comportamento naturale sul web, a maggior ragione sui dispositivi mobili
- un testo troppo fitto, oltre a essere meno leggibile, produce stress e riduce la credibilità del sito o della app
- la gran parte delle persone ignora la funzione di zoom del browser.
Interlinea
L’interlinea raccomandata per i testi digitali è una volta e mezzo (150 %) la misura del carattere.
Questo significa che se il testo è di 18 px, l’interlinea dovrebbe essere intorno ai 24 px. Anche in questo caso il valore è legato al modo di leggere per saccadi e fissazioni. Un’interlinea troppo fitta interferisce con lo scanning del testo: l’occhio non riesce a mantenere il fuoco su una singola riga, e tende involontariamente a sconfinare sulla riga sottostante (o soprastante). Un’interlinea troppo alta, viceversa, rompe la continuità del testo: le righe iniziano a fluttuare e la scansione verticale diventa più difficile.
Accessibilità
Anche le linee guida per l’accessibilità (WCAG 2.1) raccomandano un’interlinea di almeno 1,5 volte la dimensione del carattere; e dopo i paragrafi una spaziatura di almeno 2 volte la dimensione del carattere.
Font
Uno studio sulla leggibilità a schermo condotto dalla Adobe ha rilevato che non esiste un font più leggibile in assoluto (la leggibilità è stata misurata attraverso la velocità di lettura – parole per minuto). Uno stesso font si è dimostrato molto leggibile per alcuni utenti e meno per altri. A incidere sono soprattutto fattori come l’età, l’abitudine, il tipo di lettura (scanning, skimming, lettura profonda), e così via. Lo studio è sintetizzato da Jakob Nielsen nel suo articolo Best Font for Online Reading: No Single Answer.
Leggiamo o non leggiamo sul web?
Jakob Nielsen, in un famoso articolo del 1997, decretava che su web non leggiamo. Altri studiosi e professionisti, viceversa, sottolineano che sul web si legge e anche abbondantemente. Dunque, leggiamo o non leggiamo su schermo? Entrambe le affermazioni sono vere.
Test per lo ux writing: valutare con le persone testi e microtesti