Verbeterde fallbacks voor lettertypen, Verbeterde fallbacks voor lettertypen

Katie Hempenius

Samenvatting

In dit artikel wordt dieper ingegaan op de fallbacks van lettertypen en de API's size-adjust , ascent-override , descent-override en line-gap-override . Deze API's maken het mogelijk om lokale lettertypen te gebruiken om reservelettertypen te maken die nauw of exact overeenkomen met de afmetingen van een weblettertype. Dit vermindert of elimineert lay-outverschuivingen veroorzaakt door het wisselen van lettertypen.

Als u dit artikel liever niet leest, zijn dit enkele van de tools die u kunt gebruiken om deze API's onmiddellijk te gaan gebruiken:

Kaderhulpmiddelen:

• @next/font : Vanaf Next 13 gebruikt next/font automatisch metrische overschrijvingen van lettertypen en size-adjust om passende lettertype-fallbacks te bieden.
• @nuxtjs/fontaine : Vanaf Nuxt 3 kunt u nuxt/fontaine gebruiken om automatisch overeenkomende lettertype-fallbacks te genereren en in te voegen in de stylesheets die door uw Nuxt-app worden gebruikt.

Niet-kaderhulpmiddelen:

• Fontaine : Fontaine is een bibliotheek die automatisch fallbacks voor lettertypen genereert en invoegt die gebruikmaken van lettertypemetrische overschrijvingen.
• Deze opslagplaats bevat de lettertypestatistieken voor alle lettertypen die worden gehost door Google Fonts. Deze waarden kunnen in uw stylesheets worden gekopieerd en geplakt.

Achtergrond

Een fallback-lettertype is een lettertype dat wordt gebruikt als het primaire lettertype nog niet is geladen of als er glyphs ontbreken die nodig zijn om de pagina-inhoud weer te geven. De onderstaande CSS geeft bijvoorbeeld aan dat de sans-serif lettertypefamilie moet worden gebruikt als reservelettertype voor "Roboto" .

font-family: "Roboto" , sans-serif;

Fallback-lettertypen kunnen worden gebruikt om tekst sneller weer te geven (dat wil zeggen door font-display: swap te gebruiken). Als gevolg hiervan is de pagina-inhoud eerder leesbaar en bruikbaar, maar historisch gezien is dit ten koste gegaan van de lay-outinstabiliteit: lay-outverschuivingen komen vaak voor wanneer een reservelettertype wordt vervangen door het weblettertype. De hieronder besproken nieuwe API's kunnen dit probleem echter verminderen of elimineren door het mogelijk te maken om reservelettertypen te maken die dezelfde hoeveelheid ruimte in beslag nemen als hun tegenhanger voor weblettertypen.

Verbeterde fallbacks voor lettertypen

Er zijn twee mogelijke benaderingen voor het genereren van "verbeterde" lettertype-fallbacks. Bij de eenvoudigere aanpak wordt alleen de API voor lettertypemetrische overschrijvingen gebruikt. De meer gecompliceerde (maar krachtigere) aanpak maakt gebruik van zowel de API voor lettertype-metrische overschrijvingen als size-adjust . In dit artikel worden beide benaderingen uitgelegd.

Hoe het overschrijven van lettertypestatistieken werkt

Intro

Metriekoverschrijvingen voor lettertypen bieden een manier om de stijging, daling en regelafstand van een lettertype te overschrijven:

• De stijging meet de grootste afstand die de glyphs van een lettertype boven de basislijn uitsteken.
• Afdaling meet de verste afstand die de glyphs van een lettertype onder de basislijn reiken.
• Regelafstand , ook wel "leading" genoemd, meet de afstand tussen opeenvolgende tekstregels.

Metrische lettertypeoverschrijvingen kunnen worden gebruikt om de stijging, daling en regelafstand van een reservelettertype te overschrijven, zodat deze overeenkomt met de stijging, daling en regelafstand van het weblettertype. Hierdoor zullen het webfont en het aangepaste fallback font altijd dezelfde verticale afmetingen hebben.

Overschrijvingen van lettertypestatistieken worden in een stylesheet als deze gebruikt:

body {
    font-family: Poppins, "fallback for poppins";
}

@font-face {
    font-family: "fallback for poppins";
    src: local("Times New Roman");
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 10%;
}

Met de hulpprogramma's die aan het begin van dit artikel worden vermeld, kunnen de juiste metrische overschrijvingswaarden voor lettertypen worden gegenereerd. U kunt deze waarden echter ook zelf berekenen.

Metrische overschrijvingen voor lettertypen berekenen

