I font per il web

Per realizzare un sito web accessibile, user-friendly, in grado di comunicare la personalità del marchio, è necessario prestare attenzione a ogni minimo dettaglio. Prestazioni ottimali e design d’impatto sono ottimi punti di partenza, ma per ottenere il meglio non si può non tenere conto di tanti altri elementi, dall’organizzazione dei contenuti alla scelta dei colori. Anche i font giocano un ruolo molto importante in questo contesto.

Definiti dal vocabolario Treccani online come “un insieme completo di caratteri contraddistinti da un particolare disegno (Times, Helvetica, ecc) e stile (corsivo, grassetto, ecc)“, i font, se scelti e utilizzati nel modo corretto, favoriscono la leggibilità dei contenuti e hanno un forte impatto sia sulla percezione del brand sia sull’estetica del sito.

Di seguito verrà approfondito questo argomento e verranno fornite le linee guida essenziali per scegliere i font più adatti al proprio progetto e utilizzarli al meglio.

Perché è importante scegliere bene i font per il sito web

I testi presenti sui siti web non comunicano solo attraverso le parole, ma anche tramite i caratteri. Ogni tipo di font è in grado di trasmettere, per mezzo del proprio stile, emozioni, sensazioni, personalità differenti, le quali si riflettono sulla percezione del brand. Scegliere il font sbagliato significa, per aziende e professionisti, comunicare un’immagine distorta, meno professionale, incoerente, con conseguente allontanamento del pubblico in target e problemi di brand identity. Per questo motivo, un’impresa che desidera trasmettere serietà, stabilità, lusso dovrà prediligere font dall’aspetto solido, elegante e classico tipo il Garamond e il Times New Roman, ed evitare quelli troppo giocosi e morbidi; allo stesso modo, una start-up giovane, dinamica e moderna potrà optare per font più trendy e freschi come il Poppins o il Montserrat e tenersi alla larga da quelli eccessivamente formali.

Oltre che sulla percezione del brand, il font influisce anche su un aspetto più pratico e concreto: la leggibilità dei contenuti. Utilizzare caratteri piccoli o dallo stile molto elaborato può rendere più lenta e difficoltosa la lettura e aumentare l’affaticamento visivo, con conseguente peggioramento della user experience, riduzione dell’accessibilità e aumento del rischio che gli utenti abbandonino il sito. Per questo è necessario valutare bene dimensioni e leggibilità dei font, in particolare di quelli destinati ai grandi blocchi di contenuto, e trovare il giusto compromesso tra questi aspetti e lo stile.

Font e problemi di visualizzazione

Una buona scelta dei font è fondamentale anche per prevenire i problemi di visualizzazione dei testi.

Nel momento in cui si crea un sito web, è necessario tenere conto del fatto che questo potrà essere visualizzato su diversi tipi di dispositivi e tramite svariati browser. Questi potrebbero risultare vecchi e obsoleti, includere particolari restrizioni, presentare incompatibilità o altri problemi che impediscono la corretta visualizzazione o il caricamento di alcuni font. Quando ciò avviene, il browser dell’utente utilizza un font web safe, ossia un font predefinito già presente sul dispositivo dell’utente.

Per evitare che i contenuti vengano visualizzati con font che non rispecchiano l’identità del brand, è dunque indispensabile:

• scegliere con attenzione il font principale
• includere nel CSS del sito una serie di font di fallback, ossia di font alternativi, che possano essere utilizzati dal browser nel caso in cui non risultasse possibile scaricare o visualizzare quello principale.

Linee guida per la scelta dei font per il sito web

Valutare gli stili dei font

Il primo passo da compiere per individuare i font perfetti consiste nel valutare i diversi stili e selezionare quelli più in linea con l’identità del brand e più adatti ai diversi elementi testuali della pagina. È importante tenere presente che alcuni stili potrebbero risultare perfetti per titoli e sottotitoli, ma inadatti per i grandi blocchi di testo dei paragrafi. Altri potrebbero invece risultare più idonei per mettere in evidenza contenuti particolari, ad esempio citazioni o codici.

