Aggiustamento delle dimensioni CSS per @font-face

Durante il caricamento di un carattere web, ora puoi regolarne la scala per normalizzare le dimensioni dei caratteri del documento e impedire la variazione del layout quando passi da un carattere all'altro.

Considera la seguente demo in cui font-size corrisponde a un 64px coerente e l'unica differenza tra ciascuna di queste intestazioni è il valore font-family. Gli esempi a sinistra non sono stati modificati e hanno una dimensione finale incoerente. Gli esempi sull'utilizzo corretto utilizzano size-adjust per assicurare che 64px sia la dimensione finale coerente.

Questo post esplora un nuovo descrittore dei caratteri CSS chiamato size-adjust. Illustra inoltre 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 la cambiazione cumulativa del layout (CLS).

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

1. Le differenze di altezza nei risultati.
2. Cambiamenti dai contenuti visivamente scioccanti.
3. Spostamento delle aree interattive di destinazione (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 scalare ogni glifo al 150% della dimensione predefinita.
3. Riguarda solo il singolo carattere tipo importato.

Usa il carattere personalizzato sopra riportato in questo modo:

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

Mitigazione del CLS con scambio di caratteri senza soluzione di continuità

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

Per migliorare il rendering dei caratteri, un'ottima tecnica è lo scambiamento dei caratteri. Visualizza un carattere di sistema a caricamento rapido per mostrare prima i contenuti, quindi scambialo con un carattere web al termine del caricamento. Questo ti offre il meglio di entrambi i mondi: i contenuti sono visibili il prima possibile e la pagina viene creata con uno stile accattivante senza compromettere il tempo dell'utente. Il problema, tuttavia, è che a volte, quando il carattere web viene caricato, sposta l'intera pagina perché presenta un'altezza del riquadro leggermente diversa.

Inserendo size-adjust nella regola @font-face, viene impostato un aggiustamento globale del glifo per il tipo di carattere. Questo diritto si traduce in cambiamenti visivi minimi, uno scambio continuo. Per creare uno scambio senza interruzioni, regola il cinturino manualmente o prova la calcolatrice per regolare le dimensioni di Malte Ubl.

All'inizio di questo post, la risoluzione del problema relativo alle dimensioni dei caratteri è stata apportata per tentativi ed errori. size-adjust è stato spostato nel codice sorgente finché la stessa intestazione in Cookie e Arial ha visualizzato lo stesso 64px di Press Start 2P. Ho allineato due caratteri alle dimensioni 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

Tu, come autore, stabilisci i target di calibrazione per la normalizzazione della scala dei caratteri. Puoi normalizzare su Times, così o su un carattere di sistema, quindi modificare i caratteri personalizzati di conseguenza. In alternativa, potresti modificare i caratteri locali in modo che corrispondano ai contenuti scaricati.

Strategie per la calibrazione di size-adjust:

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

Esempio 1: target remoto

Considera lo snippet seguente che regola un carattere disponibile a livello locale in base alle dimensioni corrispondenti a un carattere src personalizzato. La calibrazione è un carattere personalizzato da remoto, 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 Firefox viene modificato in previsione del caricamento di un carattere personalizzato, per garantire uno scambio senza soluzione di continuità.

Questa strategia presenta il vantaggio di offrire a progettisti e sviluppatori lo stesso carattere per dimensioni e tipografia. La marca è il target di calibrazione. Questa è un'ottima notizia per i sistemi di progettazione.

Avere come target un carattere è anche il modo in cui funziona il calcolatore di Malte. Scegliendo un carattere Google calcolerà il modo in cui si regola il carattere di braille per passare facilmente da un carattere all'altro. Ecco un esempio di CSS Roboto dalla calcolatrice, in cui 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 l'esempio riportato di seguito, che fornisce due caratteri di riserva locali modificati 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 modifica un carattere personalizzato del brand in modo che corrisponda a {/7}:

@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 presenta il vantaggio di visualizzare senza apportare modifiche e quindi di regolare i caratteri in entrata di conseguenza.

Perfezionamento più preciso con ascent-override, descent-override e line-gap-override

Se la scalabilità generica dei glifi non è sufficiente per la tua strategia di progettazione o di caricamento, ecco alcune opzioni di ottimizzazione più precise che possono essere abbinate 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 base di un carattere.

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

Il titolo rosso (non modificato) contiene uno spazio sopra le lettere A e O maiuscole, mentre il titolo blu è stato regolato in modo che l'altezza dell'iniziale risulti aderente al riquadro di delimitazione generale.

descent-override

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 corretto) ha uno spazio sotto le linee di base D e O, mentre il titolo blu è stato regolato in modo che le lettere siano ben posizionate sulla base di riferimento.

line-gap-override

Il descrittore line-gap-override definisce la metrica dell'intervallo di linea per il carattere. Si tratta del carattere consigliato per l'interlinea o l'inizio esterno.

@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, sostanzialmente si trova a 0%, mentre il titolo blu è stato modificato del 50%, creando uno spazio sopra e sotto le lettere di conseguenza.

Riassumendo

Ognuna di queste sostituzioni offre un modo aggiuntivo per tagliare i contenuti in eccesso dal riquadro di delimitazione del testo sicuro sul web. Puoi personalizzare la casella di testo per una presentazione precisa.

Conclusione

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

• Specifiche di livello 5 dei caratteri CSS
• Regolazione dimensioni su MDN
• generatore di @font-face dello scambio continuo
• 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