Accessibilità: il tuo sito è leggibile?

Nel mio ultimo articolo abbiamo parlato della leggibilità relativamente ai colori, mentre alcune settimane orsono abbiamo affrontato il tema delle font web-standard e in particolare della specifica CSS3 @font-face.

Un importante aspetto che, per un motivo o per un altro, non ho preso in considerazione è quello della leggibilità delle font: “ora” che hai la possibilità di scegliere la font che vuoi per il tuo sito, devi fare attenzione a non basare la scelta solo sull’estetica (in preda all’entusiasmo della novità dei CSS3), poiché la possibilità di impostare una determinata font non vuol dire necessariamente che sia la scelta giusta da percorrere, in quanto alcune font sono semplicemente più leggibili di altre.

Leggibilità

Le regole basilari della leggibilità sono:

  • che una scritta maiuscola o in stampatello (in CSS: uppercase) è meno leggibile di una scritta minuscola;
  • che la parte superiore di una scritta è più importante ai fini della leggibilità della parte inferiore;
  • che le font con grazie sono più leggibili delle font senza grazie.

Per quanto riguarda la prime due affermazioni, è facilmente osservabile nell’immagine seguente come un testo con le giuste lettere alte e basse dia più informazioni rispetto a un testo sempre alto e come la parte superiore di una scritta ci dia lo stesso più informazioni rispetto alla parte inferiore.

Confronto leggibilità del testo tra parte superiore e inferiore e tra alto e basso

Per la terza affermazione la situazione è un po’ più complessa e poco chiara.

Lettura a video

Leggere al computer è un’attività che richiede il 25% del tempo in più rispetto alla stessa lettura cartacea, perché più faticosa e difficile.
I motivi sono da ricondursi a una postura innaturale, alle emissioni luminose dello schermo (che possono essere mitigate con contrasti adatti), e a una risoluzione minore dei monitor rispetto alla carta.

Quest’ultimo fattore incide sulla preferenza delle font con grazie piuttosto che senza: la definizione minore della font a video rispetto alla carta porta un affaticamento maggiore nella lettura di font con grazie. Il problema si sta pian piano riducendo, col migliorarsi della tecnologia: non è da escludere che un giorno non troppo lontano si riesca ad avere la stessa definizione della carta anche su un monitor di grandi dimensioni (il retina display dell’iPhone 4 avrebbe costi troppo elevati già per lo schermo dell’iPad) e che quindi le regole di leggibilità valide sulla carta diventino tali anche per la lettura a video.

Le screen-fonts

Visti i problemi di lettura a video, Microsoft negli anni ’90 commissionò al font-designer Matthew Carter delle font per il proprio sistema operativo.

Dopo alcuni studi ed esperimenti Carter ha identificato dei parametri necessari per una font che dev’essere leggibile a video: da qui la nascita del Verdana, una font sans-serif  con larghi spazi tra le lettere, ottima per inserire molto testo in spazi ristretti, e del Georgia, font con grazie molto simile al Times New Roman ma più largo alla stessa dimensione, l’unica font serif adatta al video.

Il Georgia a parità di dimensioni è più grande del Times

In seguito le font si sono diffuse tanto da essere pre-installate sulla maggior parte dei computer (Windows  e Mac).

Le altre font web-safe

Una serie di ricerche condotte da Michael Bernard (Usability News 41)  agli inizi degli anni 2000, sembra ribaltare ancora una volta le regole del gioco, calcolando la velocità e l’accuratezza di lettura, l’impressione di maggiore o minore leggibilità e la piacevolezza delle screen-fonts rispetto alle font tradizionali.
Risulta, infatti, che il podio per la velocità media (a dimensioni di 10-12-14 pt) è detenuto dal Times, seguito dall’Arial; mentre in assoluto la font più veloce da leggere risulta essere Tahoma a 12pt.
Ancora il Tahoma, ‘sta volta a 10pt, è la font che dà l’impressione di essere più leggibile, seguita dal Georgia 10pt e dal Courier 12pt; per quanto riguarda la media tra le tre dimensioni il migliore sembra l’Arial a parimerito col Courier, ma non ci sono grandissime disparità tra tutti i “concorrenti”.
Sulla piacevolezza, il Georgia in media (e anche in assoluto a 10pt) risulta la font più attraente, seguita dal Times (secondo in assoluto a 14pt).

Sotto i 10pt  però le regole restano invariate: per quanto riguarda la lettura a video è meglio utilizzare sempre font sans-serif. Probabilmente starai pensando che si tratta di una dimensione troppo piccola per essere anche solo presa in considerazione, ma rapportando il discorso alla stampa, dove i quotidiani sono stampati anche a 8pt e i libri tascabili a 9… il lato positivo è che a video non c’è bisogno di risparmiare spazio per i costi della carta, quindi sarebbe meglio evitare direttamente dimensioni così ridotte (esprimendole sempre e comunque in modo che siano scalabili).

