Font web e caricamento: perché il testo sparisce o salta (FOIT e FOUT) e come rendere l’attesa quasi invisibile

Una scheda chiara, quasi da manuale: sfondo panna, accenti blu elettrico, due finestre del browser una accanto all’altra. A sinistra la frase Readable text before the font arrives sta su due righe, in un bastoni pulito, con il pulsante blu Keep reading subito sotto. A destra la stessa frase, nello stesso riquadro, è passata a un graziato più largo e ora occupa tre righe. Il risultato si vede dalla linea tratteggiata e dalla freccia che scende: il pulsante si è spostato. Sotto c’è la didascalia che riassume tutto il problema: metriche diverse possono cambiare gli a capo. Sopra campeggia una sola riga di codice, font-display: swap;, con il percorso prima il fallback, poi il font web quando è pronto.

È una grafica didattica e lo dichiara con onestà in basso: si tratta di uno scambio di font illustrativo, non di una misura reale su un sito. Proprio per questo funziona. In pochi centimetri racconta un fenomeno che tutti abbiamo visto senza saperlo nominare: apri una pagina, inizi a leggere e il testo cambia forma sotto gli occhi. Oppure fissi un rettangolo bianco dove dovrebbero esserci le parole. Non è un guasto. È l’ultimo capitolo di una storia tipografica lunga quasi trent’anni.

Prima dei font web: l’epoca dei caratteri «sicuri»

Per gran parte degli anni Novanta e Duemila chi progettava siti aveva una tavolozza tipografica ridicola: i pochi caratteri installati su quasi tutti i computer. Ricordo bene i progetti in cui il cliente chiedeva il carattere del suo marchio e noi dovevamo spiegare che sul web avrebbe visto Verdana, Georgia o Arial, oppure un’immagine con il testo dentro, pesante e illeggibile per i motori di ricerca.

In quella scarsità c’erano due capolavori. Verdana e Georgia, entrambi del 1996, disegnati da Matthew Carter per Microsoft. A differenza della maggior parte dei caratteri usati allora a schermo, nati per la carta e poi adattati, Verdana è stata progettata fin dall’inizio per il monitor, per restare leggibile ai corpi piccoli. Non è un caso che il MoMA l’abbia acquisita nel 2011 nella collezione di Architettura e Design, insieme ad altri 22 caratteri digitali, e che lo stesso anno il Cooper Hewitt abbia dato a Carter il premio alla carriera citando proprio i suoi font per lo schermo. Quei caratteri erano «sicuri» perché erano già lì, sul disco di chi leggeva: nessun download, nessuna attesa.

@font-face, WOFF e la fine della scarsità

L’idea di scaricare un carattere insieme alla pagina è vecchia quanto i CSS. Il W3C ci provò già nel 1996, ma i due browser dominanti supportavano formati proprietari e incompatibili, e gli autori tornarono ai caratteri sicuri. La svolta arrivò alla fine degli anni Duemila: nel 2010 Google lanciò il suo catalogo di font gratuiti e il W3C, dopo anni di trattative tra browser, fonderie e progettisti, pubblicò la prima bozza di WOFF, un formato pensato apposta per il web, compresso e rispettoso delle licenze. Diventò raccomandazione ufficiale il 13 dicembre 2012; oggi si usa la versione 2.0, raccomandazione W3C dall’agosto 2024.

Da lì in poi ogni sito poteva avere la sua voce tipografica. Ma ogni carattere scaricato è un file in più che viaggia in rete, e finché non arriva il browser deve decidere cosa mostrare. Qui nascono le due sigle che danno il nome al problema.

FOIT e FOUT: due modi diversi di aspettare

FOIT sta per flash of invisible text: il browser nasconde il testo finché il font non è arrivato. Lo spazio c’è, le parole no. FOUT è il flash of unstyled text: il testo compare subito con un carattere di ripiego, il cosiddetto fallback, e poi viene sostituito. La grafica mette in scena esattamente il secondo caso.

Per anni i browser hanno scelto da soli. Secondo la documentazione di web.dev, con il comportamento a blocco Chromium e Firefox nascondono il testo per un massimo di 3 secondi prima di passare al fallback, mentre Safari aspetta senza limite. Su una connessione mobile lenta tre secondi di pagina vuota sono un’eternità: ho visto lettori chiudere la scheda convinti che il sito fosse rotto.

La specifica CSS Fonts Module Level 4 ha dato il controllo ai progettisti con il descrittore font-display, che oggi funziona in tutti i browser principali. Il valore swap, quello della grafica, prevede un periodo di blocco brevissimo, la specifica raccomanda 100 millisecondi o meno, e un periodo di scambio senza limite: il testo si vede quasi subito e il font vero subentra appena arriva. Esistono anche block, fallback e optional; quest’ultimo usa il font web solo se arriva quasi subito, altrimenti tiene il fallback per tutta la visita.

Perché il testo salta: è tutta una questione di metriche

