Il carattere (font) del tuo sito internet: guida alla scelta consapevole e virtuosa

Un font vale l’altro sul web. Forse ti hanno già dato questa risposta per giustificare una scelta deliberata e soggettiva, senza scendere a compromessi. Solo per evitare discussioni sui massimi sistemi. In realtà non è così: capire quale font usare sul sito web è uno dei passaggi essenziali per migliorare l’intera esperienza utente. Questa decisione, il carattere tipografico delle pagine internet, influenza tutto, anche la SEO.

Oggi è sbagliato affrontare il tema della user experience come un tema isolato: una pagina che si lascia leggere facilmente, da desktop e da mobile, ha dei segnali positivi in termini di permanenza, interazione, ritorno degli utenti. Per ottenere questi risultati bisogna partire dalle basi, come il tempo di caricamento della pagina web e la scelta del font. Vale a dire il carattere tipografico che utilizziamo per scrivere e per comunicare i nostri contenuti migliori.

Guai a chi pensa solo alla lunghezza, alla densità e all’autorevolezza dei paragrafi testuali. Puoi pubblicare il miglior approfondimento del web ma se rimane non leggibile hai fatto un gran lavoro per nulla. Ecco perché oggi voglio spiegarti come scegliere il font, il carattere, da utilizzare sul tuo sito internet. Al fine di renderlo piacevole e fruibile ovunque.

La scelta di base: serif o sans serif?

Il primo scoglio da superare per decidere quale font utilizzare sul sito web: meglio un serif o un sans serif? Tradotto in termini concreti, utilizzeremo un carattere con le grazie o senza?

Il termine grazia intende quelle decorazioni che arricchiscono il carattere e che in alcuni casi possono diventare particolarmente impegnative.

L’esempio per eccellenza è il Times New Roman, il font classico per eccellenza ideato nel 1931 da Stanley Morison e disegnato da Victor Lardent, comparso per la prima volta il 3 ottobre 1932 sul quotidiano The Times.

Il concetto di sans serif, senza grazie, si posiziona all’esatto opposto: questi sono caratteri tipografici privi di grazie, che eliminano i prolungamenti e i tratti decorativi alle estremità delle lettere. Il font senza grazie ha dei tratti puliti, lineari e omogenei che rendono subito l’idea: qui c’è pulizia, ti offriamo un’estetica moderna, essenziale. Il minimalismo regna sovrano. Esempi classici sono Arial, Helvetica, Roboto e Open Sans.

Quale font scegliere per il sito web? Diciamo che è pacifica l’idea che il Sans Serif è ideale per un sito internet dato che questa soluzione garantisce massima leggibilità a risoluzioni basse o su display piccoli (come quelli degli smartphone), dove le grazie sottili rischierebbero di sgranare o affaticare la vista.

Il Sans Serif comunica modernità e chiarezza, quindi va scelto anche in base all’argomento affrontato: se, ad esempio, hai realizzato il sito web di un’agenzia di marketing userai quasi sicuramente un font senza grazie. Magari proprio un Verdana o un Helvetica. Il carattere con grazie, però, comunica autorevolezza, eleganza, tradizione e istituzionalità.

Quindi, ad esempio, sul sito di una facoltà universitaria o di un avvocato puoi prendere in considerazione anche dei formati con grazie come il typeface Georgia che prova a fondere l’autorevolezza del font con grazie con la pulizia di un classico carattere pulito.

Combinare due tipi di font sul sito web

Una domanda comune in molti progetti digitali: ho scelto un font, magari proprio un Sans serif. Posso avere anche un altro carattere per sezioni specifiche del portale? Sì, la combinazione più efficace è proprio quella di utilizzare un font Sans Serif per il corpo del testo, che garantisce facilità di lettura anche da mobile, e un Serif per i titoli per dare un tocco di carattere e personalità. Stiamo parlando di una pratica ben precisa: il font pairing, utile per creare gerarchia visiva e dare carattere alle pagine.

Cosa conviene evitare? L’uso di due font molto simili, tipo due Sans Serif come Helvetica e Verdana: sembrerà solo un errore di impaginazione e non una scelta stilistica. Altro consiglio che nasce dall’esperienza sul campo del web design strategico e della realizzazione dei siti internet ad alto potenziale di conversione: non andare oltre i due font. Piuttosto, se hai bisogno di ulteriori variazioni gioca sui pesi – bold, regular, light – della stessa famiglia anziché aggiungere un terzo o quarto font.

Scegliere i font dal punto di vista tecnico

La scelta del miglior font per il sito web non riguarda solo l’aspetto grafico e il design: devi considerare anche il punto di vista tecnico, quello dei SEO e degli sviluppatori.