Tra i principali stili di font rientrano innanzitutto i serif, ossia quelli con grazie, e i sans serif, senza grazie. Le “grazie” non sono loro che quelle piccole linee ornamentali, semplici o elaborate, presenti alle estremità di caratteri tipografici come il Times New Roman, il Courier New, il Garamond. I font serif, molto utilizzati nella stampa, anche per contenuti testuali molto ampi, risultano, a monitor, difficilmente leggibili. Per questo motivo, sui siti web vengono utilizzati soprattutto per titoli, sottotitoli, brevi citazioni, blocchi di codice, a meno che non si desideri ottenere un effetto particolare.

I font sans serif, noti anche come “bastoni” o “senza grazie”, sono caratterizzati da un design semplice e minimal che li rende molto più leggibili a schermo. Per questo motivo vengono ampiamente utilizzati sui siti web per i grandi corpi di testo. Naturalmente, possono anche essere utilizzati per tutti gli altri elementi della pagina. Alcuni esempi di font senza grazie sono l’Arial, il Roboto, il Futura.

Altri stili sono:

• i monospace: rientrano sotto questa dicitura tutti i font con caratteri che occupano la medesima porzione di spazio orizzontale. Utilizzati per i blocchi di codice, possono essere scelti anche per dare un aspetto minimal e vintage al sito;
• gli script: noti anche come font calligrafici, imitano la scrittura a mano e possono risultare, a seconda dei casi, sfarzosi, eleganti, romantici, infantili, raffinati. Adatti a titoli, slogan, brevi citazioni, possono risultare difficili da leggere, ma hanno un forte impatto visivo;
• i display: in questa famiglia rientrano font dal forte impatto visivo, ora spessi e decisi, ora eleganti e lussuosi, ma sempre vistosi e in grado di catturare l’attenzione. Questo stile risulta perfetto per titoli, slogan, CTA.

Da non dimenticare infine i blackletter o gotici e i fantasia.

Tenere conto della gerarchia tipografica: titoli, sottotitoli, testi

Per scegliere gli stili e i font più adatti al sito web è necessario prendere in considerazione la gerarchia tipografica. Questa altro non è che l’organizzazione dei contenuti testuali finalizzata a guidare l’utente nella lettura. In base al tipo di font utilizzato, al suo spessore, alla sua dimensione, alla spaziatura e persino al colore utilizzato, si potrà dare risalto a determinati elementi, lasciarne in secondo piano altri, garantire una buona leggibilità dei blocchi di testo più ampi.

In linea generale:

• il titolo principale della pagina dovrebbe essere di grandi dimensioni e potrà attirare l’attenzione grazie all’uso di un font particolare, del grassetto, dei colori;
• i sottotitoli (gli h2, h3, h4 dell’HTML) dovranno essere via via più piccoli e meno evidenti. Stili, grassetto e colori potranno anche i questo caso, aiutare ad attirare l‘attenzione, gestire la gerarchia e guidare la lettura;
• Il corpo del testo dovrebbe essere più piccolo rispetto a titolo e sottotitoli, ma ben leggibile. Grassetti, corsivi, colori possono aiutare a mettere in evidenza parole chiave, citazioni, link.

Slogan, didascalie, CTA, codici potranno infine essere differenziati, messi in evidenza o, al contrario, lasciati in secondo piano attraverso l’uso di diversi tipi di font, nonché tramite colori e dimensioni differenti.

Abbinare più font senza creare confusione

Utilizzare un solo tipo di font è certo possibile, ma il rischio che si corre è quello di rendere le pagine del sito piatte e poco accattivanti. D’altra parte, utilizzare più font in modo errato può portare alla creazione di pagine sovraccariche, disordinate, poco leggibili e con una bassa coerenza visiva.

