fonts_mc0aiwOO4C1rj0wodo1_1280

La scelta di un font è fortemente condizionata dalla leggibilità. Questo fattore è per ovvie ragioni quello più importante in assoluto, specialmente se parliamo di siti web. La lettura sullo schermo può essere infatti particolarmente faticosa se non viene utilizzato il carattere adatto. Anche l’interlinea -lo spazio bianco tra due righe di testo- è determinante, come pure la lunghezza di riga. Questi tre fattori sono dipendenti l’uno dall’altro. Partiamo da alcune regole generali.
Solitamente l’interlinea corrisponde al 120% delle dimensioni del font utilizzato. Pertanto, a titolo d’esempio, se il carattere scelto ha dimensione 10px, l’interlinea deve essere 12px.
La lunghezza di riga determina quanto lo sguardo debba spostarsi per procedere dall’inizio alla fine di una stessa riga di testo. Come valore ottimale viene consigliato un range di caratteri per riga che va da 30 a 60.
Chiaramente è solo un punto di partenza per iniziare a ragionare e non è detto che sia sempre opportuno applicare queste regole. Dipende dalla situazione e comunque, al di là dei numeri, niente è meglio dell’esperienza. In altre parole, compreso che un carattere troppo piccolo, una lunghezza di riga eccessiva ed un’interlinea insufficiente rendono la lettura di un testo estremamente faticosa, non c’è di meglio che fare dei test e individuare quale combinazione risulta più confortevole.

Una prima valutazione possiamo farla con Typetester. Typetester è un interessante tool online che consente di paragonare la resa a schermo di tre tipi di font, ciascuno dei quali viene utilizzato come carattere di paragrafo. I contenuti vengono disposti su tre colonne e si possono modificare diverse proprietà, come ad esempio le dimensioni del font e l’interlinea.

Una volta scelto il font da utilizzare (e ce ne vorrà), consiglio di spendere qualche altra decina di minuti ripetendo alcune prove (o facendone di nuove) direttamente sulla pagina web sulla quale stiamo lavorando (che avrà un layout differente da Typesetter).
Per modificare rapidamente il foglio di stile e osservare i risultati in tempo reale si può utilizzare Firebug (se come browser abbiamo Firexox), oppure lo strumento per sviluppatori di Chromium o ancora l’equivalente di Opera (Dragonfly). Cambiando al volo la proprietà font-family nel CSS si potrà valutare ulteriormente come i diversi font rendono non solo sullo schermo ma anche in relazione alla nostra pagina web.