Ridurre le dimensioni dei caratteri web

Ilya Grigorik

Jeremy Wagner

La tipografia è fondamentale per un design, un branding, una leggibilità e un'accessibilità efficaci. I caratteri web supportano tutte queste funzionalità e molto altro ancora: il testo è selezionabile, disponibile per la ricerca, zoom e compatibilità ad alta DPI, in modo da offrire un rendering del testo coerente e nitido, indipendentemente dalle dimensioni e dalla risoluzione dello schermo. I caratteri web sono fondamentali per un design, un'esperienza utente e prestazioni ottimali.

L'ottimizzazione dei caratteri web è un aspetto fondamentale della strategia complessiva per il rendimento. Ogni carattere è una risorsa aggiuntiva e alcuni potrebbero bloccare il rendering del testo, ma il semplice fatto che la pagina utilizzi caratteri web non significa che il rendering debba essere più lento. Al contrario, l'ottimizzazione dei caratteri, insieme a una strategia oculata per il modo in cui vengono caricati e applicati sulla pagina, può contribuire a ridurre le dimensioni totali delle pagine e a migliorarne i tempi di rendering.

Anatomia di un carattere web

Un font web è una raccolta di glifi, ognuno dei quali è una forma vettoriale che descrive una lettera o un simbolo. Di conseguenza, due semplici variabili determinano le dimensioni di un determinato file di caratteri: la complessità dei percorsi vettoriali di ciascun glifo e il numero di glifi in un determinato carattere. Ad esempio, Open Sans, uno dei caratteri web più popolari, contiene 897 glifi, che includono caratteri latini, greci e cirillici.

Quando si sceglie un font, è importante considerare quali set di caratteri sono supportati. Se hai bisogno di localizzare i contenuti della tua pagina in più lingue, devi utilizzare un carattere che sia in grado di offrire agli utenti un aspetto e un'esperienza coerenti. Ad esempio, la famiglia di caratteri Noto di Google mira a supportare tutte le lingue del mondo. Tuttavia, tieni presente che la dimensione totale di Noto, con tutte le lingue incluse, comporta un download di file ZIP di almeno 1, 1 GB.

In questo post scoprirai come ridurre le dimensioni dei file dei tuoi caratteri web.

Formati di caratteri web

Attualmente vengono consigliati due formati di contenitore per i caratteri in uso sul web:

• Partenza
• TTF
• ECO
• WOFF2.

WOFF e WOFF 2.0 offrono un ampio supporto e sono supportati da tutti i browser moderni.

• Pubblica la variante WOFF 2.0 per i browser moderni.
• Se assolutamente necessario, ad esempio se è necessario supportare Internet Explorer 11, fornire WOFF come riserva.
• In alternativa, valuta la possibilità di non utilizzare caratteri web per i browser precedenti e di ricorrere ai caratteri di sistema. Questa opzione potrebbe essere più efficace anche sui dispositivi meno recenti e più limitati.
• Poiché WOFF e WOFF 2.0 coprono tutte le basi dei browser moderni e precedenti ancora in uso, l'uso di EOT e TTF non è più necessario e può comportare tempi di download dei caratteri web più lunghi.

Caratteri web e compressione

Sia WOFF che WOFF 2.0 hanno la compressione integrata. La compressione interna di WOFF 2.0 utilizza Brotli e offre una compressione fino al 30% migliore rispetto a WOFF. Per ulteriori informazioni, consulta il report sulla valutazione WOFF 2.0.

Infine, vale la pena notare che alcuni formati di carattere contengono metadati aggiuntivi, come hinting dei caratteri e informazioni sulla crenatura che potrebbero non essere necessarie su alcune piattaforme, il che consente un'ulteriore ottimizzazione delle dimensioni dei file. Ad esempio, Google Fonts mantiene oltre 30 varianti ottimizzate per ogni carattere e rileva e pubblica automaticamente la variante ottimale per ogni piattaforma e browser.

