Caratteri di riserva migliorati

Katie Hempenius
Katie Hempenius
Twitter

Riepilogo

Questo articolo offre un'analisi approfondita dei caratteri di riserva e delle API size-adjust, ascent-override, descent-override e line-gap-override. Queste API consentono di usare caratteri locali per creare facce di carattere di riserva che corrispondano esattamente o esattamente alle dimensioni di un carattere web. In questo modo vengono ridotte o eliminate le variazioni di layout causate dallo scambio dei caratteri.

Se preferisci saltare la lettura di questo articolo, ecco alcuni degli strumenti che puoi utilizzare per iniziare a utilizzare immediatamente queste API:

Strumenti di framework:

  • @next/font: a partire da Next 13, next/font utilizza automaticamente le sostituzioni delle metriche carattere e size-adjust per fornire caratteri di riserva corrispondenti.
  • @nuxtjs/fontaine: a partire da Nuxt 3, puoi utilizzare nuxt/fontaine per generare e inserire automaticamente caratteri di riserva corrispondenti nei fogli di stile utilizzati dalla tua app Nuxt.

Strumenti non framework:

  • Fontaine: Fontaine è una libreria che genera e inserisce automaticamente caratteri di riserva che utilizzano le sostituzioni delle metriche carattere.
  • Questo repository contiene gli override delle metriche relative ai caratteri per tutti i caratteri ospitati da Google Fonts. Questi valori possono essere copiati e incollati nei fogli di stile.

Contesto

Un carattere di riserva è un tipo di carattere che viene utilizzato quando il carattere principale non è ancora stato caricato o non contiene i glifi necessari per il rendering dei contenuti della pagina. Ad esempio, il codice CSS riportato di seguito indica che la famiglia di caratteri sans-serif deve essere utilizzata come carattere di riserva per "Roboto".

font-family: "Roboto" , sans-serif;

I caratteri di riserva possono essere usati per visualizzare il testo più rapidamente (ovvero, utilizzando font-display: swap). Di conseguenza, i contenuti delle pagine sono prima leggibili e utili, ma storicamente ciò andava a scapito dell'instabilità del layout: le variazioni del layout di solito si verificano quando viene sostituito un carattere di riserva con quello web. Tuttavia, le nuove API discusse di seguito possono ridurre o eliminare il problema consentendo la creazione di caratteri di riserva che occupano la stessa quantità di spazio della loro controparte del carattere web.

Caratteri di riserva migliorati

Esistono due possibili approcci per generare caratteri di riserva "migliorati". L'approccio più semplice utilizza solo l'API di sostituzione delle metriche dei caratteri. L'approccio più complicato (ma più potente) utilizza sia la metrica dei caratteri che l'API di override e size-adjust. Questo articolo illustra entrambi gli approcci.

Come funzionano le sostituzioni delle metriche dei caratteri

Introduzione

Le sostituzioni delle metriche relative ai caratteri consentono di sostituire l'ascesa, la discesa e l'interlinea di un carattere:

  • Salita misura la distanza più lontana che i glifi di un carattere si estendono sopra la base di riferimento.
  • Discesa misura la distanza più lontana che i glifi di un carattere si estendono al di sotto della base di riferimento.
  • Intervallo di riga, chiamato anche "inizio", misura la distanza tra righe di testo successive.

Diagramma che mostra l'ascesa, la discesa e l'interspazio di un carattere.

Le sostituzioni delle metriche dei caratteri possono essere utilizzate per sostituire l'ascesa, la discesa e gli intervalli di linea di un carattere di riserva in modo che corrispondano all'ascesa, alla discesa e agli intervalli di riga del carattere web. Di conseguenza, il carattere web e quello di riserva modificato avranno sempre le stesse dimensioni verticali.

Le sostituzioni delle metriche relative ai caratteri vengono utilizzate in un foglio di stile come il seguente:

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

Gli strumenti elencati all'inizio di questo articolo possono generare i valori corretti per la sostituzione delle metriche relative ai caratteri. Tuttavia, puoi anche calcolare questi valori autonomamente.

Calcolo delle sostituzioni delle metriche dei caratteri

Le seguenti equazioni forniscono le sostituzioni delle metriche dei caratteri per un determinato carattere web. I valori delle sostituzioni delle metriche relative ai caratteri devono essere scritti come percentuali (ad esempio, 105%) anziché come decimali.

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

Ad esempio, di seguito sono riportate le sostituzioni delle metriche carattere per il carattere Poppins:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

