Visueel stabiele lettertype-fallbacks

Als weblettertypen worden geladen, vervangen ze vaak een reservelettertype met andere afmetingen, zelfs als beide zijn ingesteld op dezelfde font-size. Dit veroorzaakt een verschuiving van de indeling (Cumulative Layout Shift) en kan tekst onleesbaar maken als de kleine letters van het reservelettertype (x-hoogte) aanzienlijk verschillen van het voorkeurslettertype.

De property font-size-adjust lost dit op door de grootte van het lettertype te normaliseren op basis van een specifieke statistiek (meestal de x-hoogte). Zo neemt de tekst dezelfde visuele ruimte in, ongeacht welk lettertype op dat moment actief is.

Stapsgewijze implementatie

1. De hoogte-breedteverhouding van je gewenste lettertype bepalen

Als je fallbacks wilt normaliseren, heb je de aspectwaarde (de verhouding tussen kleine letters en de lettergrootte) van je primaire lettertype nodig.

• Automatische detectie (aanbevolen): Gebruik het zoekwoord from-font om de browser de verhouding te laten extraheren uit je primaire weblettertype.
• Handmatige berekening: Als je de specifieke waarde weet (bijvoorbeeld 0,545 voor Verdana), kun je deze rechtstreeks invoeren voor nauwkeurigere controle.

2. font-size-adjust toepassen op de tekstcontainer

Pas de eigenschap toe op het element of een bovenliggende container. Zo zorg je dat als het primaire lettertype niet kan worden geladen of wordt geladen, het reservelettertype wordt geschaald naar de visuele grootte van het primaire lettertype.

.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. (Optioneel) Aanpassen voor specifieke statistieken

Hoewel x-hoogte de standaard en meest gebruikte is, kun je normaliseren op basis van andere statistieken, zoals cap-height (handig voor koppen met alleen hoofdletters) of ch-width (handig voor monospace-lettertypen).

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

4. Visuele stabiliteit verifiëren

Zorg dat de waarde font-size-adjust de reservewaarde correct uitlijnt. Je kunt dit testen door het weblettertype tijdelijk te blokkeren of de declaratie font-family aan te passen in de DevTools van je browser en te controleren of de tekstindeling stabiel blijft.

Reservestrategieën

In browsers die font-size-adjust niet ondersteunen, wordt het lettertype weergegeven op de standaardschaal. Dit kan leiden tot verschuivingen in de indeling of wijzigingen in de leesbaarheid tijdens het wisselen van lettertypen.

Als je dit wilt beperken zonder font-size-adjust, kun je de @font-face-beschrijvingen size-adjust, ascent-override en descent-override gebruiken om handmatig reservelettertypen aan te passen. Deze zijn wel complexer om te berekenen dan één font-size-adjust-waarde.