Web Safe Font: cosa sono, a cosa servono e quali usare

Ti sarà sicuramente capitato di sentir parlare dei Web Safe Font (anche chiamati System Font). La traduzione letterare del nome fa pensare a qualcosa legato alla sicurezza in senso stretto, che in realtà c’entra ben poco con i font.

I Web Safe Font sono caratteri tipografici che si trovano preinstallati sulla quasi totatilità dei sistemi operativi. Quando usi uno di questi font nel tuo sito, hai la ragionevole certezza che il visitatore lo visualizzerà correttamente, indipendentemente da problemi di connessione e dal fatto che stia navigando da Windows, macOS, Linux, Android o iOS.

Come vengono caricati i font dal browser

Quando il browser carica la pagina, richiede al server tutti i file necessari per la corretta renderizzazione e visualizzazione, tra cui anche i file dei font. Il font può essere scaricato direttamente dal server in cui è ospitato il sito web (e si parla di font locali) oppure da server di proprietà di terzi (il più famoso è Google Font).

Se il browser, per un errore, per problema del server o lentezza di connessione non riesce a scaricare e renderizzare correttamente il font impostato in fase di sviluppo, ripiegherà su un carattere di fallback (ovvero di ripiego “ripiego”).

Il font di fallback è un font che è stato scelto dal browser e che a sua volta è stato selezionato dall’utente. Hai mai notato che dalle impostazioni del tuo browser è possibile impostare un font? Ecco, quello è il font di fallback, che può essere scelto tra tutti i font installati sul computer e che è impossibile non vengano caricati.

Visto che la scelta del font per un sito web è molto importamte a livello di comunicativo (font diversi comunicano in modo diverso), cosa succede sel il font di fallback impostato dall’utente è il Comic Sans e il tuo font non viene caricato? Il risultato è molto discutibile.

I Web Safe Font

È in questo caso che i Web Safe Font ci vengono in aiuto. Possono essere considerati font di fallback, cioè di ripiego, e si posizionano tra il font specifico scelto da noi e quello di fallback preso dal browser. Essendo font estremamente diffusi su tutti i sistemi operativi, impostarli ci permette di avere il controllo di quello che l’utente visualizzarà. Se è vero che non verrà visualizzato il font che avevamo scelto in fase di sviluppo grafico, almeno il font che verrà visualizzato sarà scelto da noi, e permetterà comunque di avere un risultato ottimale.

Prima dell’arrivo dei web font (servizi come Google Fonts o Adobe Fonts), i Web Safe Font erano l’unica opzione affidabile per controllare la tipografia di un sito. Ci si limitava a utilizzare caratteri che avrebbero funzionato sui computer di tutti gli utenti, cioè quei pochi font installati di default su Mac, Windows e Linux (era un’epoca in cui novigare con il cellulare non era questa grande esperienza).

Oggi i Web Safe Font rimangono fondamentali per due motivi: come fallback nella dichiarazione font-family e per chi vuole evitare richieste HTTP aggiuntive, migliorando così le performance del sito.

Vantaggi in termini di performance

Usare un Web Safe Font come scelta principale (non solo come fallback) permette di ottimizzare i tempi di caricamento. Se il font è già presente sul dispositivo del visitatore, non c’è necessità di scaricarlo, il che si traduce in tempi di caricamento migliori.

Se però usi i Web Safe Font perché è l’uncio modo che hai di ottere performance decenti sul tuo sito, probabilmente c’è qualche altro problema da analizzare e risolvere. Se invece l’obiettivo è l’iper-ottimizzazione, utilizzarli può essere una scelta sensata.

I Web Safe Font raccomandati dal W3C

Il W3C (World Wide Web Consortium), l’ente internazionale che da le linee guida per lo sviluppo web, fornisce un elenco di Web Safe Font, cioè dei font ritenuti più diffusi a livello mondiale e che si trovano su tutti i computer.

I font selezionati dal W3C sono:

In realtà esistono tanti font che possono essere considerati safe, cioè talmente diffusi che è improbabile che non siano presenti sul computer di un utente. Mi vengono in mente Calibri, Helvetica o Lucida Sans. Farne un elenco completo è quasi impossibile.

I Google Font sono Web Safe Font?

No, i Google Font non sono Web Safe Font. Google Fonts è una libreria di caratteri tipografici dove trovare migliaia di font gratuiti. Ma questi font devono essere scaricati dal server di Google oppure dal tuo server se li hai salvati in locale.

Non essendo preinstallati sui sistemi operativi, i Google Font non possono essere considerati Web Safe. Sono affidabili? Sì. Ma richiedono comunque una richiesta HTTPS per essere caricati, renderizzati e visualizzati. Se c’è un problema di connessione, il font non si carica.

Come usare correttamente Web Safe Font e font di fallback

La pratica migliore è costruire uno stack di font (cioè una “pila” di font) che parta dalla tua scelta preferita fino ad arrivare ad alternative sempre più comuni, concludendo con la famiglia generica.

Ti faccio un esempio:

font-family: Hind, Arial, sans-serif;

font-family è la proprioetà CSS che definisce il font da usare in tutto il sito o in un determinato elemento. Viene applicata al foglio di stile durante lo sviluppo, oppure è quello che inserisce il vostro page builder di fiducia quando scegliere il font dal menu a tendina.

In ordine:

Hind è quello scelto per il sito. È caricato sul serve dove è ospitato il sito e viene usato come primo font durante il rendering.

Arial è il Web Safe Font, cioè il font che verrà utilizzato, nel caso dovessero esserci problemi con il font princiale. Arial è un font estremamente diffuso, quindi verosibilmente verrà visualizzato senza problemi, ma potrebbe succede che un utente sul suo computer ha disinstallato per volontà o errore proprio Arial, il font che ho scelto io come Web Safe Font. La probabità che succeda è molto bassa, ma non è nulla.

Sans-serif è il font di fallback. Quindi il font che ho scelto io non viene caricato, quello “safe” da lo stesso problema, quindi cosa fa il browser? Sceglie il font di fallback, cioè il font che l’utente ha scelto dalle impostazioni del proprio browser. Ma se non ho il controllo del font, voglio almeno che sia senza grazie, quindi do l’indicazione sans-serif. Le indicazioni del font di fallback sono varie. Le principali sono: serif (font con grazie), sans-serif (font senza grazie), monospace (larghezza fissa), cursive (corsivo) e fantasy (decorativo).

In questo modo, se il primo font non è disponibile, il browser passa al successivo, garantendo sempre un risultato controllato.

Ora che sai tutto sui Web Safe Font

I web safe font non sono la soluzione più elegante per chi cerca originalità tipografica, ma restano uno strumento essenziale per garantire performance e affidabilità. Anche quando usi web font personalizzati, includere un buon fallback web safe è una questione di rispetto verso l’utente e la sua esperienza di navigazione.