Aggiustamento delle dimensioni CSS per @font-face

Durante il caricamento di un font web, ora puoi regolarne la scala per normalizzare le dimensioni dei caratteri del documento ed evitare lo spostamento del layout quando passi da un font 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 assicurarsi che 64px sia la dimensione finale coerente.

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

Questo post esplora un nuovo descrittore CSS font-face chiamato size-adjust. Mostra anche 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 caratteri web per evitare lo spostamento cumulativo del layout (CLS).

Browser Support

  • Chrome: 92.
  • Edge: 92.
  • Firefox: 92.
  • Safari: 17.

Source

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

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

Come scalare 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 personalizzato denominato Adjusted Typeface.
  2. Utilizza size-adjust per aumentare le dimensioni di ogni glifo al 150% delle dimensioni predefinite.
  3. Riguarda solo il singolo carattere importato.

Utilizza il carattere personalizzato sopra indicato nel seguente modo:

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

Mitigazione del CLS con lo scambio di caratteri senza interruzioni

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

L'esempio a sinistra presenta uno spostamento del layout, quello a destra no.

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

più contenuti significano un potenziale layout shift maggiore quando si scambiano i caratteri

Se inserisci size-adjust nella regola @font-face, imposti una regolazione globale dei glifi per il tipo di carattere. Se la tempistica è corretta, la modifica visiva sarà minima e il passaggio sarà fluido. Per creare uno scambio senza interruzioni, regola manualmente o prova questo calcolatore di regolazione delle dimensioni di Malte Ubl.

Scegli un carattere web di Google e ricevi uno snippet @font-face pre-regolato.

All'inizio di questo post, la correzione del problema relativo alle dimensioni dei caratteri è stata eseguita per tentativi ed errori. size-adjust è stato spostato nel codice sorgente finché la stessa intestazione in Cookie e Arial non ha restituito lo stesso 64px di Press Start 2P. Ho allineato due caratteri a una dimensione del carattere di destinazione.

@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, determini i target di calibrazione per normalizzare la scala del carattere. Potresti normalizzare i caratteri 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. Destinazione remota:
    regola i caratteri locali in base ai caratteri scaricati.
  2. Target locale:
    regola i caratteri scaricati in base ai caratteri target locali.

Esempio 1: destinazione remota

Considera il seguente snippet che regola un carattere disponibile localmente in modo che le dimensioni corrispondano a un carattere personalizzato src remoto. Un font personalizzato remoto è la destinazione per la calibrazione, ad esempio un font 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 di un carattere personalizzato caricato, per una sostituzione senza interruzioni.

Questa strategia offre ai designer e agli sviluppatori lo stesso carattere per le dimensioni e la tipografia. Il brand è il target di calibrazione. Si tratta di un'ottima notizia per i sistemi di progettazione.

Avere un carattere del brand come target è anche il modo in cui funziona il calcolatore di Malte. Scegli un carattere Google e verrà calcolato come regolare Arial per sostituirlo senza problemi. Ecco un esempio di CSS Roboto della calcolatrice, in cui 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;
}

Il vantaggio di questa strategia è che il rendering viene eseguito senza modifiche, poi i caratteri in arrivo vengono modificati in modo che corrispondano.

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

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

forbici sopra e soffia sulle sostituzioni di parole, mostrando le aree che le funzionalità possono tagliare

ascent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

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 la altezza delle maiuscole si adatti perfettamente al riquadro di selezione complessivo.

descent-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

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 spazio sotto le linee di base di D e O, mentre il titolo blu è stato modificato in modo che le lettere si appoggino perfettamente sulla linea di base.

line-gap-override

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 89.
  • Safari: not supported.

Source

Il descrittore line-gap-override definisce la metrica line-gap per il carattere. Questo è lo spazio tra le righe o l'interlinea esterna consigliata 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, quindi è a 0%, mentre il titolo blu è stato aumentato del 50%, creando spazio sopra e sotto le lettere di conseguenza.

Elaborazione della risposta…

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

Conclusione

La funzionalità CSS @font-face size-adjust è un modo entusiasmante per personalizzare il riquadro di selezione del testo dei layout web per migliorare l'esperienza di sostituzione dei caratteri ed evitare lo spostamento del layout per gli utenti. Per saperne di più, consulta queste risorse:

Foto di Kristian Strand su Unsplash