La leggibilità su stampa e su web

Anche il miglior messaggio può essere rovinato e reso inefficace da una scarsa leggibilità. Avevamo già introdotto questo concetto parlando di scelta del font sia nella tipografia che per il sito web, in questo nuovo approfondimento vedremo nel dettaglio quali fattori la influenzano.

Come leggiamo?

Per capire cosa rende un testo più o meno leggibile dobbiamo soffermarci su come normalmente leggiamo.

Superati i primi anni di scuola, in cui impariamo a conoscere le singole lettere e sillabe e a combinarle tra loro per formare delle parole, la lettura non avviene più lettera per lettera, ma riconoscendo intere parole.

In quest’operazione l’occhio si muove velocemente da sinistra a destra facendo una breve pausa alla fine delle parole e una più lunga alla fine della riga per ritrovare l’inizio di quella successiva.

Dimensione del carattere

Mentre nella stampa la dimensione del carattere è funzionale allo strumento di comunicazione da utilizzare e, scegliendo una font progettata per il formato specifico, nel maggior numero dei casi, non si incorre in problemi di leggibilità, nel sito web, invece, è consigliabile non scendere al di sotto di dimensioni minime specifiche per desktop o dispositivi mobili.
In internet si trovano spesso siti web con un corpo troppo piccolo, specialmente se sono stati realizzati da qualche anno. Questo perché la tendenza era di mantenere gli stessi standard utilizzati sulla carta anche nel web, ma il miglioramento delle tecnologie con schermi più grandi e ad alta risoluzione ha reso necessario l’uso di caratteri con dimensioni maggiori.

Le dimensioni minime su cui ci si sta orientando sono: 16 px sul mobile e tra i 16px e i 22px su desktop, in base al font. All’opposto anche un carattere troppo grande interferisce con la lettura e il movimento dell’occhio, oltre ad essere sgradevole alla vista, in aggiunta nel mobile ridurrebbe eccessivamente le parole per riga.

Lunghezza della riga

Se la riga è troppo lunga, l’occhio avrà meno “pause” e si stancherà prima. La lunghezza corretta dipenderà dalle dimensioni del font, ma diverse ricerche, focalizzate sull’esperienza dell’utente nel web, consigliano un range tra i 50 – 75 – 90 caratteri massimo per riga.

Interlinea

Un’interlinea sbagliata confonderà l’occhio che non riuscirà immediatamente a riconoscere la riga da leggere, costringendoci a una sua ricerca. Non c’è un’interlinea corretta a priori, non è, infatti, un elemento a sé, ma va considerato in relazione alla lunghezza della riga, alla font e alle sue caratteristiche come spaziatura tra le lettere (kerning), dimensioni della x, pesantezza del colore.

Tenuto conto di queste considerazioni, come indicazione di base, in un paragrafo, considerando 1 la dimensione del testo, la sua interlinea dovrebbe essere tra 1,3 e 1,6 volte il corpo; ad esempio con un corpo 16pt l’interlinea dovrebbe essere tra 20,8 e 25,6. Per i titoli, che generalmente sono più corti e più grandi l’interlinea può rimanere in un rapporto di 1 a 1 o 1 a 1,2.

Spazio bianco

Lo spazio bianco riguarda sia l’impaginazione degli elementi all’interno di un gruppo di blocchi di testo e immagini, sia lo spazio interno alle parti testuali. Troviamo questi spazi tra i paragrafi, tra un’immagine e la sua didascalia, tra il titolo ed il paragrafo, tra una serie di immagini, gli spazi da considerare sono anche quelli tra parole e tra gli elementi nel corpo della pagina ed il suo bordo.

Questi spazi sono importanti e necessari per consentire una pausa al nostro cervello.

Altre considerazioni

Migliorano la leggibilità elementi di formattazione come corsivi e grassetti, oltre ad una chiara definizione delle gerarchie differenziando titoli e paragrafi.

Negli strumenti di comunicazione stampati che di solito vengono consegnati e presentati da una persona, come ad esempio un agente che utilizza un catalogo con un potenziale cliente, è possibile sfruttare maggiormente contrasti di colore d’effetto, la loro psicologia ed il loro significato.

In un catalogo di prodotti o di lavorazioni speciali in cui le foto sono le protagoniste si può azzardare con un colore di fondo nero e selezionati testi bianchi, anche se, teoricamente, per la leggibilità il testo chiaro su fondo scuro è sconsigliato.
In questo caso il messaggio d’insieme che deve veicolare lo strumento specifico, tenuto conto dell’apporto personale del venditore, supera la regola generale.

Non possiamo riportare lo stesso concetto nella realizzazione del sito web, che non può contare sul supporto alla vendita, ma deve essere completo e autonomo, con contenuti in grado di acquisire autorevolezza e di informare l’utente (per approfondire l’argomento ti consigliamo la lettura di questa pagina dedicata al sito web). La leggibilità quindi deve essere salvaguardata, per farlo è consigliabile mantenere il testo scuro su fondo bianco o grigio.

L’allineamento a bandiera è ritenuto più leggibile, in particolar modo nei siti web dove un allineamento giustificato può contrariare l’utente che ha l’impressione di trovarsi di fronte ad un “muro” di testo, in questo caso la fine irregolare delle righe conferisce movimento e leggerezza. Sempre per evitare l’effetto muro è consigliabile, dove il contenuto lo consente, l’utilizzo di elenchi puntati.

L’allineamento a sinistra è preferibile al centrato o a destra perché facilita la ricerca dell’inizio della riga successiva. Inoltre nel web con un allineamento giustificato si potrebbero creare degli eccessivi spazi tra una parola e l’altra a seconda del dispositivo in cui la pagina web viene visualizzata.
Negli strumenti di comunicazione stampati, questa preferenza per il testo a bandiera è meno marcata, l’occhio è, infatti, più abituato al testo giustificato dato che lo ritroviamo in libri, riviste e quotidiani. L’allineamento non è solo un fattore di leggibilità o estetico, ma si sceglie anche in base al messaggio da veicolare.