Aggiustamento delle dimensioni CSS per @font-face

Durante il caricamento di un web font, ora puoi regolarne la scala per normalizzare le dimensioni dei caratteri del documento ed evitare variazioni del layout quando passi 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 una dimensione finale incoerente. Gli esempi a destra utilizzano size-adjust per garantire che 64px sia la dimensione finale coerente.

In questo esempio, gli strumenti di debug del layout della griglia CSS di Chrome DevTools vengono utilizzati per mostrare le altezze.

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

Browser Support

• 92
• 92
• 92
• 17

Source

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

1. Le differenze di altezza nei risultati.
2. Spostamenti di contenuti visivamente fastidiosi.
3. Spostamento delle aree target interattive (il menu a discesa si sposta).

Termine chiave: famiglia di caratteri e carattere tipografico: un carattere tipografico è indicato dal nome della famiglia più il carattere. Helvetica Bold si riferisce al carattere tipografico in grassetto specifico, mentre Helvetica si riferisce genericamente all'intera famiglia di oltre 8 caratteri tipografici (normale, grassetto, corsivo e così via). Con la proprietà CSS @font-face, avrai a che fare con i caratteri tipografici, anche se per utilizzarli devi scrivere font-family.

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 fino al 150% rispetto alle dimensioni predefinite.
3. Interessa solo il singolo carattere tipografico importato.

Utilizza il carattere tipografico personalizzato riportato sopra in questo modo:

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

Avviso: se il secondo titolo nella demo riportata sopra non è più grande del primo, il tuo browser non supporta size-adjust.

Mitigazione del CLS con lo scambio di caratteri senza interruzioni

Nella seguente GIF, guarda gli esempi a sinistra e come avviene uno spostamento quando il carattere viene modificato. Questo è solo un piccolo esempio con un singolo elemento del titolo e il problema è molto evidente.

L'esempio a sinistra presenta una variazione del layout, mentre quello a destra no.

Per migliorare il rendering dei caratteri, un'ottima tecnica è lo scambio dei caratteri. Esegui il rendering di un carattere di sistema a caricamento rapido per mostrare prima i contenuti, quindi sostituiscilo con un carattere web al termine del caricamento di quest'ultimo. In questo modo, ottieni il meglio da entrambi i mondi: i contenuti sono visibili il prima possibile e ottieni una pagina con uno stile gradevole senza sacrificare il tempo di accesso ai contenuti dell'utente. Il problema, tuttavia, è che a volte, quando il web font viene caricato, l'intera pagina si sposta perché viene visualizzata con un'altezza della casella leggermente diversa.

più contenuti equivalgono a una maggiore variazione del layout potenziale quando il carattere cambia

Inserendo size-adjust nella regola @font-face, viene impostata una regolazione globale dei glifi per il carattere. Se scegli il momento giusto, la modifica visiva sarà minima e il passaggio avverrà senza problemi. Per creare uno scambio senza interruzioni, regola manualmente o prova questo calcolatore di regolazione delle dimensioni di Malte Ubl.

Scegli un Google Web Font e ricevi uno snippet @font-face pre-adattato.

All'inizio di questo post, la correzione del problema relativo alle dimensioni dei caratteri è stata eseguita per tentativi ed errori. size-adjust è stato modificato nel codice sorgente fino a quando la stessa intestazione in Cookie e Arial non ha mostrato lo 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, sei tu a determinare i target di calibrazione per normalizzare la scala dei caratteri. Potresti 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 modo che corrispondano a quelli scaricati.

Strategie per la calibrazione di size-adjust:

1. Target remoto:
   Adatta i caratteri locali ai caratteri scaricati.
2. Target locale:
   Adatta i caratteri scaricati ai caratteri target locali.

Esempio 1: target remoto

Considera il seguente snippet che regola un carattere disponibile localmente in modo che le dimensioni corrispondano a un carattere personalizzato src remoto. Un carattere personalizzato remoto è il target per la calibrazione, 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 adattato in previsione di un carattere personalizzato caricato, per uno scambio senza interruzioni.

Questa strategia ha il vantaggio di offrire a designer e sviluppatori lo stesso carattere per il dimensionamento e la tipografia. Il brand è il target di calibrazione. Questa è una notizia fantastica per i sistemi di progettazione.

Anche il calcolatore di Malte funziona con un carattere tipografico del brand come target. Scegli un carattere Google Fonts e l'estensione calcolerà come regolare Arial per sostituirlo senza problemi. Ecco un esempio di CSS Roboto del calcolatore, in cui Arial viene caricato e denominato "Roboto-fallback":

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

Avviso: l'ordine di font-family è fondamentale. È qui che vengono definiti l'ordine e la priorità. Assicurati che il carattere tipografico che preferisci sia il primo. Inoltre, local(Arial) potrebbe non essere disponibile su tutti i dispositivi degli utenti, pertanto è importante fornire più opzioni di riserva nella famiglia di caratteri.

Per creare un aggiustamento completamente multipiattaforma, vedi l'esempio seguente 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 adatta 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 modifiche, per poi adattare i caratteri in arrivo in modo che corrispondano.

Ottimizzazione più precisa con ascent-override, descent-override e line-gap-override

Se la scalabilità generica dei glifi non è sufficiente per le tue strategie di progettazione o caricamento, ecco alcune opzioni di ottimizzazione che funzionano insieme a size-adjust. Le proprietà ascent-override, descent-override e line-gap-override sono attualmente implementate in Chromium 87 e versioni successive e Firefox 89 e versioni successive.

ascent-override

Browser Support

• 87
• 87
• 89
• 

Source

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 spazio sopra le lettere maiuscole A e O, mentre il titolo blu è stato modificato in modo che l'altezza delle lettere maiuscole si adatti perfettamente al riquadro di delimitazione complessivo.

descent-override

Browser Support

• 87
• 87
• 89
• 

Source

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

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

Il titolo rosso (non modificato) ha spazio sotto le linee di base delle lettere D e O, mentre il titolo blu è stato modificato in modo che le lettere siano posizionate perfettamente sulla linea di base.

line-gap-override

Browser Support

• 87
• 87
• 89
• 

Source

Il descrittore line-gap-override definisce la metrica di spaziatura tra le righe per il carattere. Si tratta dell'interlinea consigliata per il carattere o dell'interlinea esterna.

@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, quindi è essenzialmente a 0%, mentre il titolo blu è stato aumentato del 50%, creando spazio sopra e sotto le lettere di conseguenza.

Elaborazione della risposta…

Ognuno di questi override offre un modo aggiuntivo per tagliare l'eccesso dal riquadro di delimitazione del testo sicuro del web. Puoi personalizzare la casella di testo per una presentazione precisa.

Avviso: se una delle demo precedenti non mostra differenze, il tuo browser non supporta gli override.

Conclusione

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

• Specifica CSS Fonts Level 5
• Regolazione delle dimensioni su MDN
• Seamless swap @font-face generator
• Cumulative Layout Shift (CLS) su web.dev
• A New Way To Reduce Font Loading Impact: CSS Font Descriptors