Tipografia Web e Leggibilità: Guida Pratica di Design
La leggibilità di una pagina dipende meno dal font che dalla lunghezza e altezza di riga. Guida pratica, con gli accenti italiani inclusi.
Team rabbitclipPubblicato: 5 min di lettura
In breve
La leggibilità di una pagina non dipende solo dalla scelta del font; la lunghezza di riga e l'altezza di riga contano almeno quanto il font, così come la scala delle dimensioni. Lo standard WCAG raccomanda un'altezza di riga di almeno 1,5 volte la dimensione del font in un paragrafo, e si aspetta che questa impostazione possa adattarsi alla preferenza personale di un utente (W3C WCAG 2.1, Text Spacing).
Per un sito in italiano, le lettere accentate (à, è, é, ì, ò, ù) meritano un controllo a parte; non tutti i font le disegnano con la stessa qualità, e in alcuni l'accento sopra la e può risultare troppo piccolo o disallineato. È il tipo di dettaglio che sfugge in fase di design ma incide direttamente sulla leggibilità.
Di seguito quattro argomenti: scelta del font, scala delle dimensioni, lunghezza di riga e controllo delle lettere accentate.
Cosa guardare nella scelta di un font
Un font per il testo continuo ha bisogno di una larghezza media e di forme delle lettere pulite, così che i paragrafi lunghi non affatichino l'occhio; un font per i titoli può portare più carattere del marchio, perché un testo breve comporta meno rischi di leggibilità. I due non devono venire dalla stessa famiglia; due font ben abbinati funzionano di solito meglio che forzarne uno solo a svolgere entrambi i compiti.
Se sul sito di uno studio legale viene usato un font sottile e decorativo nel testo continuo, passaggi lunghi come le clausole contrattuali diventano difficili da leggere; il font decorativo può restare sui titoli mentre il testo continuo passa a qualcosa di più sobrio.
Scala: quante dimensioni bastano
Una scala chiara su tre o quattro livelli (titolo, sottotitolo, testo continuo, nota piccola) funziona meglio di cinque o sei dimensioni appena diverse; offre sia coerenza sia una regola chiara per lo sviluppatore. Ogni livello della scala dovrebbe essere nettamente più grande o più piccolo del precedente; dimensioni troppo vicine, come 16px e 17px, non si notano visivamente, aggiungono solo confusione.
Perché la lunghezza di riga conta
Troppi caratteri su una riga, e l'occhio fatica a trovare l'inizio della successiva; troppo pochi, e l'occhio salta continuamente riga, spezzando il ritmo di lettura. Un intervallo che funziona bene va dai sessanta agli ottanta caratteri per riga, il che significa che il testo dovrebbe stare in una colonna limitata su uno schermo largo, non estendersi a tutta larghezza.
Se la pagina di documentazione tecnica di un produttore di pavimenti lascia che il testo si estenda su tutto lo schermo, le righe possono superare i duecento caratteri su un monitor largo; la soluzione è fissare il contenuto a una larghezza di colonna definita e lasciare il resto dello spazio vuoto o occupato da un'immagine.
Come controllare le lettere accentate
Prima di scegliere un font, tutte le lettere accentate usate in titoli e testo continuo vanno testate con contenuti reali, non solo con un testo segnaposto in inglese. In alcuni font l'accento sopra la e risulta troppo piccolo, in altri quello sopra la ò appare disallineato; questi dettagli si notano solo quando il testo viene ingrandito a schermo.
- Titoli e testo continuo anteprima con contenuti reali in italiano
- Lettere accentate (à, è, é, ì, ò, ù) controllate a più dimensioni
- Peso grassetto (bold) controllato sugli stessi caratteri
- Leggibilità in dimensione mobile ridotta testata separatamente
Rispettare la preferenza personale del visitatore
Alcuni visitatori aumentano la dimensione del testo dalle impostazioni del browser; un sito costruito con valori in pixel fissi blocca questa preferenza. Definire le dimensioni in unità flessibili, come rem, permette che l'impostazione personale di un visitatore funzioni anche sul sito; è un passo piccolo ma pratico per l'accessibilità e per i visitatori con vista ridotta.
Come i font variabili aiutano la velocità
In una configurazione tradizionale, ogni peso del font (sottile, normale, grassetto) è un file a sé; un font variabile (variable font) racchiude tutti i pesi in un unico file, e il browser genera il peso di cui ha bisogno da quel solo file. Questo significa un unico download invece di cinque o sei.
Per un marchio che usa tre o quattro pesi diversi, una configurazione a font variabile riduce sia la dimensione totale del file sia dà al designer la libertà di usare un peso intermedio, ad esempio tra normale e grassetto; la maggior parte dei browser attuali lo supporta, ma vale la pena tenere un fallback se conta ancora il supporto per browser più datati.
Cifre tabellari per numeri messi a confronto in colonna
Se i numeri in una tabella prezzi o in una scheda tecnica non si allineano colonna per colonna, l'occhio fatica a confrontarli. Questo di solito accade perché un font usa di default cifre proporzionali, dove ogni cifra occupa una larghezza diversa; attivare le cifre tabellari fa sì che ogni cifra abbia la stessa larghezza, e le colonne si allineano correttamente.
Nella tabella tecnica di un produttore di generatori, valori di potenza disallineati diventano notevolmente più leggibili non appena questa impostazione viene attivata; nella maggior parte dei font moderni basta una sola riga di CSS.
Questa impostazione non si limita alle tabelle; la stessa differenza si nota ovunque dei numeri vengano messi a confronto uno accanto all'altro, un listino prezzi, una data o un orario.
La leggibilità nasce dalla somma di scala, lunghezza di riga e un vero test dei caratteri, non da una singola decisione sul font. rabbitclip verifica questi quattro punti con contenuti reali su ogni sistema di design; la tipografia del sito attuale può essere rivista insieme.
Domande frequenti
Quanti font dovrebbe usare un sito?
Di solito due: uno per i titoli, uno per il testo continuo; oltre a questo la coerenza inizia a risentirne.
Perché la lunghezza di riga è limitata tra sessanta e ottanta caratteri?
Questo intervallo permette all'occhio di trovare facilmente l'inizio della riga successiva; righe più lunghe spezzano il ritmo di lettura.
Ogni font gestisce bene le lettere accentate?
No, alcuni font disegnano male à, è, é, ì, ò o ù; va controllato con contenuti reali prima di scegliere un font.
Con cosa dovrebbe essere definita la dimensione del font invece che in pixel?
Con un'unità flessibile come rem; così l'ingrandimento del browser di un visitatore continua a funzionare sul sito.
Ogni progetto dovrebbe usare un font variabile?
No, non se il design usa un solo peso; fa la differenza nei progetti che usano più pesi.
