La scelta del font nel web design è un passo molto importante da compiere, perché come diceva un famoso blog post di iA, «il 95% dell'informazioni sul Web sono testuali».
Ecco un breve elenco delle famiglie di font predefinite residenti nella maggior parte dei sistemi operativi:
Arial, Helvetica, Trebuchet, Verdana, Lucida,
Times New Roman, Georgia, Palatino,
CourierNello specifico possiamo fare un ulteriore distinzione fra generi di famiglie di font che possiamo specificare in una pagina web:
| Genere | Font | Nota |
|---|---|---|
| serif (con grazie) | Times New Roman, Georgia o Palatino | I font serif, graziati vanno bene per i documenti stampati, ma sono meno leggibili sullo schermo di un computer. |
| sans‐serif (senza grazie) | Arial, Helvetica, Trebuchet, Lucida e Verdana | Arial e Helvetica sono le più usate online, perchè godono di ottima leggibilità e compatibilità multipiattaforma. |
| cursive (corsivi) | Arabic | Il supporto standard di font corsivi come l'handwritten 'Arabic' o fantasia come 'Symbolix' è molto limitato. Meglio inserire web fonts di questo genere solo via CSS @font-face. |
| fantasy (fantasia) | Symbolix | |
| monospace (monospaziati) |
Courier | Sono font a larghezza fissa. Le lettere non hanno kerning ma sono spaziate tutte con la medesima distanza. I monospaziati sono i caratteri tipici di una vecchia macchina da scrivere e sono utilizzati principalmente sul Web per pubblicare snippet di codice (tutorial, tecniche, guide, ecc.). Testi molto lunghi sono difficilmente leggibili e stancano la vista. |
Leggibilità dei caratteri sul monitor
La leggibilità di un font dipende molto dalla cosiddetta "altezza x" (l'altezza di una 'x' minuscola), dalla dimensione generale del carattere e da altri fattori.
Un font come 'Times New Roman' ha, per esempio, una leggibilità media sullo schermo del computer perché ha un'altezza x moderata.
Invece un carattere come Verdana, che è stato progettato proprio per essere letto su schermo, infatti ha un'altezza x esagerata ed è molto grande, se paragonato a tipi di caratteri più tradizionali con la stessa dimensione di punti.
Per risolvere questo inconveniente, possiamo offrire all'utente una scelta di caratteri. Possiamo infatti associare ad una pagina una lista di caratteri. Se il browser dell'utente non trova il primo carattere elencato, tenta con il successivo e così via.
Il consiglio del Web Designer
Meglio utilizzare sempre pochi font e poche dimensioni: le pagine avranno un aspetto più chiaro. Inoltre, per dare uniformità, evirare cambiamenti casuali e applicare lo stesso tipo di carattere e la stessa combinazione di stili in tutte le pagine del sito.