De volgende vergelijkingen leveren de lettertypemetrische overschrijvingen op voor een bepaald weblettertype. De waarden van metrische overschrijvingen voor lettertypen moeten worden geschreven als percentages (bijvoorbeeld 105% ) in plaats van als decimalen.

ascent-override = ascent/unitsPerEm
descent-override = descent/unitsPerEm
line-gap-override = line-gap/unitsPerEm

Opmerking: Units per em (UPM) verwijst naar de rastergrootte die werd gebruikt bij het ontwerpen van het lettertype. Hoewel er andere rasterformaten bestaan, zijn 1000 (een raster van 1000x1000) of 2048 (een raster van 2048x2048) veruit het populairst. Het is belangrijk om UPM te kennen om andere statistieken in perspectief te kunnen plaatsen. Een stijging van 900 betekent bijvoorbeeld heel verschillende dingen, afhankelijk van of een lettertype een UPM van 1000 of 2048 heeft.

Dit zijn bijvoorbeeld de lettertypemetrische overschrijvingen voor het Poppins- lettertype:

/*
Poppins font metrics:
ascent = 1050
descent = 350
line-gap = 100
UPM: 1000
*/

ascent-override: 105%;  /* = 1050/1000 */
descent-override: 35%;  /* = 350/1000 */
line-gap-override: 10%; /* = 100/1000 */

De waarden van ascent , descent , line-gap en unitsPerEm komen allemaal uit de metagegevens van het weblettertype. In het volgende gedeelte van dit artikel wordt uitgelegd hoe u deze waarden kunt verkrijgen.

Lettertypetabellen lezen

De metagegevens van een lettertype (met name de lettertypetabellen ) bevatten alle informatie die u nodig hebt om de metrische overschrijvingen van lettertypen te berekenen.

FontForge gebruiken om metagegevens van lettertypen te bekijken

Hier volgen enkele hulpmiddelen die u kunt gebruiken om de metagegevens van een lettertype te lezen:

• fontkit is een lettertype-engine gebouwd voor Node.js. Dit codefragment laat zien hoe u fontkit kunt gebruiken om metrische overschrijvingen voor lettertypen te berekenen.
• Capsize is een bibliotheek voor lettertypegrootte en lay-out. Capsize biedt een API voor het verkrijgen van informatie over verschillende lettertypestatistieken.
• fontdrop.info is een website waarmee u lettertypetabellen en andere lettertypegerelateerde informatie vanuit de browser kunt bekijken.
• Font Forge is een populaire desktoplettertype-editor. Om ascent , descent en line-gap te bekijken: open het dialoogvenster Font Info , selecteer het OS/2 menu en selecteer vervolgens het tabblad Metrics . Om UPM te bekijken: open het dialoogvenster Font Info en selecteer vervolgens het menu General .

Opmerking: Sommige lettertypegerelateerde JavaScript-bibliotheken benaderen de stijging, daling en regelafstand door glyphs op het canvas te tekenen en het resultaat te meten. Deze aanpak is echter minder nauwkeurig dan het rechtstreeks uit de lettertypetabel lezen van de lettertypestatistieken.

Lettertypetabellen begrijpen

Het zal je misschien opvallen dat er naar concepten als 'ascent' wordt verwezen door meerdere statistieken. Er zijn bijvoorbeeld hheaAscent , typoAscent en winAscent statistieken. Dit is het resultaat van het feit dat verschillende besturingssystemen verschillende benaderingen hanteren bij het weergeven van lettertypen: programma's op OSX-apparaten gebruiken over het algemeen hhea* -lettertypestatistieken, terwijl programma's op Windows-apparaten doorgaans typo* (ook wel sTypo* genoemd) of win* -lettertypestatistieken gebruiken.

Opmerking: Meer specifiek volgen programma's op Windows-apparaten doorgaans de conventie om typo* -statistieken te gebruiken als een lettertype USE_TYPO_METRICS heeft ingesteld en win* -statistieken te gebruiken als dat niet het geval is. USE_TYPO_METRICS is een Booleaanse parameter die is geïntroduceerd om ontwerpers in staat te stellen een voorkeur in te stellen tussen het gebruik van typo* en win* -statistieken.

Afhankelijk van het lettertype, de browser en het besturingssysteem wordt een lettertype weergegeven met behulp van hhea , typo of win statistieken.

	Mac	ramen