Definisci una famiglia di caratteri con @font-face

La regola at-rule del CSS @font-face consente di definire la posizione di una determinata risorsa carattere, le sue caratteristiche di stile e i punti di codice Unicode per cui deve essere utilizzata. Una combinazione di queste dichiarazioni @font-face può essere utilizzata per creare una "famiglia di caratteri", che il browser utilizzerà per valutare quali risorse carattere devono essere scaricate e applicate alla pagina corrente.

Considera un carattere variabile

I caratteri variabili possono ridurre notevolmente le dimensioni dei file nei casi in cui hai bisogno di più varianti di un carattere. Anziché dover caricare gli stili regolari e in grassetto insieme alle relative versioni in corsivo, puoi caricare un unico file contenente tutte le informazioni. Tuttavia, le dimensioni del file dei caratteri variabili saranno maggiori rispetto a quelle di una singola variante del carattere, anche se inferiori rispetto alla combinazione di molte varianti. Piuttosto che utilizzare un solo carattere variabile di grandi dimensioni, può essere preferibile pubblicare prima le varianti dei caratteri fondamentali, mentre le altre varianti verranno scaricate in un secondo momento.

Ora i caratteri variabili sono supportati da tutti i browser moderni. Per saperne di più, consulta Introduzione ai caratteri variabili sul web.

Scegli il formato giusto

Ogni dichiarazione @font-face fornisce il nome della famiglia di caratteri, che funge da gruppo logico di più dichiarazioni, proprietà carattere come stile, spessore e stiramento e il descrittore dell'src, che specifica un elenco prioritario di posizioni per la risorsa carattere.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

Innanzitutto, tieni presente che gli esempi precedenti definiscono una singola famiglia di caratteri straordinari con due stili (normale e corsivo), ciascuno dei quali rimanda a un insieme diverso di risorse carattere. A sua volta, ogni descrittore src contiene un elenco prioritario e separato da virgole di varianti della risorsa:

• L'istruzione local() consente di fare riferimento, caricare e utilizzare i caratteri installati localmente. Se l'utente ha già installato il carattere sul sistema, questa operazione bypassa completamente la rete ed è la più veloce.
• L'istruzione url() consente di caricare caratteri esterni e può contenere un suggerimento facoltativo format() che indica il formato del carattere a cui fa riferimento l'URL fornito.

Quando il browser stabilisce che il carattere è necessario, esegue un'iterazione nell'elenco delle risorse fornito nell'ordine specificato e tenta di caricare la risorsa appropriata. Ad esempio, come nell'esempio precedente:

1. Il browser esegue il layout di pagina e determina quali varianti di caratteri sono necessarie per visualizzare il testo specificato nella pagina. I caratteri che non fanno parte del CSS Object Model (CSSOM) della pagina non vengono scaricati dal browser, in quanto non sono obbligatori.
2. Il browser controlla se per ogni carattere richiesto è disponibile localmente.
3. Se il carattere non è disponibile a livello locale, il browser esegue un'iterazione rispetto alle definizioni esterne:
   • Se è presente un suggerimento per il formato, il browser verifica se lo supporta prima di avviare il download. Se il browser non supporta il suggerimento, passa al browser successivo.
   • Se non è presente alcun suggerimento per il formato, il browser scarica la risorsa.

La combinazione di direttive locali ed esterne con suggerimenti relativi ai formati appropriati consente di specificare tutti i formati di carattere disponibili e di lasciare che sia il browser a occuparsi del resto. Il browser determina le risorse necessarie e seleziona il formato ottimale.

Creazione di sottoinsiemi di intervalli Unicode

Oltre alle proprietà dei caratteri come stile, spessore e ampliamento, la regola @font-face consente di definire un set di punti di codice Unicode supportati da ogni risorsa. In questo modo puoi suddividere un carattere Unicode di grandi dimensioni in sottoinsiemi più piccoli (ad esempio sottoinsiemi latino, cirillico e greco) e scaricare soltanto i glifi necessari per visualizzare il testo in una pagina specifica.

