Aggiustamento delle dimensioni CSS per @font-face

Durante il caricamento di un carattere web, ora è possibile regolarne le dimensioni per normalizzare le dimensioni dei caratteri dei documenti ed evitare variazioni del layout quando si passa da un carattere all'altro

Adam Argyle

Considera la seguente demo in cui font-size è un 64px coerente e l'unica differenza tra ciascuna di queste intestazioni è font-family. Gli esempi a sinistra non sono stati modificati e hanno dimensioni finali incoerenti. Gli esempi a destra utilizzano size-adjust per assicurarsi che 64px sia la dimensione finale coerente.

Questo post esplora un nuovo descrittore font-face CSS chiamato size-adjust. Inoltre, illustra alcuni modi per correggere e normalizzare le dimensioni dei caratteri per un'esperienza utente più fluida, sistemi di design coerenti e un layout delle pagine più prevedibile. Un caso d'uso importante è l'ottimizzazione del rendering dei caratteri web per evitare la spostamento cumulativo del layout (CLS).

Ecco una demo interattiva dello spazio dei problemi. Prova a modificare il carattere tipografico con il menu a discesa e osserva:

1. Le differenze di altezza nei risultati.
2. Passaggi di contenuti visivamente sgradevoli.
3. Spostamento di aree di destinazione interattive (il menu a discesa salta).

Come ridimensionare i caratteri con size-adjust

Un'introduzione alla sintassi:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}

1. Crea un carattere tipografico personalizzato denominato Adjusted Typeface.
2. Utilizza size-adjust per fare lo scale up di ogni glifo al 150% della dimensione predefinita.
3. Interessa solo il singolo carattere tipografico importato.

Utilizza il carattere personalizzato sopra indicato come segue:

h1 {
  font-family: "Adjusted Typeface";
}

Ridurre il CLS con lo scambio di caratteri senza interruzioni

Nella GIF seguente, osserva gli esempi sulla sinistra e vediamo come si verifica una variazione quando il carattere viene modificato. Questo è solo un piccolo esempio con un singolo elemento headline e il problema è molto evidente.

Per migliorare il rendering dei caratteri, una tecnica ottima è lo swap dei caratteri. Esegui il rendering di un carattere di sistema con caricamento rapido per mostrare prima i contenuti, quindi sostituiscilo con un carattere web al termine del caricamento. In questo modo, puoi ottenere il meglio da entrambi i mondi: i contenuti sono visibili il prima possibile e ottieni una pagina ben formattata senza sacrificare il tempo dell'utente per i contenuti. Il problema, però, è che a volte, quando il carattere web viene caricato, l'intera pagina si sposta perché ha un'altezza della casella leggermente diversa.

Se inserisci size-adjust nella regola @font-face, viene impostato un aggiustamento globale del glifo per il tipo di carattere. Un tempo dedicato a questo fattore determinante minime modifiche visive e uno scambio fluido. Per uno scambio senza interruzioni, regola la mano o prova questa calcolatrice di aggiustamento delle taglie di Malte Ubl.

All'inizio di questo post, la risoluzione del problema relativo alle dimensioni dei caratteri è stata eseguita per tentativi ed errori. size-adjust è stato spostato nel codice sorgente fino a quando la stessa intestazione in Cookie e Arial ha eseguito il rendering dello stesso 64px di Press Start 2P. Ho allineato due caratteri a una dimensione del carattere target.

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

Calibrazione dei caratteri

In qualità di autore, stabilisci i target di calibrazione per la normalizzazione della scala dei caratteri. Puoi normalizzare i caratteri Times, Arial o un carattere di sistema e poi modificare i caratteri personalizzati in modo che corrispondano. In alternativa, puoi adattare i caratteri locali a ciò che scarichi.

Strategie per la calibrazione di size-adjust:

1. Target remoto:
   adatta i caratteri locali ai caratteri scaricati.
2. Target locale:
   adatta i caratteri scaricati in base a caratteri target locali.

Esempio 1: destinazione remota

Considera il seguente snippet che regola un carattere disponibile localmente affinché le dimensioni corrispondano a un carattere src personalizzato remoto. Un carattere personalizzato remoto è il target della calibratura, ad esempio un carattere del brand:

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

In questo esempio, il carattere locale Arial viene modificato in previsione del caricamento di un carattere personalizzato, per un cambio senza interruzioni.

Questa strategia offre un vantaggio nell'offrire a designer e sviluppatori lo stesso carattere per dimensioni e tipografia. Il brand è il target di calibrazione. Questa è un'ottima notizia per i sistemi di progettazione.

Anche la calcolatrice di Malte funziona impostando come target il carattere tipografico del brand. Scegli un carattere Google e verrà calcolato il modo in cui regolare Arial per sostituirlo senza problemi. Ecco un esempio di CSS di Roboto proveniente dalla calculatrice, dove Arial viene caricato e denominato "Roboto-fallback":

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

Per creare un aggiustamento completamente multipiattaforma, consulta il seguente esempio che fornisce due caratteri di riserva locali aggiustati in previsione di un carattere del brand.

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

Esempio 2: target locale

Prendi in considerazione il seguente snippet che regola un carattere personalizzato del brand in modo che corrisponda a Arial:

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

Questa strategia ha il vantaggio di eseguire il rendering senza alcuna modifica, quindi di adattare i caratteri in arrivo in modo che corrispondano.

Ottimizzazione con ascent-override, descent-override e line-gap-override

Se il ridimensionamento generico dei glifi non è sufficiente per modificare il progetto o le strategie di caricamento, ecco alcune opzioni di ottimizzazione più precise che possono essere utilizzate insieme a size-adjust. Le proprietà ascent-override, descent-override, e line-gap-override sono attualmente implementate in Chromium 87 e versioni successive e in Firefox 89 e versioni successive.

ascent-override

Il descrittore ascent-override definisce l'altezza sopra la linea di base di un carattere.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

Il titolo rosso (non modificato) ha uno spazio sopra le lettere maiuscole A e O, mentre il titolo blu è stato modificato in modo che l'altezza della cassetta sia aderente alla scatola delimitante complessiva.

descent-override

Il descrittore descent-override definisce l'altezza sotto la base di riferimento del carattere.

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

Il titolo rosso (non modificato) ha uno spazio sotto le linee di base delle lettere D e O, mentre il titolo blu è stato modificato in modo che le lettere siano ben a contatto con la linea di base.

line-gap-override

Il descrittore line-gap-override definisce la metrica spaziatura riga per il carattere. Si tratta dello spazio tra le righe o del rientro esterno consigliato per il carattere.

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

Il titolo rosso (non modificato) non ha line-gap-override, in sostanza è a 0%, mentre il titolo blu è stato aumentato del 50%, creando spazio sopra e sotto le lettere di conseguenza.

Riassumendo

Ognuna di queste sostituzioni offre un modo aggiuntivo per tagliare l'eccesso dalla delimitazione del testo sicuro del web. Puoi personalizzare la casella di testo per una presentazione precisa.

Conclusione

La funzionalità CSS @font-face size-adjust è un ottimo modo per personalizzare il riquadro di delimitazione del testo dei layout web per migliorare l'esperienza di scambio dei caratteri evitando quindi la variazione del layout per gli utenti. Per saperne di più, consulta queste risorse:

• Specifiche dei caratteri CSS di livello 5
• Regolazione delle dimensioni su MediaDome
• Generatore di @font-face per lo scambio senza interruzioni
• Cumulative Layout Shift (CLS) su web.dev
• Un nuovo modo per ridurre l'impatto del caricamento dei caratteri: descrittori dei caratteri CSS

Foto di Kristian Strand su Unsplash