Chroom	Gebruikt statistieken uit de 'hhea'-tabel.	Gebruikt statistieken uit de "typo"-tabel als "USE_TYPO_METRICS" is ingesteld, gebruikt anders statistieken uit de "win"-tabel.
Firefox	Gebruikt statistieken uit de tabel "typo" als "USE_TYPO_METRICS" is ingesteld, gebruikt anders statistieken uit de tabel "hhea".	Gebruikt statistieken uit de "typo"-tabel als "USE_TYPO_METRICS" is ingesteld, gebruikt anders statistieken uit de "win"-tabel.
Safari	Gebruikt statistieken uit de 'hhea'-tabel.	Gebruikt statistieken uit de "typo"-tabel als "USE_TYPO_METRICS" is ingesteld, gebruikt anders statistieken uit de "win"-tabel.

Voor meer informatie over hoe lettertypestatistieken werken op verschillende besturingssystemen, raadpleegt u dit artikel over verticale statistieken .

Compatibiliteit tussen apparaten

Voor de overgrote meerderheid van de lettertypen (bijvoorbeeld ~90% van de lettertypen die worden gehost door Google Fonts) kunnen overschrijvingen van lettertypestatistieken veilig worden gebruikt zonder het besturingssysteem van de gebruiker te kennen: met andere woorden, voor deze lettertypen zijn de waarden van ascent-override , descent-override en linegap-override blijven precies hetzelfde, ongeacht of de statistieken hhea , typo of win van toepassing zijn. Deze repository geeft informatie over voor welke lettertypen dit wel en niet geldt.

Als u een lettertype gebruikt waarvoor afzonderlijke sets lettertype-metrische overschrijvingen voor OSX- en Windows-apparaten nodig zijn, wordt het gebruik van metrische lettertype-overschrijvingen en size-adjust alleen aanbevolen als u de mogelijkheid heeft om uw stylesheets te variëren op basis van het besturingssysteem van de gebruiker.

Opmerking: in deze sectie wordt uitgelegd hoe u kunt bepalen of een lettertype dezelfde metrische overschrijvingen voor lettertypen gebruikt op zowel OSX- als Windows-apparaten. Bepaal eerst of het lettertype USE_TYPO_METRICS heeft ingeschakeld.

• Als USE_TYPO_METRICS is ingeschakeld, wordt het lettertype weergegeven met behulp van hhea statistieken op OSX-apparaten en typo statistieken op Windows-apparaten.
• Om de normale lijnhoogte op OSX te berekenen, gebruikt u de volgende vergelijking: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm .
• Om de normale lijnhoogte op Windows te berekenen, gebruikt u de volgende vergelijking: (typoAscent + typoDescent + typoLineGap)/unitsPerEm .
• Als de lijnhoogte in OSX en Windows hetzelfde is, kunt u voor beide besturingssystemen dezelfde metrische lettertypeoverschrijvingen gebruiken.
• Als USE_TYPO_METRICS niet is ingeschakeld, wordt het lettertype weergegeven met behulp van hhea statistieken op OSX-apparaten en win statistieken op Windows-apparaten.
• Om de normale lijnhoogte op OSX te berekenen, gebruikt u de volgende vergelijking: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm .
• Om de normale lijnhoogte op Windows te berekenen, gebruikt u de volgende vergelijking: (winAscent + winDescent)/unitsPerEm . (Opmerking: er bestaat niet zoiets als winLineGap ).
• Als beide volgende voorwaarden waar zijn, kunt u dezelfde metrische overschrijvingen voor lettertypen gebruiken op OSX en Windows: a) hheaLineGap == 0 , b) de lijnhoogte op OSX en Windows is hetzelfde.

Metrieke lettertype-overschrijvingen gebruiken

Omdat metrische overschrijvingen van lettertypen worden berekend op basis van metingen die afkomstig zijn van de metagegevens van het weblettertype (en niet van het reservelettertype), blijven ze hetzelfde, ongeacht welk lettertype als reservelettertype wordt gebruikt. Bijvoorbeeld:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: "fallback for Poppins";
  src: local("Arial");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

@font-face {
  font-family: "another fallback for Poppins";
  src: local("Roboto");
  ascent-override: 105%;
  descent-override: 35%;
  line-gap-override: 10%;
}

Hoe het aanpassen van de maat werkt

Intro

De CSS size-adjust schaalt proportioneel de breedte en hoogte van lettertype-glyphs. size-adjust: 200% schaalt lettertekens naar tweemaal hun oorspronkelijke grootte; size-adjust: 50% schaalt lettertypeglyphs tot de helft van hun oorspronkelijke grootte.

Op zichzelf heeft size-adjust beperkte toepassingen voor het verbeteren van lettertype-fallbacks: in de meeste gevallen moet een fallback-lettertype enigszins worden verkleind of verbreed (in plaats van proportioneel geschaald) om overeen te komen met een weblettertype. Door het size-adjust en metrische lettertypeoverschrijvingen te combineren, is het echter mogelijk om twee willekeurige lettertypen zowel horizontaal als verticaal met elkaar te laten overeenkomen.

