Visueel stabiele gemengde lettertypen

Als je verschillende lettertypefamilies combineert, bijvoorbeeld als je inline codefragmenten invoegt of lettertypefamilies wisselt voor verschillende thema's, kunnen verschillen in x-hoogte (de hoogte van kleine letters) ervoor zorgen dat het ene lettertype veel kleiner of groter lijkt dan het andere lettertype. Dit kan leiden tot slechte leesbaarheid en verschuivingen in de indeling.

Met de property font-size-adjust kun je de visuele grootte van tekst normaliseren door de lettergrootte aan te passen op basis van een specifieke lettertypestatistiek (meestal de x-hoogte).

Stapsgewijze implementatie

1. VERPLICHT: Pas font-size-adjust toe op elementen waarvoor consistentie van het lettertype essentieel is, zoals containers die weblettertypen gebruiken of blokken met gemengde lettertypefamilies.
2. VERPLICHT: Gebruik het zoekwoord from-font voor elementen om de lettergrootte in geneste elementen automatisch aan te passen aan de verhoudingen van het primaire lettertype.
3. VERPLICHT: Gebruik een specifieke numerieke overschrijvingswaarde voor de beeldverhouding voor font-size-adjust (bijv. font-size-adjust: 0.5) om de verhoudingen onafhankelijk te normaliseren als de lettertypeverhoudingen waarop je je baseert, afkomstig zijn uit verschillende thema's.

Voorbeeld: x-hoogte automatisch normaliseren

from-font gebruiken is de meest robuuste aanpak. De hoogte-breedteverhouding van de x-hoogte wordt uit het eerste beschikbare lettertype gehaald en toegepast op lettertypen in onderliggende elementen.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

Voorbeeld: Een specifieke x-hoogte opgeven

Als het lettertype dat je wilt aanpassen geen onderliggend element is van het lettertype waarop je de grootte wilt baseren, voer je een waarde in om de x-hoogte aan te passen.

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

Reservestrategieën

VERPLICHT: In browsers die font-size-adjust niet ondersteunen, worden lettertypen weergegeven met hun natuurlijke font-size-waarde. Je moet een geldige reservestrategie bieden voor browsers die dit niet ondersteunen door een @supports-blok te gebruiken om dit te beperken:

• Gebruik @supports not (font-size-adjust: from-font) om ondersteuning voor font-size-adjust te detecteren en reserve-stijlen te bieden (bijvoorbeeld aangepaste regelhoogte of lettergrootte).
• Kies lettertypen met een vergelijkbare x-hoogte als je primaire lettertype.
• Pas specifieke font-size- en line-height-overschrijvingen toe voor alternatieve en geneste lettertypefamilies.

/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}