I caratteri stampati su carta e quelli visualizzati a monitor hanno differenze che non bisogna trascurare, analizziamo quindi le possibilità tipografiche offerte dagli strumenti per il Web, per migliorare l'aspetto delle pagine e permettere una migliore fruibilità dei testi.
Iniziamo col riepilogare alcuni concetti:
- I caratteri possono cambiare la loro resa a seconda del dispositivo o del browser che utilizza il lettore (smartphone, ebook-reader, tablet, TV, etc.). I casi sono diversi, dalle font che possono essere sostituite, al rendering su schermi e-ink in bianco e nero.
- Le aree non hanno dimensioni fisse. Rispetto alle pagine dei libri o delle riviste, i testi posso essere zoommati, riadattati o utilizzare un font di sistema che rimpiazza il bellissimo font che avevamo scelto nel mockup.
- La risoluzione del monitor è molto più bassa rispetto alla definizione della carta stampata. Un monitor desktop non ha la medesima risoluzione di un display ad alta risoluzione (high DPI definition) come il retina display dell'iPhone 4(S) per esempio. I risultati quindi potranno essere molteplici e addirittura difformi.
La vista si stanca molto più facilmente leggendo un testo a monitor. Considera che testi molto lunghi sono difficili da leggere senza affaticare la vista e che la giustificazione dei paragrafi e i font sans-serif spesso aumentano la difficoltà di lettura.
Aumentare la leggibilità delle pagine
In un sito, il cui contenuto è rappresentato prevalentemente da testo, la tipografia è uno strumento fondamentale per organizzare anche la grafica. Per questo cerchiamo di non riempire le pagine con un testo denso: meglio organizzare le schermate fornendo sempre un minimo di contrasto con un giusto equilibrio tra grafica e testo facilitando la comprensione dell'organizzazione delle informazioni.
Un buon uso dei margini e dello spazio bianco aumenta la leggibilità di una pagina web quindi si possono utilizzare per diversificare il testo principale da altri elementi della pagina.
Per catturare l'attenzione su puo attirare l'occhio del lettore attraverso un giusto "movimento" del testo: a volte bastano piccole modifiche per creare contrasto visivo. Abbiamo a disposizione strumenti tipografici consolidati che permettono di dare risalto o enfasi ad un blocco di testo, ma è importante farne un uso oculato e non utilizzarli in modo errato.
| Strumento | Descrizione |
|---|---|
| Grassetto | Conferisce risalto essendo in contrasto con il colore del testo normale. Il grassetto è abbastanza leggibile su schermo, ma è bene utlizzarlo per evidenziare singole parole e non intere frasi, altrimenti la sua funzione è vanificata. |
| Corsivo | Attira l'occhio perché è in contrasto con la forma del corpo del testo ma non è molto leggibile sullo schermo, da utilizzare per parole o frasi accentuate o straniere e comunque quando non se ne può proprio farne a meno. |
| Sottolineato | È una convenzione tipografica che risale ai tempi delle macchine da scrivere, quando il corsivo e il grassetto non erano disponibili. È buona norma evitare la sottolineatura nelle pagine Web poichè generalmente indica un collegamento ipertestuale e può generare confusione. |
| Barrato | Il testo barrato è utile solo a barrare del testo errato o non più disponibile. Esempi sono: un prodotto o un servizio non più disponibile, il prezzo pieno di un prodotto in sconto o informazioni pubblicate in un blog e poi corrette dall'autore. |
| Colorato | Generalmente, sul Web, un testo con un colore diverso da quello principale indica un link. Meglio cercare di dare lo stesso colore a tutti i link presenti nelle pagine. |
| Maiuscole | Il testo in lettere maiuscole è uno dei metodi più comuni e meno efficaci per aggiungere risalto tipografico. Ha più o meno la stessa funzione del grassetto, ma probabilmente non ha la sua stessa efficacia. Si può pensare di usarlo per dare risalto ad alcune parole quando non si può fare uso del grassetto, comunque non per grandi blocchi di testo. |
| Spaziatura tra paragrafi | Uno dei modi più efficaci e sottili per variare il contrasto visivo e l'importanza relativa di una porzione di testo consiste semplicemente nell'isolarla o trattarla in modo diverso rispetto al testo circostante. Si può dividere il testo in tanti piccoli blocchi e distanziarli leggermente tra loro: in questo modo sarà più facile leggerli e comprenderli. |
Gli allineamenti
Le opzioni di allineamento disponibili sul web sono quelle di allineamento standard:
- Giustificazione a destra
- Giustificazione al centro
- Giustificazione a sinistra
- Testo giustificato
La giustificazione a sinistra è l'opzione più leggibile per le pagine web, perché il margine sinistro è uniforme e prevedibile e quello destro è irregolare. L'irregolarità del margine destro aggiunge diversità e interesse alla pagina, senza interferire con la leggibilità.
Larghezza della colonna di testo
Anche i box di testo delle pagine possono avere resa diversa a seconda delle visualizzazioni, essa gioca un ruolo utile per la leggibilità. Naturalmente la regola principale è quella di ottenere sempre una buona armonia tra gli spazi. C'è chi sostiene che sia una buona ampiezza sia caratterizzata da circa 60/70 caratteri per riga.
