Verbesserte Schriftarten-Fallbacks

Katie Hempenius

Twitter

Zusammenfassung

In diesem Artikel werden Schriftarten-Fallbacks und die APIs size-adjust, ascent-override, descent-override und line-gap-override beschrieben. Mit diesen APIs können lokale Schriftarten verwendet werden, um Fallback-Schriftarten zu erstellen, die den Abmessungen einer Webschriftart sehr oder genau entsprechen. Dadurch werden Layoutverschiebungen reduziert oder eliminiert, die durch das Wechseln von Schriftarten verursacht werden.

Wenn Sie diesen Artikel lieber überspringen möchten, finden Sie nachfolgend einige Tools, mit denen Sie diese APIs sofort verwenden können:

Framework-Tools:

• @next/font: Ab den nächsten 13 verwendet next/font automatisch Überschreibungen von Schriftartenmesswerten und size-adjust, um passende Schriftart-Fallbacks bereitzustellen.
• @nuxtjs/fontaine: Ab Nuxt 3 kannst du nuxt/fontaine verwenden, um automatisch passende Schriftarten-Fallbacks zu generieren und in die Stylesheets deiner Nuxt App einzufügen.

Tools ohne Framework:

• Fontaine: Fontaine ist eine Bibliothek, die automatisch Schriftarten-Fallbacks generiert und einfügt, in denen Überschreibungen von Schriftarten verwendet werden.
• Dieses Repository enthält die Überschreibungen der Messwerte für alle Schriftarten, die von Google Fonts gehostet werden. Diese Werte können kopiert und in Ihre Stylesheets eingefügt werden.

Hintergrund

Eine Fallback-Schriftart ist eine Schriftart, die verwendet wird, wenn die primäre Schriftart noch nicht geladen wurde oder keine Bildzeichen fehlen, die zum Rendern der Seiteninhalte erforderlich sind. Der CSS-Code unten gibt beispielsweise an, dass die Schriftfamilie sans-serif als Schriftart-Fallback für "Roboto" verwendet werden soll.

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

Fallback-Schriftarten können verwendet werden, um Text schneller zu rendern, d. h. durch Verwendung von font-display: swap. Dadurch ist der Seiteninhalt früher lesbar und nützlich. Bisher hat dies jedoch auf Kosten der Layoutinstabilität zur Folge: Layoutverschiebungen treten häufig auf, wenn eine Fallback-Schriftart durch die Webschriftart ersetzt wird. Die unten beschriebenen neuen APIs können dieses Problem jedoch reduzieren oder beseitigen, indem sie es ermöglichen, Fallback-Schriftarten zu erstellen, die genauso viel Speicherplatz einnehmen wie ihre Webschriftarten.

Verbesserte Schriftarten-Fallbacks

Es gibt zwei Möglichkeiten, „verbesserte“ Schriftart-Fallbacks zu generieren. Im einfacheren Ansatz wird nur die API für Überschreibungen von Schriftarten verwendet. Bei dem komplizierteren (aber leistungsfähigeren) Ansatz werden sowohl die Schriftart-Überschreibungen API als auch size-adjust verwendet. In diesem Artikel werden beide Ansätze erläutert.

Funktionsweise von Überschreibungen von Messwerten für Schriftarten

Einführung

Mit Überschreibungen von Schriftartmesswerten können Sie den Anstieg, Abstieg und die Linienlücke einer Schriftart überschreiben:

• Mit Anstieg wird die weiteste Entfernung angegeben, die die Bildzeichen einer Schriftart über die Grundlinie erstrecken.
• Mit dem Abgang wird die weiteste Entfernung gemessen, die die Bildzeichen einer Schriftart unter der Grundlinie ausdehnen.
• Die Linienlücke, auch „vorangehend“ genannt, misst den Abstand zwischen aufeinanderfolgenden Textzeilen.

Messwertüberschreibungen für die Schriftart können verwendet werden, um den Anstieg, Abstieg und die Linienlücke einer Fallback-Schriftart zu überschreiben, um den Aufstieg, Abstieg und Zeilenabstand der Webschriftart abzugleichen. Daher haben die Webschriftart und die angepasste Fallback-Schriftart immer dieselben vertikalen Abmessungen.

Überschreibungen von Schriftmesswerten werden in einem Stylesheet wie folgt verwendet:

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%;
}

Mit den am Anfang dieses Artikels aufgeführten Tools können Sie die korrekten Werte für die Überschreibung des Messwerts für die Schriftart generieren. Sie können diese Werte jedoch auch selbst berechnen.

