Web font: cosa sono, come sceglierli e come ottimizzarli
Sono forse una delle innovazioni più significative nel campo del web design degli ultimi anni e la loro introduzione ha rivoluzionato il modo in cui i contenuti testuali vengono presentati online, offrendo ai designer una flessibilità senza precedenti. Oggi il nostro focus si accende sui web font, un elemento solo all’apparenza “piccolo” che può invece avere un impatto notevole non solo sul tempo di caricamento, ma anche sull’usabilità e sulla leggibilità dei contenuti. Andiamo quindi ad approfondire cosa sono i web font, come differiscono dai font di sistema e dai desktop font e perché la loro corretta implementazione è cruciale per il successo di un sito web, anche in ottica SEO.
Che cosa sono i web font
I web font sono caratteri tipografici che vengono caricati da un server web e utilizzati per visualizzare il testo su una pagina web.
Sono quindi caratteri esterni a quelli di default – i font di sistema – che ogni sito può decidere di aggiungere da librerie esterne, come Google Fonts, per variare lo stile dell’impaginazione.
La loro caratteristica principale è che non sono preinstallati sui dispositivi degli utenti, ma scaricati dal server solo al momento del caricamento della pagina. Questo significa che i designer hanno la possibilità di utilizzare una vasta gamma di caratteri, compresi i caratteri non ASCII e i caratteri speciali, senza dover fare affidamento sui font che l’utente ha già installato sul proprio dispositivo.
Web font, definizione e spiegazione
Per orientarci in questo tema complesso ci affidiamo a Ilya Grigorik di Google, che ha realizzato una guida strutturata all’ottimizzazione dei font web che appare chiara ed esaustiva. Partiamo dunque dalla definizione: “Un font web è una raccolta di glifi, ciascuno dei quali rappresenta una forma vettoriale che descrive una lettera o un simbolo”.
Da ciò deriva anche un’informazione laterale molto importante: i caratteri sono differenti e hanno pesi altrettanto diversi, perché le dimensioni di ogni particolare file font sono determinate dalla “complessità dei percorsi vettoriali di ogni glifo” e “dal numero di glifi”.
Ogni famiglia di font è composta da una serie di varianti stilistiche (per la scrittura normale, l’evidenziazione in grassetto o quella in corsivo) e diversi spessori per ogni stile; a sua volta, ogni stile può contenere glifi di forme molto diverse, che ad esempio prevedono spaziature, dimensioni o forme differenti.
Il Googler cita nello specifico l’esempio di OpenSans, uno dei font web più popolari, che “contiene 897 glifi, che includono caratteri latini, greci e cirillici”.
Come sono i web font: le caratteristiche tecniche
La tecnologia dei web font è stata resa possibile grazie a standard come @font-face, introdotto con CSS3, che permette di specificare font esterni da utilizzare per il rendering del testo. Questo ha aperto nuove possibilità creative, consentendo ai designer di scegliere caratteri che rispecchiano meglio l’identità visiva del brand e migliorano l’esperienza utente.
I web font sono ottimizzati per il caricamento rapido e l’uso su diverse piattaforme e dispositivi. Sono spesso compressi in formati come WOFF (Web Open Font Format) e WOFF2, che riducono le dimensioni dei file e migliorano i tempi di caricamento. Inoltre, i web font possono includere varianti specifiche per il web, come subset di caratteri che contengono solo i glifi necessari per ridurre ulteriormente le dimensioni dei file.
Più in generale, le caratteristiche tecniche dei web font sono progettate per ottimizzare la loro performance e compatibilità su una vasta gamma di dispositivi e browser.
Una delle principali caratteristiche è il formato dei file: la compressione in WOFF (Web Open Font Format) e WOFF2 offre una sensibile riduzione di peso rispetto ai formati tradizionali come TTF (TrueType Font) e OTF (OpenType Font), e quindi riduce significativamente le dimensioni dei file, migliorando i tempi di caricamento delle pagine web.
Un’altra caratteristica tecnica importante è la possibilità di utilizzare subset di caratteri. I subset permettono di includere solo i glifi necessari per il contenuto della pagina, riducendo ulteriormente le dimensioni dei file e accelerando il caricamento.
Inoltre, i web font supportano il caricamento asincrono, il che significa che possono essere caricati in parallelo con altri elementi della pagina, riducendo il tempo complessivo di caricamento.
La proprietà CSS font-display è un altro elemento tecnico cruciale, poiché determina come e quando i web font vengono visualizzati durante il caricamento. Impostazioni come font-display: swap garantiscono che il testo rimanga visibile utilizzando un font di riserva fino a quando il web font non è completamente caricato, migliorando l’esperienza utente.
Infine, i web font sono progettati per essere altamente compatibili con diversi browser e dispositivi, garantendo una resa visiva coerente e di alta qualità su tutte le piattaforme. Queste caratteristiche tecniche rendono i web font una scelta potente e versatile per i designer web, permettendo di creare esperienze utente coinvolgenti senza compromettere le prestazioni del sito.
Quali sono i web font
Tra i web font più comunemente utilizzati e disponibili attraverso servizi come Google Fonts e Adobe Fonts possiamo citare:
- Roboto, uno dei font più popolari su Google Fonts. Progettato da Christian Robertson, è noto per la sua leggibilità e versatilità. Roboto è spesso utilizzato in applicazioni web e mobile grazie al suo design moderno e pulito. È disponibile in diverse varianti di peso e stile, rendendolo adatto a una vasta gamma di progetti.
- Open Sans, progettato da Steve Matteson, è un altro font molto popolare. È caratterizzato da una leggibilità eccellente sia su schermi piccoli che grandi. Open Sans è spesso utilizzato per testi di corpo e titoli grazie alla sua chiarezza e neutralità. È disponibile in diverse varianti di peso, offrendo flessibilità nel design.
- Lato, un font sans-serif progettato da Łukasz Dziedzic. È noto per il suo equilibrio tra serietà e calore, rendendolo adatto sia per contenuti formali che informali. Lato è ampiamente utilizzato in siti web aziendali e blog grazie alla sua leggibilità e versatilità.
- Proxima Nova, progettato da Mark Simonson, è un font sans-serif molto popolare su Adobe Fonts. È spesso descritto come una combinazione tra Helvetica e Futura, offrendo un design moderno e pulito. Proxima Nova è utilizzato in una vasta gamma di progetti, dai siti web aziendali alle applicazioni mobile.
- Source Sans Pro è il primo font open source di Adobe, progettato da Paul D. Hunt. È un font sans-serif progettato per essere altamente leggibile su schermi digitali. Source Sans Pro è spesso utilizzato per testi di corpo e interfacce utente grazie alla sua chiarezza e leggibilità.
- Merriweather, un font serif progettato da Eben Sorkin. È progettato per essere leggibile su schermi digitali, con un design che combina tradizione e modernità. Merriweather è spesso utilizzato per titoli e testi di corpo in siti web che richiedono un tocco di eleganza.
- Montserrat, progettato da Julieta Ulanovsky, è un font sans-serif ispirato ai vecchi poster e insegne del quartiere Montserrat di Buenos Aires. È noto per il suo design geometrico e moderno, ed è spesso utilizzato per titoli e testi di corpo in siti web creativi e di moda.
- Raleway, un font sans-serif elegante e leggero, progettato da Matt McInerney. È spesso utilizzato per titoli e intestazioni grazie al suo design raffinato. Raleway è disponibile in diverse varianti di peso, offrendo flessibilità nel design.
- Playfair Display, un font serif progettato da Claus Eggers Sørensen. È ispirato ai caratteri tipografici del XVIII secolo e offre un design elegante e sofisticato. Playfair Display è spesso utilizzato per titoli e testi di corpo in siti web di moda e lifestyle.
La differenza tra web font e font di sistema
La principale differenza tra web font e font di sistema risiede nel modo in cui vengono caricati e utilizzati.
I font di sistema sono preinstallati sui dispositivi degli utenti e vengono utilizzati direttamente dal sistema operativo. Questo significa che il designer è limitato ai font che sono comunemente disponibili su tutti i dispositivi, come Arial, Times New Roman e Verdana. Questi font sono scelti per la loro leggibilità e compatibilità, ma offrono poche opzioni in termini di personalizzazione e branding.
I font di sistema sono basic, non hanno impatto sulla velocità di caricamento delle pagine del sito e sono compatibili con larghissima parte dei browser, dei sistemi operativi e dei software: infatti, sono anche detti font web-safe.
I web font sono invece più complessi e, come detto, vengono scaricati dal server al momento del caricamento della pagina.
Questo permette ai designer di utilizzare una vasta gamma di caratteri, inclusi quelli personalizzati, che possono essere specifici per un determinato progetto o brand. Tuttavia, l’uso dei web font introduce anche alcune sfide, come il tempo di caricamento e la compatibilità con diversi browser e dispositivi. È qui che entrano in gioco tecniche di ottimizzazione come il preloading, la compressione e il caching, che possono aiutare a mitigare questi problemi e garantire che i web font vengano caricati rapidamente e senza intoppi.
Inoltre, i web font offrono una maggiore coerenza visiva: essendo scaricati dal server, il testo appare nello stesso modo su tutti i dispositivi e browser, garantendo un’esperienza utente uniforme. Questo è particolarmente importante per i brand che vogliono mantenere una forte identità visiva su tutte le piattaforme. Tuttavia, è essenziale scegliere i web font con cura e ottimizzarli correttamente per evitare problemi di performance e garantire una buona esperienza utente.
Web font, font desktop e font di sistema: facciamo chiarezza
C’è in realtà un terzo “set” di caratteri da conoscere, ovvero i font desktop – che però spesso si sovrappongono ai font di sistema.
Dal punto di vista più tecnico e specifico, si chiamano desktop font o font installabili i caratteri tipografici che possono essere installati manualmente su un computer per essere utilizzati in applicazioni di desktop publishing, software di grafica, editor di testo e altre applicazioni che richiedono la visualizzazione di testo.
Questi font non sono necessariamente preinstallati sul sistema operativo: possono essere acquistati, scaricati e installati manualmente dall’utente. Offrono una vasta gamma di stili, pesi e varianti, spesso con funzionalità avanzate come legature, alternative stilistiche e glifi estesi. I desktop font sono utilizzati principalmente in contesti di design e produzione, come la creazione di grafica, layout di stampa e progetti di branding. Sono scelti per la loro qualità di rendering e la varietà di opzioni stilistiche.
I font di sistema, invece, sono quei caratteri tipografici che sono preinstallati sui sistemi operativi dei dispositivi, come Windows, macOS, Linux, iOS e Android. Questi font sono disponibili per l’uso in tutte le applicazioni che girano su quel sistema operativo, senza bisogno di ulteriori installazioni. Sono scelti per garantire la massima compatibilità e leggibilità su una vasta gamma di dispositivi e applicazioni. Font come Arial, Times New Roman e Verdana sono esempi comuni di font di sistema. Questi font sono utilizzati in applicazioni di sistema, documenti, e-mail, browser web e qualsiasi altra applicazione che richieda la visualizzazione di testo. Sono anche spesso utilizzati come font di riserva (fallback fonts) nei CSS per garantire che il testo rimanga leggibile se i web font non vengono caricati.
E quindi, la differenza tra font di sistema e desktop font risiede principalmente nella loro disponibilità e utilizzo: mentre i font di sistema sono preinstallati e pronti all’uso su un sistema operativo, i desktop font devono essere installati manualmente dall’utente. I font di sistema sono scelti per la loro compatibilità e leggibilità su una vasta gamma di dispositivi e applicazioni, mentre i desktop font offrono una maggiore varietà di stili e funzionalità avanzate, rendendoli ideali per progetti di design e produzione.
Come scegliere i web font per il sito
Ora che conosciamo un po’ di più di questi caratteri cerchiamo di capire come funziona la scelta dei web font per un sito web, che non è una decisione da prendere alla leggera.
I font non solo influenzano l’aspetto estetico del sito, ma possono anche avere un impatto significativo sulla leggibilità, sull’usabilità e sulle prestazioni complessive. Un font ben scelto può migliorare l’esperienza utente, rendere il contenuto più accessibile e persino influenzare positivamente il posizionamento sui motori di ricerca.
In linea di massima, per valutare quale web font scegliere dobbiamo reperire le informazioni utili e considerare anche i set di caratteri supportati, aspetto fondamentale se abbiamo un sito multilingua. Per “localizzare i contenuti di una pagina in più lingue, dovrai utilizzare un font che sia in grado di garantire un aspetto e un’esperienza coerenti agli utenti”, ci consiglia ad esempio Google.
Anche in questo caso abbiamo un esempio concreto: la famiglia di font Noto di Google mira a supportare tutte le lingue del mondo, ma le dimensioni totali del pacchetto, incluse tutte le lingue, “ammontano in un file ZIP di più di 130 MB”.
Criteri di scelta dei web font
Ci sono quindi dei fattori chiave da considerare quando selezioniamo i web font per il nostro sito.
Partiamo inevitabilmente dalla leggibilità. Un font può essere esteticamente piacevole, ma se non è facilmente leggibile, rischia di compromettere l’esperienza utente. Font come Arial, Verdana e Georgia sono spesso preferiti per la loro chiarezza e leggibilità su schermi di diverse dimensioni e risoluzioni. È importante testare i font su vari dispositivi e browser per assicurarsi che il testo rimanga leggibile in tutte le condizioni.
Un altro criterio cruciale è la coerenza con la brand identity. I web font dovrebbero riflettere il tono e lo stile del brand, contribuendo a creare un’esperienza visiva coerente. Ad esempio, un sito web di una banca potrebbe optare per font più tradizionali e formali, mentre un sito di moda potrebbe scegliere caratteri più moderni e creativi. La coerenza visiva aiuta a rafforzare il brand e a creare un’esperienza utente più coinvolgente.
La compatibilità è un altro fattore importante. Non tutti i font sono supportati da tutti i browser e dispositivi. È essenziale scegliere font che siano ampiamente supportati e testare il sito su diverse piattaforme per assicurarsi che il testo venga visualizzato correttamente. Inoltre, è consigliabile avere font di riserva (fallback fonts) nel caso in cui il web font principale non venga caricato correttamente.
Infine, le prestazioni sono un aspetto cruciale. I web font possono influenzare il tempo di caricamento della pagina, un fattore critico per la SEO e l’esperienza utente. Font pesanti o mal ottimizzati possono rallentare il sito, causando frustrazione agli utenti e penalizzazioni da parte dei motori di ricerca. Tecniche come il preloading, la compressione e il caching possono aiutare a migliorare le prestazioni dei web font, garantendo che vengano caricati rapidamente e senza intoppi.
L’importanza dei web font e della tipografia
Se possono essere così complessi da gestire, perché scegliere di installare dei font web personalizzati? Ci risponde sempre Google: “I font web sono fondamentali per ottenere un buon design, user experience e prestazioni ottimali”, e scusate se è poco, verrebbe da dire.
Questi caratteri rappresentano un punto centrale per la tipografia, ovvero l’impostazione grafica del sito e delle pagine, che è un aspetto fondamentale per il design, il branding, la leggibilità e l’accessibilità: la tipografia deve essere adatta ai contenuti del sito, deve rispettare il tono e la voce, deve essere leggibile e funzionale, essere capace di adeguarsi al contesto e di prestare attenzione all’utente.
E anche quello che apparentemente è solo un dettaglio può fare la differenza: “I font web consentono di ottenere tutto ciò, e non solo”, dice Grigorik. Con questo sistema “il testo è selezionabile, ricercabile, ingrandibile e compatibile con hight-DPI, offrendo un rendering coerente e conciso, con una risoluzione multipla scalabile che ben si adatta a qualsiasi formato, dimensione e risoluzione del monitor”.
Web Font e SEO: l’impatto su usabilità e accessibilità
Dovrebbe essere quindi chiaro che l’adozione dei web font non riguarda solo l’estetica del sito, ma ha implicazioni profonde su SEO e usabilità. Detta in altri termini, anche un elemento all’apparenza così “minimo” come la scelta e l’implementazione dei caratteri tipografici può in realtà influenzare il posizionamento sui motori di ricerca e l’esperienza utente, rendendo essenziale una comprensione approfondita di come gestirli correttamente.
L’impatto maggiore riguarda il tempo di caricamento della pagina, che può essere un fattore cruciale per il ranking: se non ottimizzati correttamente, i web font possono aggiungere peso alla pagina e rallentare il caricamento.
Per mitigare questo rischio è fondamentale adottare tecniche di ottimizzazione. Il preloading dei font, ad esempio, permette di caricare i web font in anticipo, riducendo il tempo di attesa per l’utente. La compressione dei file dei font può ridurre significativamente le dimensioni dei file, accelerando il caricamento. Inoltre, l’uso del caching permette di memorizzare i font nel browser dell’utente, evitando di doverli scaricare nuovamente ad ogni visita.
Un altro aspetto da considerare è l’uso del parametro font-display: impostare font-display: swap può migliorare l’esperienza utente mantenendo il testo visibile durante il caricamento dei font. Questo non solo migliora l’usabilità, ma può anche ridurre il bounce rate, un altro fattore che i motori di ricerca considerano per il ranking.
Infine, è importante scegliere web font che siano leggibili e accessibili. Font difficili da leggere possono aumentare il tempo di permanenza sulla pagina, ma non in modo positivo. Gli utenti potrebbero impiegare più tempo a leggere il contenuto, ma potrebbero anche abbandonare il sito se trovano il testo troppo faticoso da decifrare. Questo può influenzare negativamente il ranking, poiché i motori di ricerca interpretano un alto tasso di abbandono come un segnale di scarsa qualità del contenuto.
Non sono poi da trascurare gli effetti che tutto questo ha sugli utenti, che sono sempre il riferimento finale della nostra attività online: font chiari e leggibili migliorano l’esperienza utente, rendendo il contenuto più facile da leggere e comprendere. Ciò vale soprattutto in termini di accessibilità, per semplificare la navigazione e l’esperienza di utenti con disabilità visive o difficoltà di lettura: font come Open Sans, Roboto e Lato sono spesso preferiti per la loro leggibilità e chiarezza.
Sempre su questo fronte, i web font devono essere scelti in modo da garantire che il testo sia leggibile per tutti gli utenti, indipendentemente dalle loro capacità. Questo include considerazioni come il contrasto tra il testo e lo sfondo, la dimensione del font e la spaziatura tra le lettere e le righe. Un buon design tipografico può fare una grande differenza nell’accessibilità del contenuto.
Un altro fattore da considerare è l’uso di font fallback. Anche se i web font offrono una maggiore flessibilità, è importante avere font di riserva nel caso in cui il web font principale non venga caricato correttamente. Questo garantisce che il testo rimanga leggibile anche in caso di problemi di caricamento.
Infine, la coerenza visiva è essenziale per una buona usabilità: utilizzare lo stesso set di font in tutto il sito aiuta a creare un’esperienza utente uniforme e professionale. Cambiamenti improvvisi nei font possono distrarre e confondere gli utenti, riducendo l’efficacia del contenuto.
Come ottimizzare i web font
L’ottimizzazione del caricamento dei web font è essenziale per garantire un’esperienza utente fluida e migliorare le prestazioni del sito. Un caricamento efficiente dei font può ridurre i tempi di attesa, migliorare la leggibilità e contribuire positivamente alla SEO.
La guida di Google ci rassicura anche su un aspetto: “Contrariamente a quanto si crede, l’utilizzo di font web non ritarda necessariamente il rendering della pagina né ha un impatto negativo su altre prestazioni”. Questo significa che è possibile integrare in tutta sicurezza i web font sul nostro sito, opportunamente ottimizzati, e sfruttare tutto il loro potenziale.
Non temere di utilizzare i font web, ci dicono gli esperti, ma fai attenzione a ridurre le possibilità di errore: “Un’applicazione non ponderata può causare ritardi evitabili e download eccessivamente pesanti”, e quindi “l’utilizzo di font web richiede una progettazione attenta per garantire che la tipografia non intralci le prestazioni”.
Gli interventi di base
L’ottimizzazione dei web font inizia con la scelta dei font stessi: è importante selezionare font che siano già ottimizzati per il web, come quelli offerti da servizi come Google Fonts o Adobe Fonts. Questi servizi forniscono font che sono compressi e pronti per essere utilizzati sul web, riducendo il peso complessivo della pagina.
Una delle tecniche più efficaci per migliorare il caricamento dei font è il preloading, che permette di caricare i font in anticipo, prima che il browser inizi a renderizzare la pagina. Questo può essere fatto utilizzando il tag <link rel=”preload” href=”URL del font” as=”font” type=”tipo/font” crossorigin=”anonymous”>. Il preloading assicura che i font siano pronti per essere utilizzati non appena il browser ne ha bisogno, riducendo il tempo di attesa per l’utente.
La compressione dei file dei font è un’altra tecnica cruciale. Formati come WOFF2 offrono una compressione superiore rispetto ai formati tradizionali come TTF o OTF, riducendo significativamente le dimensioni dei file. Utilizzare font in formato WOFF2 può migliorare notevolmente i tempi di caricamento.
Il caching è un’altra strategia importante. Configurare il server per memorizzare i font nella cache del browser può evitare di doverli scaricare nuovamente a ogni visita. Questo non solo riduce il tempo di caricamento, ma anche il consumo di banda. È possibile configurare il caching utilizzando intestazioni HTTP come Cache-Control e Expires.
Infine, è importante ridurre il numero di varianti di font utilizzate, perché ogni variante (peso, stile, ecc.) aggiunge ulteriori file da scaricare, aumentando il tempo di caricamento. Limitare il numero di varianti utilizzate e caricare solo quelle strettamente necessarie può migliorare le prestazioni complessive del sito.
La risoluzione dei problemi principali
Uno dei problemi più comuni con l’uso dei web font è il “flash of invisible text” (FOIT), dove il testo rimane invisibile fino a quando il font non è completamente caricato. Questo può essere frustrante per gli utenti e influire negativamente sull’esperienza utente, ma fortunatamente esistono tecniche per garantire che il testo rimanga visibile durante il caricamento dei font.
Il parametro font-display è uno strumento potente per gestire questo problema. Impostando font-display: swap, il browser utilizza un font di riserva fino a quando il web font non è completamente caricato. Questo garantisce che il testo sia sempre visibile, migliorando l’usabilità. Altre opzioni come fallback e optional offrono ulteriori livelli di controllo, permettendo di bilanciare tra velocità di caricamento e fedeltà visiva.
Un’altra tecnica utile è l’uso di font di riserva ben scelti. Specificare una lista di font di riserva nel CSS assicura che, se il web font principale non viene caricato, il browser utilizzi un font alternativo che sia il più simile possibile. Questo può ridurre l’impatto visivo del passaggio tra i font e migliorare l’esperienza utente.
Infine, è importante testare il caricamento dei font su diverse condizioni di rete e dispositivi. Utilizzare strumenti come Lighthouse di Google può aiutare a identificare problemi di caricamento e suggerire miglioramenti. Monitorare le prestazioni del sito e fare aggiustamenti basati sui dati raccolti può garantire che i web font siano sempre ottimizzati per offrire la migliore esperienza possibile.
Font display: significato e importanza
L’abbiamo citato più volte e forse è opportuno spiegare bene cosa sia font-display.
Il parametro font-display è una proprietà CSS che determina come e quando i web font vengono visualizzati durante il caricamento della pagina. Questo parametro è fondamentale per gestire l’esperienza utente durante il caricamento dei font, evitando problemi come il citato “flash of invisible text” (FOIT) o il “flash of unstyled text” (FOUT). Quest’ultimo avviene quando il browser visualizza il testo della pagina utilizzando inizialmente un font di riserva predefinito, che può essere visivamente molto diverso dal web font previsto, sostituendolo poi con il web font effettivo e causando, però, un vero e proprio flash a causa del cambiamento visibile nello stile, che può distrarre gli utenti e comprometterne l’esperienza.
Il valore font-display può essere impostato su diverse opzioni, ognuna delle quali ha un impatto diverso sull’esperienza utente. L’opzione swap, ad esempio, è una delle più utilizzate. Quando si utilizza font-display: swap, il browser visualizza un font di riserva fino a quando il web font non è completamente caricato. Questo garantisce che il testo rimanga sempre visibile, migliorando l’usabilità e riducendo la frustrazione degli utenti.
Un’altra opzione è fallback, che funziona in modo simile a swap, ma con un periodo di attesa più breve prima di visualizzare il font di riserva. Questo può essere utile in situazioni in cui la velocità di caricamento è critica, ma si desidera comunque utilizzare il web font principale quando possibile.
L’opzione optional è invece indicata per i casi in cui la velocità di caricamento è prioritaria rispetto all’uso del web font. Con font-display: optional, il browser utilizza il font di riserva se il web font non viene caricato rapidamente, migliorando le prestazioni complessive del sito.
Infine, l’opzione block mantiene il testo invisibile fino a quando il web font non è completamente caricato. Sebbene questa opzione garantisca che il testo venga visualizzato esattamente come previsto, può causare problemi di usabilità se il tempo di caricamento è troppo lungo, poiché gli utenti potrebbero vedere una pagina vuota o incompleta per diversi secondi. Questo può portare a un’esperienza frustrante e aumentare il tasso di abbandono del sito.
In sintesi, la scelta del valore font-display dipende dalle specifiche esigenze del progetto e dall’equilibrio tra estetica e prestazioni. Utilizzare correttamente questa proprietà può migliorare significativamente l’esperienza utente, garantendo che il testo rimanga visibile durante il caricamento dei caratteri web e ottimizzando il tempo di caricamento della pagina.
Web font e rendering: come ridurre i problemi
L’obiettivo della SEO tecnica e, in particolare, degli interventi in questo ambito è di “aiutare il browser” migliorando “i font e il modo in cui vengono recuperati e utilizzati all’interno delle nostre pagine”, che è una fase critica nell’intera strategia prestazionale. Come dicevamo, ogni font rappresenta una risorsa aggiuntiva e in alcuni casi possono bloccare il rendering del testo, ma quando operiamo in modo ottimizzato, impostando una strategia ponderata di caricamento e applicazione nella pagina, è possibile ridurre le dimensioni totali e migliorare i tempi di rendering.
I cinque consigli di ottimizzazione dei web font
La guida di Google segnala dunque cinque interventi di ottimizzazione sui caratteri tipografici del sito, una checklist del lavoro:
- Verifica e controlla il tuo utilizzo dei font. Il primo consiglio è piuttosto semplice, perché invita a limitare l’uso eccessivo di font sulle tue pagine e di ridurre il numero di varianti utilizzate per ogni carattere. Questo consente di offrire agli utenti un’esperienza più rapida e uniforme.
- Suddividi i font in subset. Entriamo nel tecnico: “molti font possono essere suddivisi in subset o in più unicode-range, così da utilizzare soltanto i glifi richiesti da una pagina specifica”, e in genere tra le best practices si suggerisce di creare subset in base allo script (come latino, cirillico e così via). Già solo questa accortezza permette di ridurre le dimensioni file e di aumentare la velocità di download della risorsa, ma bisogna badare nel corso ai parametri per il riutilizzo dei font: ad esempio, spiega Grigorik, sarebbe meglio “per ogni pagina non scaricare un set di caratteri diverso, ma sovrapposto”.
- Ottimizza il formato dei font per ogni browser. Ogni font dovrebbe essere fornito in formato WOFF2, WOFF, EOT e TTF, comprimendo con GZIP i formati EOT e TTF, che di base non sono compressi.
- Specifica le politiche ottimali di validazione e caching. I font sono risorse statiche che vengono aggiornate molto raramente: per garantire un riutilizzo efficace tra pagine diverse bisogna fare in modo che i server prevedano un timestamp max-age di lunga durata e un token di riconvalida.
- Utilizza FontLoading API per ottimizzare il percorso di rendering critico. L’ultimo consiglio è molto importante: il lazy loading predefinito potrebbe comportare un ritardo nel rendering del testo, che può essere evitato con Font Loading API per determinati font, specificando una strategia di rendering e timeout personalizzata in base ai diversi contenuti della pagina.
Il problema del percorso di rendering critico
Sappiamo che il rendering delle pagine può essere in assoluto un fattore problematico per il sito – e sappiamo anche che Google destina uno specifico render budget a ogni sito indicizzato o da indicizzare – e i font possono complicare le cose: il browser deve decidere come gestire il processo per fornire all’utente il testo con il font personalizzato già prima che il carattere compaia in pagina.
Il cosiddetto percorso di rendering critico comincia quando il browser richiede il documento HTML e interpreta le informazioni riportate per costruire la pagina: è importante che già a questo punto i font necessari siano disponibili, perché altrimenti la macchina disegnerà il layout e altri contenuti sullo schermo senza inserire alcun pixel di testo, aspettando il caricamento dei font esterni.
Assicurarsi che il testo rimanga visibile durante il caricamento dei caratteri web
Come dicevamo, dobbiamo evitare i due problemi frequenti: che ci sia del testo invisibile durante il caricamento, ovvero il flash of invisible text, o che ci siano sbalzi durante il caricamento, ovvero il flash of unstyled text, quando non riusciamo a mostrare immediatamente il contenuto agli utenti e il browser ricorre temporaneamente a un font di sistema.
Un’altra Googler, Katie Hempenius, ci offre due strade per raggiungere l’obiettivo: un approccio semplice ma non supportato universalmente dai browser e un intervento più complesso, ma valido per tutti i brower.
- Usare font-display. Il primo metodo è l’uso di un API per specificare la strategia di visualizzazione dei caratteri: l’opzione swap indica al browser che il testo che utilizza questo font deve essere visualizzato immediatamente usando un carattere di sistema. Quando il carattere personalizzato è pronto, il carattere di sistema viene sostituito.
Come dicevamo, è un approccio semplice ma non universalmente supportato dai browser: ad esempio, Chrome e Firefox rispondono allo stesso modo (testo nascosto per un massimo di 3 secondi; se non ancora pronto, utilizza un font di sistema fino a quando il font non è pronto e scambia i caratteri), mentre Edge utilizza un font di sistema fino a quando il font non è pronto e Safari nasconde il testo fino a quando il carattere non è pronto.
- Attendere il caricamento dei font personalizzati. La seconda strategia prevede un lavoro più tecnico, suddiviso in tre passaggi:
- Non utilizzare un carattere personalizzato al caricamento della pagina iniziale, così il browser può visualizzare immediatamente il testo utilizzando un carattere di sistema.
- Rileva quando viene caricato il tuo font personalizzato (con un paio di righe di codice JavaScript, grazie alla libreria FontFaceObserver).
- Aggiorna lo stile della pagina per utilizzare il carattere personalizzato.
Per implementare queste azioni bisogna eseguire il refactoring del CSS per non utilizzare un carattere personalizzato al caricamento della pagina iniziale, e aggiungere uno script alla pagina che rilevi quando viene caricato il font personalizzato e quindi aggiorna lo stile della pagina. Per verificare se il test resta visibile durante il caricamento dei webfont si può usare lo strumento Lighthouse di Google.
