Font di riserva visivamente stabili

Quando i web font vengono caricati, spesso sostituiscono un font di riserva con dimensioni diverse, anche se entrambi sono impostati sullo stesso font-size. Ciò causa una "variazione del layout" (Cumulative Layout Shift) e può rendere il testo illeggibile se le lettere minuscole del carattere di riserva (altezza x) sono significativamente diverse da quelle del carattere preferito.

La proprietà font-size-adjust risolve questo problema normalizzando le dimensioni del carattere in base a una metrica specifica (di solito l'altezza x), assicurando che il testo occupi lo stesso spazio visivo indipendentemente dal carattere attualmente attivo.

Procedura di implementazione

1. Identifica le proporzioni del carattere che preferisci

Per normalizzare i fallback, devi conoscere il "valore dell'aspect ratio" (il rapporto tra le lettere minuscole e le dimensioni del carattere) del carattere principale.

• Rilevamento automatico (consigliato): utilizza la parola chiave from-font per consentire al browser di estrarre il rapporto dal web font principale.
• Calcolo manuale: se conosci il valore specifico (ad es. 0,545 per Verdana), puoi fornirlo direttamente per un controllo più preciso.

2. Applica font-size-adjust al contenitore di testo

Applica la proprietà all'elemento o a un contenitore principale. In questo modo, se il carattere principale non viene caricato o è in fase di caricamento, il carattere di riserva viene ridimensionato in modo da corrispondere alle dimensioni visive del carattere principale.

.text-content {
  /* Define your font stack as usual */
  font-family: "MyWebFont", "Arial", sans-serif;
  font-size: 1rem;

  /* MANDATORY: Normalize the font size based on the primary font's x-height.
     This ensures that if 'Arial' is used as a fallback, it is scaled 
     to match the x-height of 'MyWebFont'. */
  font-size-adjust: from-font;
}

3. (Facoltativo) Modifica per metriche specifiche

Sebbene l'altezza x sia l'impostazione predefinita e più comune, puoi normalizzare in base ad altre metriche come cap-height (utile per le intestazioni in maiuscolo) o ch-width (utile per i caratteri a spaziatura fissa).

h1 {
  /* Normalize based on the height of capital letters */
  font-size-adjust: cap-height from-font;
}

4. Verifica la stabilità visiva

Assicurati che il valore font-size-adjust allinei correttamente il valore di riserva. Puoi eseguire un test bloccando temporaneamente il web font o modificando la dichiarazione font-family in DevTools del browser e verificando che il layout del testo rimanga stabile.

Strategie di riserva

Nei browser che non supportano font-size-adjust, il carattere verrà visualizzato con la scala predefinita. Ciò potrebbe comportare variazioni del layout o modifiche alla leggibilità durante gli scambi di caratteri.

Per mitigare questo problema senza font-size-adjust, puoi utilizzare i descrittori @font-face size-adjust, ascent-override e descent-override per ottimizzare manualmente i font di riserva, anche se sono più complessi da calcolare rispetto a un singolo valore font-size-adjust.