Il descrittore unicode-range consente di specificare un elenco di valori di intervallo delimitati da virgole, ciascuno dei quali può essere in uno di tre diversi formati:

• Singolo punto di codice (ad es. U+416)
• Intervallo (ad esempio, U+400-4ff): indica i punti di codice iniziale e finale di un intervallo
• Intervallo di caratteri jolly (ad esempio U+4??): ? caratteri indicano qualsiasi cifra esadecimale

Ad esempio, puoi suddividere la tua famiglia Awesome Font in sottoinsiemi latini e giapponesi, ognuno dei quali viene scaricato dal browser in base alle esigenze:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

L'utilizzo di sottoinsiemi dell'intervallo Unicode e di file separati per ogni variante stilistica del carattere consente di definire una famiglia di caratteri composita che sia più veloce ed efficiente da scaricare. I visitatori scaricano solo le varianti e i sottoinsiemi di cui hanno bisogno e non sono obbligati a scaricare i sottoinsiemi che potrebbero non vedere o utilizzare nella pagina.

Quasi tutti i browser supportano unicode-range. Per la compatibilità con browser meno recenti, potrebbe essere necessario ricorrere all'"impostazione di sottoinsiemi manuale". In questo caso, dovrai fornire un'unica risorsa carattere che contenga tutti i sottoinsiemi necessari e nascondere il resto dal browser. Ad esempio, se la pagina utilizza solo caratteri latini, puoi rimuovere altri glifi e offrire quel particolare sottoinsieme come risorsa autonoma.

1. Determina quali sottoinsiemi sono necessari:
   • Se il browser supporta l'impostazione secondaria Unicode, seleziona automaticamente il sottoinsieme corretto. La pagina deve solo fornire i file del sottoinsieme e specificare intervalli Unicode appropriati nelle regole @font-face.
   • Se il browser non supporta l'impostazione di sottoinsiemi di intervalli Unicode, la pagina deve nascondere tutti i sottoinsiemi non necessari; in altre parole, lo sviluppatore deve specificare i sottoinsiemi richiesti.
2. Genera sottoinsiemi di caratteri:
   • Utilizza lo strumento pyftsubset open source per creare un sottoinsieme e ottimizzare i caratteri.
   • Alcuni server di caratteri, come Google Font, eseguono automaticamente un sottoinsieme per impostazione predefinita.
   • Alcuni servizi per i caratteri consentono la creazione manuale di sottoinsiemi tramite parametri di query personalizzati, che puoi utilizzare per specificare manualmente il sottoinsieme richiesto per la tua pagina. Consulta la documentazione del tuo fornitore di caratteri.

Selezione e sintesi dei caratteri

Ogni famiglia di caratteri può essere composta da più varianti stilistiche (normale, grassetto, corsivo) e più spessori per ogni stile. Ciascuno dei quali, a sua volta, può contenere forme di glifo molto diverse, ad esempio spazi e dimensioni diverse o una forma completamente diversa.

Il diagramma riportato sopra illustra una famiglia di caratteri che offre tre diversi spessori in grassetto:

• 400 (normale).
• 700 (grassetto).
• 900 (grassetto extra).

Tutte le altre varianti intermedie (indicate in grigio) vengono automaticamente mappate alla variante più vicina dal browser.

Quando viene specificato un peso per il quale non esiste alcun volto, viene utilizzato un volto con un peso nelle vicinanze. In generale, i pesi sono mappati a volti con pesi più pesanti e pesi più leggeri.

Algoritmo di corrispondenza dei caratteri CSS

Una logica simile si applica alle varianti in corsivo. Il designer dei caratteri stabilisce quali varianti produrranno e tu potrai stabilire quali varianti utilizzare nella pagina. Poiché ogni variante è un download separato, è consigliabile mantenere un numero di varianti ridotto. Ad esempio, puoi definire due varianti in grassetto per la famiglia Carattere fantastico:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