Per evitare questi problemi, è consigliabile selezionare non più di due o tre font, meglio se caratterizzati da una personalità complementare, ma sufficientemente diversi fra loro, così da creare il giusto contrasto, e assegnare a ognuno un compito ben preciso. Se si deciderà ad esempio di utilizzare un font display tipo l’Impact per titoli, sottotitoli, slogan e un sans serif come l’Open Sans per testi e didascalie, si dovrà mantenere la coerenza di utilizzo in tutto il sito, così da aiutare gli utenti a individuare immediatamente le varie parti dei contenuti e a orientarsi nelle pagine.

Per dare ulteriore brio e movimento al design del sito, è utile giocare, oltre che con gli stili, anche con i pesi, le dimensioni e i colori dei caratteri.

Leggibilità: non è solo questione di “stile”

Il tipo di font è solo uno degli elementi che incidono sulla leggibilità dei testi. Gli altri, certo non meno importanti, sono le dimensioni dei caratteri, la spaziatura, l’altezza delle linee, i colori e il contrasto.

Per essere certi che gli utenti non facciano fatica a leggere i testi, è opportuno impostare:

• dimensioni sufficientemente elevate, meglio se non inferiori ai 12 px per i blocchi di testo
• interlinea compresa tra il 120% e il 150% della dimensione dei caratteri
• contrasto forte, così da garantire un buon distacco visivo tra testo e sfondo
• colori ben differenziati.

Lo spazio tra le lettere dipende principalmente dal tipo di font scelto. È dunque preferibile optare per tipi di font che presentino una buona spazialità, così da rendere più fluida la lettura.

Attenzione all’accessibilità e alla compatibilità cross-device

La buona leggibilità è alla base dell’accessibilità del sito web. Dando uno sguardo alle linee guida per l’accessibilità del web pubblicate dal W3C, si nota infatti che sono presenti anche alcune regole strettamente legate alla leggibilità dei testi, come le indicazioni relative al contrasto minimo e avanzato tra testo e sfondo, e alla spaziatura del testo.

Tra i criteri per una buona accessibilità rientrano anche quelli relativi al ridimensionamento del testo, il quale dovrebbe poter essere ridimensionato “fino al 200 percento senza l’ausilio di tecnologie assistive e senza perdita di contenuto e funzionalità“, e alle immagini di testo, le quali dovrebbero essere evitate a meno che non servano per fini di personalizzazione o non risultino essenziali per veicolare specifiche informazioni.

Anche la compatibilità cross-device dei font risulta fondamentale per una buona accessibilità. Per evitare che gli utenti che si connettono da smartphone o tablet visualizzino font troppo piccoli o troppo grandi, righe troppo lunghe, formattazioni distorte, è opportuno utilizzare i font in modo responsivo, impostando misure relative che permettano un adattamento automatico e proporzionale dei testi alle dimensioni del display. Indispensabile inoltre assicurarsi che i font scelti siano facilmente leggibili su ogni tipo di dispositivo e vengano caricati e visualizzati correttamente.

Ricorrere ad alcuni strumenti utili

Per trovare font originali, ottimizzati per il web, perfettamente compatibili con i principali browser e device, e per utilizzarli in modo facile e senza complicazioni, è possibile ricorrere a una serie di piattaforme online note e affidabili. Tra le migliori rientrano:

• Google Fonts: perfetta per chi è in cerca di risorse gratuiti, questa libreria permette di scegliere tra più di mille font open source, dai più classici ai più moderni e di tendenza;
• Adobe Fonts: questo strumento, in uso nell’abbonamento Creative Cloud e in altri piani Adobe, mette a disposizione font di alta qualità utilizzabili anche sui siti web;
• Font Pair: questa piattaforma semplifica la scelta degli abbinamenti di font. Mette infatti a disposizione numerose combinazioni efficaci e ben bilanciate, ottime per trovare ispirazione o per essere immediatamente utilizzate sul proprio sito.