tradotto dall’articolo originale di David Leggett.
Chiarezza e leggibilità sono entrambe aree di interesse nel campo dell’accessibilità e della tipografia, ed esistono molte risorse che cercano di definire ciò che rende un testo ben fatto. In questo post passerò in rassegna alcuni modi, nuovi e poco considerati, per rendere un testo sul web più leggibile.
Questi consigli aiuteranno a rendere il tuo design più leggibile per i lettori a video.
1. Aggiungi l’ombra al testo per i font personalizzati
Con un numero sempre crescente di web font tra cui scegliere e nuovi modi per implementare font personalizzati nei siti tramite CSS invece che Javascript o Flash, è diventato sempre più comune distanziarsi dai font comuni, optando per font che permettono di definire un brand più unico e coerente.
Questo è ottimo per molti motivi, e non pochi produttori di font hanno già cominciato a vendere licenze per i web font, rendendo considerevole il potenziale di font personalizzati. Comunque, per il momento, ci sono dei lati negativi.
Forse il problema maggiormente sottovalutato nell’utilizzo di questi web font è il rendering su i diversi dispositivi. Alcuni dispositivi, come i computer Apple più recenti, applicano un antialiasing ai font che favorisce fortemente la riproduzione delle lettere con una perfezione al pixel, mentre gli altri sistemi (come i computer Windows) riproducono i font in una maniera che favorisce caratteri più leggibili al costo di avere la forma delle lettere non precisa. In breve, questo significa che i font hanno un aspetto considerevolmente diverso dai sistemi operativi Apple a quelli Windows.
Per molti web font comuni, non c’è molto da preoccuparsi. Questi font vengono rappresentati bene sul web come sono. Per i nuovi web font personalizzati, questo diventa invece una preoccupazione, dato che non sempre vengono rappresentati come ci si aspetta tra i vari dispositivi (o anche tra i diversi browser). Per esempio, guardate come la libreria di font Typekit renderizza con i diversi setup:
I browser che utilizzano il sistema di rendering dei font tradizionale di Windows a volte renderizzano i font personalizzati in maniera da far sembrare che abbiano dei bordi seghettati.
Sembra che ci siano diverse opinioni su queste specifiche incongruenze tra browser e sistemi operativi. Alcuni pensano che le forme dei font dovrebbero essere ottimizzate per la leggibilità, mentre altri preferiscono l’approccio in cui le lettere sono riprodotte esattamente come si voleva visualizzarle. Altri suggeriscono che il problema sia nei font che non hanno un hinting adeguato.
In ogni caso, c’è un modo semplice per creare font personalizzati lisci in alcuni casi a prescindere dalle impostazioni di rendering. Aggiungendo semplicemente un’ombra del testo di 1px o più, i font personalizzati spesso diventeranno più leggibili in configurazioni come Chrome su Windows 7. Guardate l’esempio qui sotto:
In questo esempio, Droid Serif è renderizzato senza usare l’ombra del testo (su) e con un’ombra trasparente di 1px (sotto).
Questo è facilmente implementabile nel CSS:
h1 { /* Your selector */
font-family:”Some Custom Font”, serif;
text-shadow:0 0 1px transparent;
/* Or, if you need to apply a 0px hard shadow,
* you can use multiple text shadows */
text-shadow:0 0 0 #f00, 0 0 1px transparent;
}
In futuro, è probabile che questo problema verrà risolto con proprietà CSS come il font-smoothing, o dai browser sviluppando il loro motore per il rendering dei font. Per esempio, IE9 ha fatto grandi progressi al suo font rendering con l’hardware-acceleration, che utilizza “DirectWrite, ClearType e il posizionamento sub-pixel per migliorare la qualità e la leggibilità dei font”. Prima che il problema passi in secondo piano bisogna sottolineare che aggiungere l’ombra al testo non risolve il problema nel 100% dei casi. Alcuni font semplicemente non verranno renderizzati bene tra browser diversi e di diverse dimensioni, e devono essere testati per assicurarsi che possano essere letti bene (soprattutto nel caso di testi lunghi).
2. Usare la proprietà CSS “text-rendering”
Questa è una proprietà CSS relativamente nuova, che ancora non è supportata da tutti i browser. Usando la proprietà text-rendering è possibile migliorare la velocita di rendering, la leggibilità e in un futuro anche enfatizzare la precisione geometrica dei caratteri renderizzati. Al momento text-rendering puó essere utilizzata per ottimizzare la leggibilità in Webkit e Firefox 3. Impostando il valore della proprietà a “optimizeLegibility”, verrà migliorata la leggibilità, a volte attivando le legature o aggiustando il kerning del carattere.
Anthony Kolber ha creato un’utile demo per vedere come optimizeLegibility modifichi il carattere quando è di grandi dimensioni.
3. Scelta del numero di parole/caratteri per riga
Stabilire il numero di caratteri per riga e l’interlinea adeguata è una materia molto dibattuta. Mentre alcuni suggeriscono che 45-75 caratteri per riga sia la lunghezza ideale, altri studi dimostrano che le righe più lunghe possono avere l’effetto di velocizzare la lettura. Anche se le righe più lunghe vengono lette più velocemente, i lettori riferiscono di preferire le righe più corte.
Può darsi che esista veramente un numero perfetto di caratteri per riga e semplicemente non l’abbiamo ancora trovato (o almeno non ci siamo messi d’accordo su di esso), ma è quasi certamente legato ad altre proprietà come l’interlinea. L’interlinea (spaziatura tra le righe), o altezza della riga, stabilisce l’altezza di una riga di testo. Una riga più alta significa più spazio tra le righe.
L’interlinea influisce molto sull’aspetto di grossi blocchi di testo.
A seconda del font usato, la dimensione del font, e altre proprietà, può essere necessario aggiustare l’altezza della riga, ma è di comune accordo che righe più lunge richiedono un interlinea maggiore.
Sistemare l’altezza delle righe di blocchi di testo è molto semplice con il CSS:
p { /* Your selector */
line-height:24px; /* This could also use other units such as “em” */
}
4. Scegliere testo con un contrasto adatto
La scelta di una combinazione tra colore e luminosità del font e del background è un’altra materia dibattuta per i supporti video. Un punto su cui in genere si è tutti d’accordo è che il testo debba soddisfare un rapporto minimo di contrasto per essere letto efficacemente da un ampio pubblico.
Secondo le Linee Guida del Web Content Accessibility (WCAG20), il testo deve avere un contrasto minimo di 4.5:1:
“Un contrasto 3:1 è il livello minimo consigliato dalla ISO-9241-3 e da ANSI-HFES-100-1988 per testo standard e visione standard. Il rapporto 4.5:1 è utilizzato per un’acuità visiva moderatamente bassa, per il daltonismo congenito o acquisito, o la perdita di sensibilità al contrasto che tipicamente sopraggiunge con l’età.” – w3.org
Stabilire il contrasto di due colori (colore del testo e del background) è presto fatto con uno strumento online. Il rapporto di contrasto è stabilito dal confronto tra la luminosità relativa del testo e del colore di sfondo.
Mentre queste regole implicano che, alla fine, sia meglio un alto contrasto, alcuni suggeriscono che un contrasto troppo alto danneggi la lettura e usano sfondi bianco sporco o un carattere non nerissimo al posto del nero su bianco al 100%. A questo proposito però non ci sono molti dati. Poche fonti sostengono che troppo contrasto possa essere difficoltoso per i lettori dislessici. Con queste considerazioni in testa, alcuni designer scelgono di usare un #333 al posto del #000 (o neri simili) nel tentativo di rendere la lettura più piacevole.
Un esempio dell’utilizzo del testo non nerissimo (#333) su uno sfondo bianco dal Blog di Google.
Risorse utili
Elementi di stile tipografico è lodato dai più come una risorsa incredibilmente utile per la grafica e la tipografia per designer. Robert Bringhurst fa un lavoro magnifico insegnando i fondamenti dello stile tipografico, e molte delle informazioni presenti nel libro possono tornare utili quando si disegna per il web.
WCAG 2.0 fornisce suggerimenti per rendere il contenuto sul web più accessibile. Nonostante non sia proprio amato da tutti, le linee guida del WCAG sembrano essere ancora in gran parte le più utili.
L’effetto della lunghezza della riga sulla lettura di news online è uno studio che esamina “gli effetti della lunghezza della riga sulla velocità di lettura, la comprensione e la soddisfazione dell’utente di un articolo online”. Nonostante sia una lettura interessante, lo studio ha come campione solamente 20 studenti in età da college, cosa che chiaramente non lo rende valido per tutti i lettori.
Sull’autore
David (TheLeggett) Leggett è un giovane imprenditore che si è specializzato nel costruire imprese di successo online. Per 7 anni, David ha fatto il designer, sviluppando e gestendo progetti come lavoratore autonomo. Dai forti valori, un’etica del lavoro inesorabile, e uno spassionato amore per l’auto-apprendimento, il Sig. Leggett si è costruito una carriera dall’età di 15 anni, con poca considerazione per il posto di lavoro convenzionale.
Commenti recenti