In primo luogo, devi preferire dei font condivisi e visibili da tutti i browser: in tal caso si preferisce sempre utilizzare i font di sistema. Sono quelli già presenti nella memoria del dispositivo, il browser non deve scaricare alcun file esterno: il testo viene mostrato all’istante, con zero tempi di attesa e nessun problema di compatibilità. Ecco come si presenta l’implementazione di questa opzione nel CSS:

I vantaggi: impatto zero sulle prestazioni e sui tempi di caricamento, nessun problema in termini di Core Web Vitals. Il rovescio della medaglia è chiaro: la personalizzazione del font viene meno. Se hai bisogno di un font personalizzato come Inter, Roboto o magari Open Sans puoi garantire massima compatibilità e velocità con il formato .woff2 supportato da quasi tutti i browser moderni, e con una compressione del 30% superiore rispetto al vecchio formato .woff. Questo è fondamentale per aumentare la visibilità su Google.

Altri consigli per scegliere un font personalizzato e mantenere delle prestazioni elevate: scarica i file font e ospitali direttamente sul tuo server o sul CDN invece di richiamarli da server terzi, scarica solo il set di caratteri necessario, di solito il latino, eliminando cirillico, greco o altro ancora che non serve. Inoltre, conviene utilizzare la direttiva font-display: swap nel CSS per evitare il problema del testo invisibile durante il caricamento.

Scegliere il font per aumentare la leggibilità

Ora, andiamo al punto chiave della scelta di un font adeguato per migliorare la leggibilità: quale preferire? Di base, non sbagli se utilizzi un font bastoni (quindi senza grazie) tipo un Arial, un font Helvetica o un Verdana per il corpo del testo: questi caratteri offrono massima leggibilità per affrontare un testo piuttosto lungo. Ma devono essere accompagnati da una serie di attenzioni tipografiche:

• Dimensione del testo: il font size per il body sul web dovrebbe rispettare una dimensione minima di 16px. Meglio qualcosa in più se devi gestire siti ricchi di contenuti o blog, così ottieni una lettura ancora più comoda.
• Interlinea: ovvero il valore line height. La condizione ideale si posiziona tra 1.4 e 1.6 volte la dimensione del font. Un’interlinea troppo stretta sovrappone le righe, una troppo ampia disperde la lettura e ti fa perdere il filo.
• Lunghezza della riga: dovrebbe essere limitata tra 45 e 75 caratteri, spazi inclusi. Ovvero circa 10-15 parole. Righe troppo lunghe affaticano l’occhio nel ritrovare l’inizio della riga successiva.
• Contrasto e colore: serve un contrasto sufficiente tra testo e sfondo. Evita il nero puro su bianco assoluto che crea una condizione troppo rigida: meglio un grigio molto scuro (#222222 o #333333) su fondo panna.
• Gerarchia e pesi: usa al massimo 2 o 3 pesi, di solito preferisco il regolare per il testo, il bold per i titoli e i punti chiave. Evita di usare stili ultra-sottili (tipo thin o light) per i testi lunghi o a dimensioni ridotte.
• Spaziatura tra le lettere: il letter spacing può fare la differenza quando scegli il miglior font. Mantieni il valore di default per il corpo del testo, deve essere leggermente aumentato solo per i titoli in maiuscolo (ALL CAPS) per evitare che le lettere si sovrappongano.

Esiste un font migliore per aumentare la leggibilità di un sito web?

Escludendo una lista di caratteri standard che funzionano sempre bene – tipo Arial, Verdana, Helvetica – possiamo individuare dei font meno banali ma altrettanto utili a mantenere un sito web perfettamente visitabile e consultabile.

• Inter: massima chiarezza su schermi ad alta e bassa risoluzione.
• Atkinson Hyperlegible: facilita la distinzione di ogni singolo carattere.
• Roboto: neutro e geometrico, standard de facto per Google.
• Open Sans: struttura bilanciata per un’ottima leggibilità nei testi lunghi.
• System UI: prestazioni eccellenti e zero tempi di caricamento.
• Georgia: chiaro e distinto anche a dimensioni ridotte su monitor.
• Merriweather: lettere più larghe, pensate per la lettura digitale.
• Garamond: rilassante per gli occhi durante letture prolungate.

Esiste anche una classifica dei font da evitare assolutamente sul sito web? Di sicuro quelli molto articolati, tipo i caratteri gotici e con grazie molto sviluppate come Papyrus, Zapfino o Monotype Corsiva. Anche i font che si riconoscono grazie a caratteristiche molto specifiche li eliminiamo: un Courier New, ad esempio, che riproduce lo stile della macchina da scrivere, è praticamente illeggibile sulle grandi distese di testo. Obliteriamo anche i font che simulano la scrittura a mano e, ovviamente, il Comic Sans!