Font e scrittura web: i migliori consigli per rendere il sito più leggibile

Per gli esperti di web design e di interfacce utenti, l’opinione è pressoché unanime: nel perseguire l’efficacia e, di conseguenza, il successo di un sito web, il ruolo che i font (i caratteri dei testi) rivestono è fondamentale, addirittura essenziale.

Pertanto, nella sua progettazione è necessario che il carattere giusto, il più adatto, venga scelto con cognizione di causa.

Questo perché un font selezionato con cura può dare un contributo molto importante nel trasmettere l’identità e la personalità del sito (e quindi dell’azienda a cui afferisce) e nel dare un messaggio più chiaro e di ciò che si intende veicolare tra le sue pagine.

La prima cosa da fare pertanto è sicuramente chiarire che cosa sono esattamente i web font, per poi arrivare a smarcare una serie di questioni tecniche che, per esempio, riguardano dove è possibile trovarli, quali di essi sono compatibili con l’Html e sono web safe, cioè possono essere utilizzati su qualsiasi sito e visualizzati su ogni dispositivo senza generare errori.

Che cosa sono i web font

La storia della tipografia è vecchia come il mondo, ma il vero e proprio concetto di font nasce con l’affermazione del personal computer nella sua veste di strumento di massa per la produttività individuale.

Va poi incontro a un’impennata di popolarità (e di utilizzo) con l’avvento di Internet, quando i caratteri che prima di allora erano utilizzati in prevalenza su carta richiamano l’esigenza di uno speciale trattamento per renderli leggibili anche sugli schermi digitali.

Nel loro studio, più in generale, si comincia a tener conto di diversi altri aspetti che hanno a che fare, per esempio, con l’esperienza utente e con la velocità di caricamento delle pagine web.

Dopodiché, via via, oltre al “fattore forma” ne entrano in gioco molti altri, tra i quali vale per esempio citare la dimensione e la convivenza di più font nella stessa pagina. Nel primo caso, se il font è troppo piccolo, il lettore non regge a lungo lo sforzo necessario alla lettura e il rischio che abbandoni la pagina aumenta; qualora sia, invece, troppo grande, può essere percepito come “urlato”, quindi troppo aggressivo. Nell’altro, la pratica migliore è quella di individuare un massimo di due o tre font per garantire uniformità e chiarezza in tutto il sito.

Quando poi, la situazione sembrava aver raggiunto una certa stabilità, ecco che sono entrati in gioco anche gli smartphone e i tablet con le loro rispettive molteplicità di forme e dimensioni, generando una nuova fase di complicazione.

In tutto questo cambiamento, la scelta pressoché obbligata per un sito, oggi, è quella che passa sotto il nome di web font, caratteri tipografici creati apposta per dare il meglio su Internet. Possono essere stilizzati con i fogli di stile CSS e offrire supporto per altre condizioni come il rendering da destra a sinistra

Per essere utilizzati, devono essere caricati su un server oppure implementati mediante un servizio di web font hosting che permetta di incorporarli per via diretta senza che sia necessario effettuare altre operazioni.

Dove trovarli

Negli ultimi anni, a conquistare il primato del miglior luogo da cui partire per l’approvvigionamento di font è stato l’omonimo servizio offerto da Google. Si tratta di una risorsa gratuita e ben fornita.

Prima dell’ingresso in scena di Google Fonts, la più in voga tra le repository gratuite era senz’altro Font Squirrel.

Un’altra ottima opzione è Adobe Fonts, che offre migliaia di articoli scaricabili con licenza Creative Cloud e quindi utilizzabili in qualsiasi tipologia di progetto, sia personale che commerciale.

Fonts.com è un grande classico, molto fornito, ma occorre prestare attenzione al tipo di licenza relativa a ogni singolo codice da integrare nel sito.

Dalle caratteristiche molto simili a quello appena descritto c’è, infine, TypeNetwok.

Grazie e bastoni

Esistono diversi tipi e categorie di caratteri, e ogni variante può essere più o meno adatta alla comunicazione che si intende impostare: alcuni caratteri sono più elaborati, altri più semplici e versatili; ci sono font ideali per una presentazione accattivante, altri più adatti a testi di una certa lunghezza.

La macro suddivisione più generale li distingue in Serif e Sans-Serif. I primi, detti anche “con grazie” dove quest’ultimo termine si riferisce all’appendice in alto o in basso della lettera, la grazia, appunto, hanno un passato autorevole nella tipografia tradizionale, ma risultano meno leggibili su monitor e display.

D’altro canto, però, si caratterizzano per una maggiore accessibilità, poiché le grazie permettono di distinguere meglio alcune lettere che si assomigliano tra loro riducendo il rischio di genere equivoci o difficoltà nella lettura.

D’altra parte i Sans-Serif, privi di grazie e detti anche “bastoni” sono più semplici e hanno una resa migliore nella lettura a schermo.

I font sicuri per il web

“Graziati” o meno, i web font sono innumerevoli. Ma non è detto che tutti garantiscano una visualizzazione corretta sul sito, con il rischio di ritrovarsi una pagina rotta o vuota.

Per questo motivo, la scelta più ragionevole è di affidarsi solo a font sicuri per il web, i cosiddetti web safe, che si trovano preinstallati sulla maggior parte dei sistemi e che, come tali azzerano ogni eventualità negativa. Oltre a questo, tra tutti i font sono quelli che si caricano più velocemente in assoluto.

I font web safe più diffusi

I Sans-Serif

Arial: è uno dei font più utilizzati. È adatto sia per un utilizzo in testi molto lunghi, che per i titoli, nella stragrande maggioranza dei contesti, dai più formali ai meno istituzionali.

Calibri: rappresenta da oltre un decennio lo standard usato da Microsoft nei suoi pacchetti per la produttività individuale.

Helvetica: è il font più usato di tutti i tempi ispirato ai caratteri tipografici svizzeri e tedeschi di fine 1800 e 1900.

Impact: ha un tratto molto spesso che ricorda il grassetto ed è, pertanto, poco utilizzabile quando si ha a che fare con testi corposi. È, invece, ottimo per i titoli.

Lucida Sans: pulito e ben riconoscibile, si rivela però poco adatto a testi lunghi.

Segoe UI: è usato moltissimo da Microsoft, e si caratterizza in modo particolare ai testi di carattere professionale.

Verdana: creato nel 1996 da Microsoft ha dalla sua una grande versatilità ed è supportato anche dai dispositivi e dai browser più datati.

I Serif

Georgia: sviluppato da Microsoft nel 1996, è supportato da ogni versione di Windows e macOS.

Palatino: molto utilizzato nell’editoria online.

Stack di font: che cosa sono e perché sono importanti

Noti anche come font di riserva, sono, letteralmente, un raggruppamento di font nel quale è possibile avere una sequenza di caratteri di riserva in sequenza, quando si utilizza un font poco “safe” per l’esigenza di essere più creativi e fuori dallo standard.

La loro utilità si manifesta nel fatto di dare la possibilità di non mostrare errori di visualizzazione qualora quello principale dovesse fallire.