Tutte le altre font

Proprio all’inizio di quest’anno il servizio di Google Font Directory ha ampliato la lista delle font che mette a disposizione con circa 20 novità. Dovrebbe essere abbastanza palese quali di queste font siano destinate a rimanere confinate nei titoli e quali invece possano essere utilizzate anche per testi più lunghi.

Alcune fonts messe a disposizione da Google Font Directory

L’impaginazione

Oltre alla font, per la leggibilità di un testo è importante che esso sia impaginato bene. Bisogna prendere quindi in considerazione la lunghezza della linea: se troppo lunga infatti fa perdere il filo (e confondere con le linee confinanti, per cui se è proprio necessaria una riga lunga bisogna bilanciare con un’interlinea più alta), se troppo corta invece rende difficile e lenta la lettura a livello di comprensione, spezzando troppo il discorso.
La lunghezza ottimale della riga dovrebbe essere tra le 7 e le 12 parole.

Trovo spesso, girovagando per il web, dei testi con allineamento giustificato. Non così spesso a dire la verità, ma già 1 su 100 sarebbe troppo!
L‘allineamento giustificato ha il grande vantaggio di far risparmiare molto spazio, perciò è utilizzato soprattutto sui giornali. Risparmiare lo spazio non dovrebbe essere una necessità sul web, come già detto, ed oltre tutto il testo andrebbe giustificato in maniera più accorta rispetto a una semplice regola CSS  ”text-align:justify”: quando si giustifica un testo per la stampa, sapendo che quel testo non potrà essere modificato a piacimento dai lettori o dai loro device (se non sai come questo sia possibile ti consiglio di dare un’occhiata a questo articolo) le spaziature tra le lettere e gli a-capo vengono messi in maniera da creare un effetto piacevole a blocchetto, cercando soprattutto di evitare ammassi di lettere senza spazi e buchi vuoti.

Sul web non puoi avere controllo sulla grandezza finale della font, sulla font che effettivamente visualizzerà l’utente e via dicendo, perciò il giustificato si adatterà allo spazio del paragrafo che gli hai concesso in maniera totalmente arbitraria, creando spesso dei vuoti tra le parole in cui è facile perdere il filo.
L’allineamento migliore sarebbe dunque quello a bandiera allineato a sinistra dato che, in quanto occidentali, leggiamo da sinistra a destra e ci fa comodo che la riga cominci sempre nello stesso punto, mentre il fatto che finisca in punti diversi ci dà un punto di riferimento (come per la stampa, l’allineamento centrato va bene solo per le poesie o i testi delle canzoni).

Infine l’interlinea non è un parametro con cui giocare per fare in modo che il testo occupi meno spazio, di default ha un valore del 120% del corpo della font, che è anche il valore più indicato per evitare che le linee si sovrappongano una all’altra o che ci sia uno spazio esagerato tra due righe.

Testare la leggibilità

Spesso noi web-designer creiamo la struttura del sito con una font che ci piace (o piace al cliente), ad una dimensione che riteniamo piacevole alla vista, testando il tutto col solito “Lorem ipsum”. Questo può andar bene per una “fase alfa” del progetto, ma quando realmente bisogna controllare se una font e la dimensione scelta di default sono adatte, bisogna provare a far leggere i testi reali a una persona che non sia né tu, né tantomeno il cliente: in parole povere, una persona che non conosce i testi, per non trovarsi poi in situazioni sgradevoli.

Tu quale font trovi sia più leggibile e quale preferisci per i tuoi progetti? Cerchi di inserire un testo lunghissimo in uno spazio ridotto o lasci che il testo occupi lo spazio di cui necessita?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Appassionata di web-design e web-designer di professione, ha una conoscenza approfondita dell'(x)HTML/CSS, ama sperimentare script in PHP e javascript ed è sempre pronta ad apprendere nuove tecniche. Per i siti preferisce uno stile sobrio con particolare attenzione all'accessibilità e all'usabilità, e soprattutto a quello che c'è sotto la scocca: il codice, rigorosamente standard.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

17 commenti

  1. Pedro
  2. Marco

Trackback e pingback

  1. Tweets that mention Accessibilità: il tuo sito è leggibile? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Roberto Sarti, Anna Pallotti, Nicola Carmignani, yesWEBcan, mtx_maurizio and others. mtx_maurizio said: …
  2. I migliori post della settimana #99 | Web Developer / Web Designer / SEO Specialist / Napoli :: EmaWebDesign
    [...] 03) Accessibilità: il tuo sito è leggibile? [...]
  3. Usabilità: Come Scrivere per il Web? | Your Inspiration Web
    [...] innanzitutto saper dare una giusta formattazione al testo, in modo che leggere sia effettivamente [...]

Lascia un Commento

Current day month ye@r *