Ed eccoci al cuore della scheda, quella frase in basso a destra che molti saltano: un fallback leggibile ha comunque bisogno di un controllo dell’impaginazione. Ogni carattere ha le sue metriche: quanto sono larghe le lettere, quanto sale l’ascendente sopra la riga di base, quanto scende il discendente, quanto spazio c’è tra una riga e l’altra. Se il fallback è più stretto del font web, la stessa frase sta su due righe con il primo e su tre con il secondo. Il paragrafo si allunga, e tutto quello che sta sotto, pulsanti compresi, viene spinto in basso.

Non è solo un fastidio estetico. Google misura questi spostamenti con il Cumulative Layout Shift (CLS), uno dei Core Web Vitals, e tra le cause indica esplicitamente i font che si disegnano più grandi o più piccoli del fallback iniziale. Per un’esperienza buona il punteggio dovrebbe restare a 0,1 o meno, misurato sul 75° percentile delle visite reali. Il pulsante che scappa nella grafica è il caso peggiore: il lettore punta il dito su Keep reading, il font arriva, il pulsante scende e il tocco finisce altrove. È il motivo per cui alcuni siti sembrano nervosi e altri, a parità di velocità, danno una sensazione di calma.

Calibrare il fallback: size-adjust e i suoi fratelli

La soluzione più elegante, e quella che nel mio lavoro ha fatto la differenza più grande, è smettere di considerare il fallback un ripiego qualunque e trattarlo come un font da progettare. I CSS oggi permettono di creare un carattere di ripiego su misura dentro un blocco @font-face che punta a un font locale, per esempio Arial, e di correggerne le proporzioni con quattro descrittori:

size-adjust: scala tutte le lettere di una percentuale, così il fallback occupa quasi la stessa larghezza del font web;
ascent-override e descent-override: allineano lo spazio sopra e sotto la riga di base;
line-gap-override: uniforma l’interlinea predefinita.

Il team di Chrome indica Arial come fallback consigliato per i bastoni e Times New Roman per i graziati, perché sono tra i pochi caratteri davvero diffusi su quasi tutti i dispositivi. Trovare la percentuale giusta richiede qualche tentativo: si parte dai valori calcolati sulle metriche dei due font e poi si rifinisce a occhio, sovrapponendo le due versioni della stessa riga. Quando ci si avvicina, lo scambio diventa quasi impercettibile: la forma delle lettere cambia, ma gli a capo restano dove sono e nessun pulsante si muove.

Nel caso della grafica il salto è volutamente estremo, da un bastoni a un graziato con proporzioni molto diverse. Già questa è una lezione di progetto: se il font web è un graziato, ha senso partire da un fallback graziato, invece di chiedere a un bastoni di imitarlo.

Tre prove da fare sul proprio sito

La fascia in fondo alla scheda propone tre controlli. Li condivido perché sono gli stessi che faccio a ogni consegna, e perché chi ha un blog o un piccolo sito può farli in dieci minuti con gli strumenti per sviluppatori del browser.

Provare senza cache e con la connessione rallentata. Sul computer dell’ufficio, con la fibra e i font già in memoria, lo scambio avviene così in fretta da non vedersi mai. I lettori invece lo vedono. Disattivo la cache, simulo una rete 3G lenta e ricarico: è l’unico modo per vedere la pagina con gli occhi di chi arriva per la prima volta da uno smartphone.
Confrontare i due font. Controllo il testo e soprattutto i controlli vicini: pulsanti, menu, campi dei moduli. Se una riga va a capo in modo diverso, so dove intervenire.
Calibrare il fallback. Con size-adjust e gli override delle metriche riduco il movimento finché il CLS legato ai font è praticamente nullo.

Aggiungo due abitudini che la scheda non dice. La prima: precaricare solo i pesi davvero usati nella parte visibile all’apertura, di solito uno o due. Precaricarli tutti rallenta proprio quello che si vuole velocizzare, perché i file si contendono la banda con il resto della pagina. La seconda: prima di aggiungere un peso o uno stile, chiedersi se serve davvero. Ogni corsivo e ogni grassetto in più è un file in più. Le linee guida di web.dev suggeriscono anche di servire solo il sottoinsieme di caratteri necessario alla lingua del sito.

Perché questa grafica funziona

Da progettista apprezzo come la scheda applica a sé stessa ciò che insegna. Una sola tinta d’accento per tutto ciò che è azione o codice, una gerarchia netta tra titolo, sottotitolo e didascalie, due riquadri numerati che si leggono da sinistra a destra come un prima e un dopo. La freccia tra i pannelli e quella che indica il pulsante in discesa fanno il lavoro di un paragrafo intero. E c’è un dettaglio raro: l’avvertenza che si tratta di un esempio illustrativo e non di una misura. È una forma di correttezza che vorrei vedere più spesso nella divulgazione tecnica.

Se c’è un limite, è che lo swap viene presentato come punto di partenza quasi obbligato. In realtà per testi lunghi, dove la stabilità conta più del carattere del marchio, il valore optional o un buon carattere di sistema possono essere scelte più serene. La tipografia web ha fatto un giro completo: dai caratteri sicuri di Carter siamo passati alla libertà totale, e ora la buona pratica consiste nel progettare con la stessa cura anche il momento dell’attesa. Il miglior caricamento di un font è quello che il lettore non nota.

Fonti

Tag:Interfacce digitali