Aggiustamento delle dimensioni CSS per @font-face

Ora, quando carichi un carattere web, puoi regolarne la scala per normalizzare le dimensioni dei caratteri del documento ed evitare il cambiamento del layout quando passi da un carattere all'altro.

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 variazione cumulativa 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 delle 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 aumentare le dimensioni di ogni glifo del 150% rispetto alle dimensioni predefinite.
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, guarda gli esempi a sinistra e come cambia il carattere. Questo è solo un piccolo esempio con un singolo elemento headline e il problema è molto evidente.

Per migliorare il rendering dei caratteri, un'ottima tecnica è lo scambio di 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 di attesa degli utenti. 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.

Inserendo size-adjust nella regola @font-face, viene impostato un aggiustamento globale dei glifi per il tipo di carattere. Se scegli il momento giusto, la transizione sarà fluida e le modifiche visive saranno minime. Per creare uno scambio senza problemi, regola manualmente le dimensioni o prova questo calcolatore per la regolazione delle dimensioni 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 modificato nel codice sorgente finché la stessa intestazione in Cookie e Arial non ha generato lo stesso 64px di Press Start 2P in modo naturale. 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, sei tu a determinare i target di calibrazione per la normalizzazione della scala dei caratteri. Puoi normalizzare su Times, Arial o un carattere di sistema, quindi regolare i caratteri personalizzati in modo che corrispondano. In alternativa, puoi modificare i caratteri locali in base a ciò che scarichi.

Strategie per la calibrazione di size-adjust:

1. Destinazione remota:
   regola i caratteri locali in base ai caratteri scaricati.
2. Target locale:
   modifica i caratteri scaricati in base ai caratteri target locali.

Esempio 1: destinazione remota

Prendi in considerazione lo snippet seguente che regola le dimensioni di un carattere disponibile localmente in modo che corrispondano a quelle di un carattere personalizzato di origine 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 ha il vantaggio di offrire a designer e sviluppatori lo stesso carattere per le dimensioni e la tipografia. Il brand è il target di calibrazione. Si tratta di ottime notizie per i sistemi di design.

Anche la calcolatrice di Malte funziona impostando come target il carattere tipografico di un 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

Considera il seguente snippet che regola un carattere personalizzato del brand in modo che corrisponda ad 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 più fine con ascent-override, descent-override e line-gap-override

Se la scalatura generica dei glifi non è sufficiente per le tue strategie di design o caricamento, ecco alcune opzioni di regolazione più fine che funzionano con 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) presenta uno spazio sopra le lettere maiuscole A e O, mentre il titolo blu è stato modificato in modo che l'altezza della cassetta si adatti perfettamente alla scatola delimitante complessiva.

descent-override

Il descrittore descent-override definisce l'altezza sotto la linea di base 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 modo interessante per personalizzare il riquadro delimitante del testo dei layout web al fine di migliorare l'esperienza di sostituzione dei caratteri, evitando così il cambiamento del layout per gli utenti. Per saperne di più, consulta queste risorse:

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

Foto di Kristian Strand su Unsplash