Überschreibungen von Messwerten für Schriftarten berechnen

Die folgenden Gleichungen liefern die Überschreibungen von Schriftarten für eine bestimmte Webschriftart. Die Werte der Messwertüberschreibungen für Schriftarten sollten als Prozentsätze (z. B. 105%) und nicht als Dezimalzahlen angegeben werden.

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

Hinweis:Units per em (UPM) bezieht sich auf die Rastergröße, die beim Entwerfen der Schriftart verwendet wurde. Auch wenn es andere Rastergrößen gibt, sind 1000 (ein Raster mit 1.000 × 1.000 Pixel) oder 2048 (ein Raster von 2.048 × 2.048) bei Weitem die beliebtesten. Es ist wichtig, dass Sie mit UPM vertraut sind, um andere Messwerte einordnen zu können. Beispielsweise bedeutet ein Anstieg von 900 sehr unterschiedliche Dinge, je nachdem, ob eine Schriftart die UPM-Kennzeichnung 1000 oder 2048 hat.

Hier sehen Sie beispielsweise die Überschreibungen der Messwerte für die Schriftart Poppins:

/*
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 */

Die Werte für ascent, descent, line-gap und unitsPerEm stammen alle aus den Metadaten der Webfont. Im nächsten Abschnitt dieses Artikels wird erläutert, wie Sie diese Werte erhalten.

Schrifttabellen lesen

Die Metadaten einer Schriftart (insbesondere die Schrifttabellen) enthalten alle Informationen, die Sie zum Berechnen der Überschreibungen der Messwerte für die Schriftart benötigen.

FontForge zum Anzeigen von Schriftartenmetadaten verwenden

Mit den folgenden Tools können Sie die Metadaten einer Schriftart lesen:

• fontkit ist eine für Node.js entwickelte Font-Engine. Dieses Code-Snippet zeigt, wie Sie mit fontkit Überschreibungen von Schriftartmesswerten berechnen können.
• Capsize ist eine Bibliothek für Schriftgröße und Layout. Capsize bietet eine API zum Abrufen von Informationen zu verschiedenen Schriftartmesswerten.
• fontdrop.info ist eine Website, auf der Sie Schriftartentabellen und andere schriftartbezogene Informationen aus dem Browser ansehen können.
• Font Forge ist ein beliebter Editor für Desktop-Schriftarten. ascent, descent und line-gap ansehen: Öffnen Sie das Dialogfeld Font Info, wählen Sie das Menü OS/2 und dann den Tab Metrics aus. Zum Ansehen von UPM öffnen Sie das Dialogfeld Font Info und wählen Sie das Menü General aus.

Hinweis:In einigen schriftbezogenen JavaScript-Bibliotheken werden Steigung, Abstieg und Linienlücke ungefähr bestimmt, indem auf dem Canvas Glyphen gezeichnet und das Ergebnis gemessen werden. Dieser Ansatz ist jedoch weniger genau, als wenn die Messwerte zur Schriftart direkt aus der Tabelle mit den Schriftarten gelesen werden.

Schriftartentabellen

Auf Konzepte wie „Aufstieg“ beziehen sich mehrere Messwerte, z. B. auf die Messwerte hheaAscent, typoAscent und winAscent. Das liegt daran, dass unterschiedliche Betriebssysteme unterschiedliche Ansätze für das Rendern von Schriftarten verfolgen: Programme auf OSX-Geräten verwenden in der Regel die Schriftmesswerte hhea*, während Programme auf Windows-Geräten in der Regel die Schriftmesswerte typo* (auch als sTypo* bezeichnet) oder win* verwenden.

Hinweis:Genauer gesagt folgen Programme auf Windows-Geräten in der Regel der Konvention zur Verwendung von typo*-Messwerten, wenn für eine Schriftart USE_TYPO_METRICS festgelegt wurde. Andernfalls werden win*-Messwerte verwendet. USE_TYPO_METRICS ist ein boolescher Parameter, der eingeführt wurde, damit Designer eine Präferenz zwischen den Messwerten typo* und win* festlegen können.

Je nach Schriftart, Browser und Betriebssystem wird eine Schriftart mit den Messwerten hhea, typo oder win gerendert.

	Mac	Windows