L'esempio precedente dichiara la famiglia Awesome Font, composta da due risorse che coprono lo stesso insieme di glifi latini (U+000-5FF), ma che offrono due diversi "ponderazioni": normale (400) e bold (700). Tuttavia, cosa succede se una delle regole CSS specifica uno spessore del carattere diverso o imposta la proprietà font-style su italic?

• Se non è disponibile una corrispondenza esatta del carattere, il browser sostituisce la corrispondenza più vicina.
• Se non viene trovata alcuna corrispondenza stilistica (ad esempio, nell'esempio sopra riportato non sono state dichiarate varianti in corsivo), il browser sintetizza la propria variante di carattere.

L'esempio riportato sopra illustra la differenza tra i risultati relativi ai caratteri sintetizzati e effettivi relativi a Open Sans. Tutte le varianti sintetizzate vengono generate da un unico carattere con spessore 400. Come puoi vedere, c'è una notevole differenza nei risultati. I dettagli su come generare le varianti in grassetto e oblique non sono specificati. Pertanto, i risultati variano da browser a browser e dipendono molto dal carattere.

Elenco di controllo per l'ottimizzazione delle dimensioni dei caratteri web

• Verifica e monitora l'utilizzo dei caratteri: non utilizzare troppi caratteri nelle pagine e, per ogni carattere, riduci al minimo il numero di varianti utilizzate. Ciò contribuisce a produrre un'esperienza più coerente e veloce per gli utenti.
• Se possibile, evita i formati precedenti:i formati EOT, TTF e WOFF sono più grandi di WOFF 2.0. EOT e TTF sono formati strettamente non necessari, mentre WOFF può essere accettabile se è necessario supportare Internet Explorer 11. Se scegli come target solo i browser moderni, l'utilizzo solo di WOFF 2.0 è l'opzione più semplice e con le prestazioni più elevate.
• Aggiungi un sottoinsieme delle risorse per i caratteri: molti caratteri possono essere sottoinsiemi o suddivisi in più intervalli Unicode per fornire solo i glifi richiesti da una determinata pagina. In questo modo si riducono le dimensioni del file e si migliora la velocità di download della risorsa. Tuttavia, quando definisci i sottoinsiemi, presta attenzione a ottimizzarli per il riutilizzo dei caratteri. Ad esempio, non scaricare un insieme di caratteri diverso ma sovrapposto su ogni pagina. È buona norma creare sottoinsiemi basati sul copione, ad esempio latino e cirillico.
• Dai la precedenza a local() nel tuo elenco src: indicare local('Font Name') all'inizio nel tuo elenco src assicura che non vengano effettuate richieste HTTP per i caratteri già installati.
• Utilizza Lighthouse per testare la compressione del testo.

Effetti su Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS)

A seconda dei contenuti della pagina, i nodi di testo possono essere considerati candidati per la Largest Contentful Paint (LCP). È quindi fondamentale assicurarti che i caratteri web siano il più ridotti possibile seguendo i consigli riportati in questo articolo, in modo che gli utenti possano vedere il testo nella tua pagina il prima possibile.

Se temi che, nonostante i tuoi sforzi di ottimizzazione, la visualizzazione del testo della pagina potrebbe richiedere troppo tempo a causa di un grande numero di caratteri web, la proprietà font-display ha una serie di impostazioni che possono aiutarti a evitare del testo invisibile durante il download di un carattere. Tuttavia, l'utilizzo del valore swap potrebbe causare variazioni significative del layout che influiscono sulla metrica Cumulative Layout Shift (CLS) del tuo sito. Se possibile, ti consigliamo di utilizzare i valori optional o fallback.

Se i caratteri web sono cruciali per il tuo branding e, di conseguenza, per l'esperienza utente, valuta la possibilità di precaricare i caratteri in modo che il browser possa richiederli subito. Questa operazione può ridurre sia il periodo di scambio se utilizzi font-display: swap sia il periodo di blocco se non utilizzi font-display.