Dit is hoe size-adjust wordt gebruikt in stylesheets:

@font-face {
  font-family: "fallback for poppins";
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

Vanwege de manier waarop size-adjust wordt berekend (wat in de volgende sectie wordt uitgelegd), verandert de waarde van size-adjust (en de bijbehorende lettertype-metrische overschrijvingen) afhankelijk van welk fallback-lettertype wordt gebruikt:

body {
  font-family: "Poppins", "fallback for Poppins", "another fallback for Poppins";
}

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Opmerking: metrische overschrijvingen van lettertypen en size-adjust worden beide gedeclareerd met behulp van percentages, maar deze percentages worden anders gedefinieerd: bijvoorbeeld, size-adjust: 10% schaalt een lettertype naar 1/10 van de oorspronkelijke grootte; terwijl ascent-override: 10% zou een lettertype niet noodzakelijkerwijs kleiner maken; het verandert eerder de verhoudingen van het lettertype (dat wil zeggen, de grootte van de stijging zou gelijk zijn aan 10% van de UPM).

Berekening van maataanpassingen en metrische overschrijvingen van lettertypen

Dit zijn de vergelijkingen voor het berekenen van size-adjust en metrische overschrijvingen van lettertypen:

size-adjust = avgCharacterWidth of web font / avgCharacterWidth of fallback font
ascent-override = web font ascent / (web font UPM * size-adjust)
descent-override = web font descent / (web font UPM * size-adjust)
line-gap-override = web font line-gap / (web font UPM * size-adjust)

De meeste van deze invoer (dat wil zeggen stijgen, dalen en regelafstand) kunnen rechtstreeks uit de metagegevens van het weblettertype worden gelezen. avgCharacterWidth moet echter worden benaderd.

Benadert de gemiddelde tekenbreedte

Over het algemeen kan de gemiddelde tekenbreedte alleen bij benadering worden berekend, maar er zijn enkele scenario's waarin dit exact kan worden berekend: bijvoorbeeld bij gebruik van een monospaced lettertype of wanneer de inhoud van een tekstreeks vooraf bekend is.

Opmerking: lettertypen kunnen een vaste breedte of een vaste breedte hebben: bij lettertypen met een vaste breedte nemen alle tekens dezelfde hoeveelheid horizontale ruimte in beslag; in lettertypen met een vaste breedte hebben tekens verschillende breedtes. Lettertypen met vaste breedte worden vaak gebruikt in IDE's, maar op internet komen ze doorgaans minder vaak voor dan lettertypen met een vaste breedte.

Opmerking: omwille van de eenvoud verwijst dit artikel naar de "breedte" van een glyph. Hoewel deze terminologie op zichzelf niet verkeerd is: "vooruitgang", "vooruitgangsbreedte" of "horizontale vooruitgang" zijn de terminologie die doorgaans wordt gebruikt op het gebied van typografie.

Een voorbeeld van een naïeve benadering voor het berekenen van avgCharacterWidth is het nemen van de gemiddelde breedte van alle [az\s] -tekens.

Breedte van Roboto-tekens

Als u echter alle tekens even zwaar weegt, wordt de breedte van veelgebruikte letters waarschijnlijk te laag (bijvoorbeeld e ) en wordt de breedte van zelden gebruikte letters te zwaar (bijvoorbeeld z ).

Een complexere benadering die de nauwkeurigheid verbetert, is door rekening te houden met de letterfrequentie en in plaats daarvan de frequentiegewogen gemiddelde breedte van [az\s] tekens te berekenen. Dit artikel is een goede referentie voor de letterfrequentie en de gemiddelde woordlengte van Engelse teksten.

Brieffrequentie in het Engels

Opmerking: in dit artikel wordt besproken hoe u avgCharacterWidth kunt berekenen voor fallbacks van lettertypen die bij Engelse tekst worden gebruikt. Deze zelfde concepten kunnen echter ook op andere talen en tekensets worden toegepast. We zijn zeer geïnteresseerd in uw ervaringen met het gebruik van deze techniek met inhoud die niet in het Engels is.

Opmerking: Een andere mogelijke benadering voor het benaderen van avgCharacterWidth is het gebruik van xAvgCharWidth . xAvgCharWidth is een vooraf ingevulde waarde die bestaat in de OS/2-tabel van een lettertype. Houd er echter rekening mee dat deze statistiek niet altijd correct is. Veel hulpprogramma's voor het instellen van lettertypen werken bijvoorbeeld xAvgCharWidth niet bij wanneer glyphs worden toegevoegd aan of verwijderd uit een lettertype. Bovendien is, zelfs als xAvgCharWidth correct wordt berekend, de methodologie voor het berekenen xAvgcharWidth in de loop der jaren veranderd : u kunt verwachten dat de waarde van xAvgCharWidth zal variëren, afhankelijk van welke versie van de OS/2-tabel door het lettertype wordt gebruikt.

Een aanpak kiezen

De twee benaderingen die in dit artikel worden besproken, hebben elk hun voor- en nadelen:

• Het gebruik van lettertypemetrische overschrijvingen op zichzelf is een goede aanpak als u aan de slag gaat met het optimaliseren van uw lettertype-fallbacks. Hoewel dit de eenvoudigste van de twee benaderingen is, is deze doorgaans krachtig genoeg om de omvang van lettertypegerelateerde lay-outverschuivingen merkbaar te verminderen.

• Aan de andere kant, als je meer precisie wilt en bereid bent wat meer werk en testen te doen, is het size-adjust een goede aanpak. Wanneer deze aanpak correct wordt geïmplementeerd, kan deze aanpak lettertype-gerelateerde lay-outverschuivingen effectief elimineren.

Opmerking: U vraagt ​​zich misschien af ​​waarom u niet gewoon een vaste line-height kunt instellen in plaats van metrische lettertype-overschrijvingen of size-adjust te gebruiken. Hoewel line-height soms met succes kan worden gebruikt om lettertype-gerelateerde lay-outverschuivingen te verminderen of te elimineren, wordt deze praktijk niet aanbevolen. Metrieke overschrijvingen van lettertypen en size-adjust pakken het kernprobleem aan dat ten grondslag ligt aan het niet overeenkomen van weblettertypen/reservelettertypen line-height doet dat niet ( line-height bepaalt de hoogte van het CSS- regelvak ). Bovendien zult u waarschijnlijk merken dat het gebruik line-height voor dit doel verwarrender is dan u aanvankelijk had verwacht. Dit artikel geeft een goed overzicht van zaken waar u op moet letten bij het werken met line-height .

Fallback-lettertypen kiezen

De technieken die in dit artikel worden beschreven, zijn gebaseerd op het gebruik van metrische overschrijvingen van lettertypen en size-adjust om algemeen beschikbare lokale lettertypen te transformeren, in plaats van te proberen een lokaal lettertype te vinden dat het weblettertype dicht benadert. Bij het kiezen van lokale lettertypen is het belangrijk om in gedachten te houden dat zeer weinig lettertypen wijdverspreid lokaal beschikbaar zijn en dat er geen enkel lettertype op alle apparaten zal bestaan.

Arial is het aanbevolen reservelettertype voor schreefloze lettertypen en Times New Roman is het aanbevolen reservelettertype voor schreeflettertypen. Geen van deze lettertypen is echter beschikbaar op Android ( Roboto is het enige systeemlettertype op Android).

In het onderstaande voorbeeld worden drie reservelettertypen gebruikt om een ​​brede apparaatdekking te garanderen: een reservelettertype dat zich richt op Windows-/Mac-apparaten, een reservelettertype dat zich richt op Android-apparaten, en een reservelettertype dat een generieke lettertypefamilie gebruikt.

body {
  font-family: "Poppins", poppins-fallback, poppins-fallback-android, sans-serif;
}

/*
Poppins font metrics:
- ascent = 1050
- descent = 350
- line-gap = 100
- UPM: 1000
AvgCharWidth:
- Poppins: 538.0103768
- Arial: 884.1438804
- Roboto: 969.0502537
*/

@font-face {
  font-family: poppins-fallback;
  src: local("Arial");
  size-adjust: 60.85099821%;
  ascent-override: 164.3358416%;
  descent-override: 57.51754455%;
  line-gap-override: 16.43358416%;
}

@font-face {
  font-family: poppins-fallback-android;
  src: local("Roboto");
  size-adjust: 55.5193474%:
  ascent-override: 180.1173909%;
  descent-override: 63.04108683%;
  line-gap-override: 18.01173909%;
}

Opmerking: Er zijn andere lokale lettertypen die kunnen worden gebruikt als reservelettertype, maar hiervoor is kennis van het besturingssysteem van de gebruiker vereist. "Calibri" , "Lucinda Sans" en "Impact" zijn bijvoorbeeld lettertypen die allemaal algemeen beschikbaar zijn op Windows, maar niet op andere besturingssystemen.

Verzoek om feedback

Neem contact op als u feedback heeft over uw ervaring met het overschrijven van lettertypestatistieken en size-adjust .