Chromium	Verwendet Messwerte aus der Tabelle „hhea“.	Verwendet Messwerte aus der Tabelle „typo“, wenn „USE_TYPO_METRICS“ festgelegt wurde. Andernfalls werden Messwerte aus der Tabelle „win“ verwendet.
Firefox	Es werden Messwerte aus der Tabelle „typo“ verwendet, wenn „USE_TYPO_METRICS“ festgelegt wurde. Andernfalls werden Messwerte aus der Tabelle „hhea“ verwendet.	Verwendet Messwerte aus der Tabelle „typo“, wenn „USE_TYPO_METRICS“ festgelegt wurde. Andernfalls werden Messwerte aus der Tabelle „win“ verwendet.
Safari	Verwendet Messwerte aus der Tabelle „hhea“.	Verwendet Messwerte aus der Tabelle „typo“, wenn „USE_TYPO_METRICS“ festgelegt wurde. Andernfalls werden Messwerte aus der Tabelle „win“ verwendet.

Weitere Informationen zur Funktionsweise von Messwerten für Schriftarten in verschiedenen Betriebssystemen finden Sie in diesem Artikel zu Branchenmesswerten.

Geräteübergreifende Kompatibilität

Für die meisten Schriftarten (z. B. ca. 90% der von Google Fonts gehosteten Schriftarten) können Überschreibungen von Schriftmesswerten sicher verwendet werden, ohne dass das Betriebssystem des Nutzers bekannt ist. Mit anderen Worten: Bei diesen Schriftarten bleiben die Werte für ascent-override, descent-override und linegap-override identisch, unabhängig davon, ob die Messwerte hhea, typo oder win gelten. Dieses Repository enthält Informationen dazu, für welche Schriftarten dies gilt.

Wenn Sie eine Schriftart verwenden, bei der separate Gruppen von Messwertüberschreibungen für Schriftarten für OS X- und Windows-Geräte erforderlich sind, sollten Sie Überschreibungen von Schriftarten und size-adjust nur dann verwenden, wenn Sie Ihre Stylesheets je nach Betriebssystem des Nutzers anpassen können.

Hinweis:In diesem Abschnitt wird erläutert, wie Sie bestimmen, ob für eine Schriftart auf OSX- und Windows-Geräten dieselben Messwertüberschreibungen für Schriftarten verwendet werden. Prüfen Sie zuerst, ob USE_TYPO_METRICS für die Schriftart aktiviert ist.

• Wenn USE_TYPO_METRICS aktiviert ist, wird die Schriftart auf OS X-Geräten mit hhea-Messwerten und auf Windows-Geräten mit typo-Messwerten gerendert.
• Um die normale Zeilenhöhe unter OSX zu berechnen, verwenden Sie die folgende Gleichung: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm.
• Um die normale Zeilenhöhe in Windows zu berechnen, verwenden Sie die folgende Gleichung: (typoAscent + typoDescent + typoLineGap)/unitsPerEm.
• Wenn die Zeilenhöhe unter OSX und Windows gleich ist, können Sie für beide Betriebssysteme dieselben Messwert-Überschreibungen für Schriftarten verwenden.
• Wenn USE_TYPO_METRICS nicht aktiviert ist, wird die Schriftart auf OSX-Geräten mit den Messwerten hhea und auf Windows-Geräten mit den Messwerten win gerendert.
• Um die normale Zeilenhöhe unter OSX zu berechnen, verwenden Sie die folgende Gleichung: (hheaAscent + hheaDescent + hheaLineGap)/unitsPerEm.
• Um die normale Zeilenhöhe in Windows zu berechnen, verwenden Sie die folgende Gleichung: (winAscent + winDescent)/unitsPerEm. (Hinweis: winLineGap gibt es nicht.)
• Wenn die beiden folgenden Bedingungen erfüllt sind, können Sie dieselben Messwertüberschreibungen für Schriftarten unter OSX und Windows verwenden: a) hheaLineGap == 0, b) Zeilenhöhe unter OSX und Windows ist gleich.

Messwertüberschreibungen für Schriftarten verwenden

Da die Messwertüberschreibungen für die Schriftart anhand von Messungen berechnet werden, die aus den Metadaten der Webschriftart (und nicht der Fallback-Schriftart) stammen, bleiben sie unverändert, unabhängig davon, welche Schriftart als Fallback-Schriftart verwendet wird. Beispiel:

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%;
}

So funktioniert die Größenanpassung

Einführung

Der CSS-Deskriptor size-adjust skaliert die Breite und Höhe von Schriftsymbolen proportional. Mit size-adjust: 200% werden z. B. Schriftsymbole auf die doppelte Originalgröße skaliert, bei size-adjust: 50% auf die Hälfte ihrer ursprünglichen Größe.