I valori ascent, descent, line-gap e unitsPerEm provengono tutti dai metadati del carattere web. La prossima sezione di questo articolo spiega come ottenere questi valori.

Lettura delle tabelle dei caratteri

I metadati di un carattere (nello specifico, le relative tabelle dei caratteri) contengono tutte le informazioni necessarie per calcolare le sostituzioni delle metriche sui caratteri.

Screenshot della finestra di dialogo Informazioni carattere in FontForge. Nella finestra di dialogo vengono visualizzate metriche dei caratteri quali "Typo Ascent", "Typo Descent" e "Typo Line Gap".
Utilizzare FontForge per visualizzare i metadati dei caratteri

Ecco alcuni strumenti che puoi utilizzare per leggere i metadati di un carattere:

  • fontkit è un motore dei caratteri creato per Node.js. Questo snippet di codice mostra come utilizzare fontkit per calcolare le sostituzioni delle metriche relative ai caratteri.
  • Capsize è una libreria di layout e dimensioni dei caratteri. Capsize fornisce un'API per ottenere informazioni sulle varie metriche relative ai caratteri.
  • fontdrop.info è un sito web che consente di visualizzare dal browser tabelle dei caratteri e altre informazioni relative ai caratteri.
  • Font Forge è un popolare editor di caratteri desktop. Per visualizzare ascent, descent e line-gap: apri la finestra di dialogo Font Info, seleziona il menu OS/2, quindi la scheda Metrics. Per visualizzare UPM: apri la finestra di dialogo Font Info, quindi seleziona il menu General.

Informazioni sulle tabelle dei caratteri

Potresti notare che concetti come "salita" sono indicati da più metriche, ad esempio le metriche hheaAscent, typoAscent e winAscent. Questo è il risultato di diversi sistemi operativi che adottano approcci diversi al rendering dei caratteri: i programmi sui dispositivi OSX in genere utilizzano metriche del carattere hhea*, mentre i programmi sui dispositivi Windows in genere utilizzano le metriche del carattere typo* (detta anche sTypo*) o win*.

A seconda del carattere, del browser e del sistema operativo, un carattere verrà visualizzato utilizzando le metriche hhea, typo o win.

Mac Windows
Chromium Utilizza le metriche della tabella "hhea". Utilizza le metriche della tabella "typo" se è stata impostata "USE_TYPO_METRICS", altrimenti utilizza le metriche della tabella "win".
Firefox Utilizza le metriche della tabella "typo" se è stata impostata "USE_TYPO_METRICS". In caso contrario, utilizza le metriche della tabella "hhea". Utilizza le metriche della tabella "typo" se è stata impostata "USE_TYPO_METRICS", altrimenti utilizza le metriche della tabella "win".
Safari Utilizza le metriche della tabella "hhea". Utilizza le metriche della tabella "typo" se è stata impostata "USE_TYPO_METRICS", altrimenti utilizza le metriche della tabella "win".

Per ulteriori informazioni sul funzionamento delle metriche relative ai caratteri nei vari sistemi operativi, consulta questo articolo sulle metriche relative ai caratteri verticali.

Compatibilità cross-device

Per la stragrande maggioranza dei caratteri (ad esempio, circa il 90% dei caratteri ospitati da Google Fonts) è possibile utilizzare in sicurezza le sostituzioni delle metriche sui caratteri senza conoscere il sistema operativo dell'utente: in altre parole, per questi caratteri i valori di ascent-override, descent-override e linegap-override rimangono invariati a prescindere dal fatto che si applichino le metriche hhea, typo o win. Questo repository fornisce informazioni sui caratteri a cui si applica e su quali non si applica.

Se utilizzi un carattere che richiede l'utilizzo di set separati di sostituzioni delle metriche carattere per i dispositivi OSX e Windows, l'uso di sostituzioni delle metriche dei caratteri e size-adjust è consigliato solo se sei in grado di variare i fogli di stile in base al sistema operativo dell'utente.

Utilizzare le sostituzioni delle metriche dei caratteri

Poiché le sostituzioni delle metriche dei caratteri vengono calcolate utilizzando misurazioni provenienti dai metadati del carattere web (e non da quello di riserva), rimangono invariate indipendentemente da quale carattere viene utilizzato come carattere di riserva. Ad esempio:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

Come funziona l'aggiustamento delle dimensioni

Introduzione

Il descrittore CSS size-adjust ridimensiona proporzionalmente la larghezza e l'altezza dei glifi dei caratteri. Ad esempio, size-adjust: 200% riduce i glifi dei caratteri a due volte la loro dimensione originale; size-adjust: 50% ridimensiona i glifi dei caratteri dimezzandoli rispetto alle loro dimensioni originali.