size-adjust allein bietet nur eingeschränkte Möglichkeiten, um Fallback-Schriftarten zu verbessern: In den meisten Fällen muss eine Fallback-Schriftart eingegrenzt oder erweitert werden, anstatt sie proportional zu skalieren, damit sie an eine Webschriftart angepasst wird. Durch die Kombination von size-adjust mit Überschreibungen von Schriftartmesswerten ist es jedoch möglich, zwei beliebige Schriftarten sowohl horizontal als auch vertikal anzupassen.

So wird size-adjust in Stylesheets verwendet:

@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%;
}

Aufgrund der Art und Weise, wie size-adjust berechnet wird (wie im nächsten Abschnitt erläutert), ändert sich der Wert von size-adjust (und die entsprechenden Messwerte für die Schriftart) abhängig davon, welche Fallback-Schriftart verwendet wird:

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%;
}

Hinweis:Sowohl Überschreibungen von Schriftartmesswerten als auch size-adjust werden mithilfe von Prozentsätzen deklariert. Diese Prozentsätze werden jedoch unterschiedlich definiert: Mit size-adjust: 10% wird eine Schriftart beispielsweise auf das Zehntel ihrer ursprünglichen Größe skaliert. Bei ascent-override: 10% wird die Schriftart nicht zwangsläufig verkleinert. Stattdessen werden die Proportionen der Schriftart geändert, d. h. die Größe des Aufstiegs entspricht 10% der UPM.

Überschreibungen von Messwerten für Größenanpassung und Schriftart berechnen

Dies sind die Gleichungen für die Berechnung von size-adjust und Messwertüberschreibungen für die Schriftart:

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)

Die meisten Eingaben (Anstieg, Abstieg und Linienlücke) können direkt aus den Metadaten der Webschriftart gelesen werden. avgCharacterWidth muss jedoch näherungsweise angegeben werden.

Ungefähre durchschnittliche Zeichenbreite

In der Regel kann die durchschnittliche Zeichenbreite nur näherungsweise ermittelt werden. Es gibt jedoch einige Szenarien, in denen sie genau berechnet werden kann, z. B. bei der Verwendung einer einseitigen Schriftart oder wenn der Inhalt eines Textstrings im Voraus bekannt ist.

Hinweis: Schriftarten können entweder mono bzw. mit fester Breite verwendet werden. Bei Schriftarten mit festem Abstand nehmen alle Zeichen den gleichen Platz in horizontaler Abstände ein. Bei Schriftarten mit fester Breite haben die Zeichen unterschiedliche Breiten. In IDEs werden Schriftarten mit Festbreitenschrift verwendet, im Web sind sie jedoch in der Regel seltener als Schriftarten mit fester Breite.

Hinweis:Der Einfachheit halber bezieht sich dieser Artikel auf die „Breite“ eines Symbols. Auch wenn diese Terminologie an sich nicht falsch ist: „Vorwärts“, „Vorwärtsbreite“ oder „Horizontaler Fortschritt“ sind die Terminologie, die in der Regel im Typografiebereich verwendet werden.

Ein Beispiel für einen naiven Ansatz zur Berechnung von avgCharacterWidth ist die durchschnittliche Breite aller [a-z\s]-Zeichen.

Breite von Roboto-Glyphen

Wenn Sie jedoch alle Zeichen gleichmäßig gewichten, wird die Breite häufig verwendeter Buchstaben (z. B. e) wahrscheinlich untergewichtet und die nur selten verwendeten Buchstaben (z. B. z) übergewichten.

Ein komplexerer Ansatz zur Verbesserung der Genauigkeit besteht darin, die Buchungshäufigkeit zu berücksichtigen und stattdessen die häufigkeitsgewichtete durchschnittliche Breite von [a-z\s] Zeichen zu berechnen. In diesem Artikel können Sie sich über die Häufigkeit der Buchstaben und die durchschnittliche Wortlänge von englischen Texten informieren.

Briefhäufigkeit auf Englisch

Hinweis:In diesem Artikel wird erläutert, wie avgCharacterWidth für Schriftarten-Fallbacks berechnet wird, die für englische Texte verwendet werden. Diese Konzepte können jedoch auch auf andere Sprachen und Zeichensätze angewendet werden. Uns würde interessieren, welche Erfahrungen Sie bei der Verwendung dieser Technik mit Inhalten in einer anderen Sprache als Englisch gemacht haben.