Diagramma che mostra i risultati dell'utilizzo di "aggiustamento della taglia: 50%" e "regolazione della taglia: 200%".

Di per sé, size-adjust ha applicazioni limitate per migliorare i caratteri di riserva: nella maggior parte dei casi, un carattere di riserva deve essere ristretto o ampliato leggermente (anziché scalato proporzionalmente) per corrispondere a un carattere web. Tuttavia, la combinazione di size-adjust con l'override delle metriche per i caratteri consente di abbinare due caratteri tra loro orizzontalmente e verticalmente.

Ecco come viene utilizzato size-adjust nei fogli di stile:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

A causa del modo in cui viene calcolato il valore size-adjust (illustrato nella sezione successiva), il valore di size-adjust (e le sostituzioni della metrica carattere corrispondente) cambiano in base al carattere di riserva utilizzato:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Calcolo dell'aggiustamento delle dimensioni e delle sostituzioni delle metriche dei caratteri

Ecco le equazioni per calcolare le sostituzioni delle metriche size-adjust e delle metriche per i caratteri:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

La maggior parte di questi input (salita, discesa e interlinea) può essere letta direttamente dai metadati del carattere web. Tuttavia, avgCharacterWidth deve essere approssimato.

Larghezza di caratteri media approssimativa

In generale, la larghezza media dei caratteri può essere solo approssimata, ma in alcuni casi è possibile calcolarla esattamente: ad esempio, quando si utilizza un caratteri a spaziatura fissa o quando i contenuti di una stringa di testo sono noti in anticipo.

Un esempio di approccio ingenuo al calcolo di avgCharacterWidth è quello di utilizzare la larghezza media di tutti i [a-z\s] caratteri.

Grafico che confronta la larghezza dei singoli glifi Roboto [a-zs].
Larghezza dei glifi Roboto

Tuttavia, la ponderazione uguale a tutti i caratteri probabilmente comporterà un peso inferiore alla larghezza delle lettere utilizzate di frequente (ad esempio, e) e sovrappeso della larghezza delle lettere usate raramente (ad esempio, z).

Un approccio più complesso che migliora la precisione consiste nel prendere in considerazione la frequenza delle lettere e calcolare invece la larghezza media ponderata in frequenza di [a-z\s] caratteri. Questo articolo è un buon riferimento per la frequenza delle lettere e la lunghezza media delle parole nei testi in inglese.

Grafico che mostra la frequenza in lettere per l'inglese.
Frequenza delle lettere in inglese

Scelta di un approccio

I due approcci illustrati in questo articolo presentano ciascuno vantaggi e svantaggi:

  • Se stai iniziando a ottimizzare i caratteri di riserva, è consigliabile utilizzare autonomamente le sostituzioni delle metriche relative ai caratteri. Sebbene questo sia il più semplice dei due approcci, in genere è abbastanza potente da ridurre notevolmente l'entità delle variazioni di layout relative ai caratteri.

  • D'altra parte, se vuoi una maggiore precisione e sei disposto a svolgere più lavoro e test, l'integrazione di size-adjust è un buon approccio da usare. Se implementato correttamente, questo approccio può eliminare in modo efficace le variazioni del layout legate ai caratteri.

Scelta dei caratteri di riserva

Le tecniche descritte in questo articolo si basano sull'uso di sostituzioni delle metriche relative ai caratteri e di size-adjust per trasformare i caratteri locali ampiamente disponibili, anziché cercare di trovare un carattere locale molto simile al carattere web. Quando si scelgono i caratteri locali è importante tenere presente che pochissimi caratteri hanno una disponibilità locale diffusa e che non esiste un solo carattere su tutti i dispositivi.

Arial è il carattere di riserva consigliato per i caratteri Sans-Serif, mentre Times New Roman è quello consigliato per i caratteri Serif. Tuttavia, nessuno di questi caratteri è disponibile su Android (Roboto è l'unico carattere di sistema su Android).

L'esempio riportato di seguito utilizza tre caratteri di riserva per garantire una copertura ampia dei dispositivi: un carattere di riserva che ha come target i dispositivi Windows/Mac, un carattere di riserva che ha come target i dispositivi Android e un carattere di riserva che utilizza una famiglia di caratteri generica.

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Richiesta di feedback

Non esitare a contattarmi per qualsiasi feedback sulla tua esperienza di utilizzo delle sostituzioni delle metriche dei caratteri e di size-adjust.