Hinweis:Eine andere Möglichkeit zur Schätzung von avgCharacterWidth ist die Verwendung von xAvgCharWidth. xAvgCharWidth ist ein vorab ausgefüllter Wert, der in der OS/2-Tabelle einer Schriftart vorhanden ist. Beachten Sie jedoch, dass dieser Messwert nicht immer korrekt ist. Beispielsweise wird xAvgCharWidth von vielen Tools zur Untereinstellung von Schriftarten nicht aktualisiert, wenn Glyphen zu einer Schriftart hinzugefügt oder daraus entfernt werden. Auch wenn xAvgCharWidth richtig berechnet wird, hat sich die Methodik zur Berechnung von xAvgcharWidth im Laufe der Jahre geändert: Der Wert von xAvgCharWidth hängt davon ab, welche Version der OS/2-Tabelle von der Schriftart verwendet wird.

Ansatz auswählen

Die beiden in diesem Artikel beschriebenen Ansätze haben ihre Vor- und Nachteile:

• Die Überschreibung von Schriftartenmesswerten allein ist ein guter Ansatz, wenn Sie mit der Optimierung Ihrer Schriftarten-Fallbacks beginnen. Dies ist zwar der einfachere der beiden Ansätze, aber in der Regel ist sie leistungsstark genug, um die Größenordnung schriftbezogener Layoutverschiebungen merklich zu verringern.

• Wenn Sie jedoch eine höhere Genauigkeit wünschen und bereit sind, etwas mehr Arbeit und Tests durchzuführen, ist die Einbindung von size-adjust eine gute Herangehensweise. Bei korrekter Implementierung können so schriftbezogene Layoutverschiebungen effektiv beseitigt werden.

Hinweis:Sie fragen sich vielleicht, warum Sie nicht einfach ein festes line-height festlegen können, anstatt Messwerte für Schriftarten oder size-adjust zu überschreiben. Mit line-height lassen sich zwar manchmal schriftartbezogene Layoutverschiebungen reduzieren oder beseitigen, diese Vorgehensweise wird jedoch nicht empfohlen. Messwertüberschreibungen für die Schriftart und size-adjust beseitigen das zugrunde liegende Problem bei nicht übereinstimmenden Webschriftarten/Fallback-Schriftarten. Bei line-height wird dies nicht festgelegt (line-height legt die Höhe des CSS-Zeilenfelds fest). Außerdem werden Sie wahrscheinlich feststellen, dass die Verwendung von line-height zu diesem Zweck verwirrend ist, als Sie ursprünglich gedacht haben. Dieser Artikel bietet einen guten Überblick über Dinge, die Sie bei der Arbeit mit line-height beachten sollten.

Fallback-Schriftarten auswählen

Bei den Methoden, die in diesem Artikel beschrieben werden, werden Überschreibungen von Schriftartmesswerten und size-adjust verwendet, um allgemein verfügbare lokale Schriftarten umzuwandeln. Es wird also nicht versucht, eine lokale Schriftart zu finden, die der Webschriftart sehr nahekommt. Bei der Auswahl lokaler Schriftarten ist zu beachten, dass nur sehr wenige Schriftarten überall lokal verfügbar sind und es keine einheitliche Schriftart auf allen Geräten geben wird.

Arial ist die empfohlene Fallback-Schriftart für serifenlose Schriftarten und Times New Roman ist die empfohlene Fallback-Schriftart für Serif-Schriftarten. Keine dieser Schriftarten ist für Android verfügbar (Roboto ist die einzige Systemschrift unter Android).

Im folgenden Beispiel werden drei Fallback-Schriftarten verwendet, um eine breite Geräteabdeckung sicherzustellen: eine Fallback-Schriftart für Windows/Mac-Geräte, eine Fallback-Schriftart für Android-Geräte und eine Fallback-Schriftart mit einer allgemeinen Schriftfamilie.

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%;
}

Hinweis:Es gibt auch andere lokale Schriftarten, die als Fallback für Schriftarten verwendet werden können. Dazu müssen Sie jedoch das Betriebssystem des Nutzers kennen. So sind beispielsweise "Calibri", "Lucinda Sans" und "Impact" Schriftarten, die alle unter Windows, aber nicht unter anderen Betriebssystemen verfügbar sind.

Bitte um Feedback

Bitte wenden Sie sich an uns, wenn Sie Feedback zu Ihren Erfahrungen mit Überschreibungen von Schriftartenmesswerten und size-adjust haben.