Verbesserte Schriftarten-Fallbacks

Katie Hempenius
Katie Hempenius
X

Zusammenfassung

In diesem Artikel erfahren Sie mehr über Schrift-Fallbacks und die APIs size-adjust, ascent-override, descent-override und line-gap-override. Mit diesen APIs ist es möglich, lokale Schriftarten zum Erstellen von Fallback-Schriftarten zu verwenden, die den Abmessungen einer Webschriftart ungefähr oder genau entsprechen. Dadurch werden Layoutverschiebungen durch das Austauschen von Schriftarten reduziert oder beseitigt.

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

Framework-Tools:

  • @next/font: Ab Next 13 verwendet next/font automatisch Überschreibungen von Schriftartmesswerten und size-adjust, um passende Schriftart-Fallbacks bereitzustellen.
  • @nuxtjs/fontaine: Ab Nuxt 3 können Sie mit nuxt/fontaine automatisch übereinstimmende Schriftart-Fallbacks generieren und in die von Ihrer Nuxt-App verwendeten Stylesheets einfügen.

Nicht zu Frameworks gehörende Tools:

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

Hintergrund

Ein Fallback-Schriftschnitt ist ein Schriftschnitt, der verwendet wird, wenn der primäre Schriftschnitt noch nicht geladen wurde oder Glyphen fehlen, die zum Rendern des Seiteninhalts erforderlich sind. Im folgenden CSS wird beispielsweise angegeben, dass die Schriftfamilie sans-serif als Schrift-Fallback für "Roboto" verwendet werden soll.

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

Mithilfe von Fallback-Schriftarten kann Text schneller gerendert werden (d. h. mit font-display: swap). Dadurch sind die Seiteninhalte früher lesbar und nützlich. Bisher ging dies jedoch zu Lasten der Layoutstabilität: Layoutänderungen treten häufig auf, wenn eine Fallback-Schriftart durch die Webschriftart ersetzt wird. Mit den unten beschriebenen neuen APIs kann dieses Problem jedoch reduziert oder eliminiert werden, indem es möglich ist, Fallback-Schriftarten zu erstellen, die genauso viel Platz wie ihre Gegenstücke für Webschriftarten einnehmen.

Verbesserte Schrift-Fallbacks

Es gibt zwei Möglichkeiten, „verbesserte“ Schriftart-Fallbacks zu generieren. Bei der einfacheren Methode wird die API nur durch den Messwert „Schriftart“ überschrieben. Der kompliziertere (aber leistungsstärkere) Ansatz verwendet sowohl die API für Schriftschnitt-Überschreibungen als auch size-adjust. In diesem Artikel werden beide Ansätze erläutert.

Funktionsweise von Überschreibungen für Schriftmetriken

Einführung

Überschreibungen von Schriftmesswerten bieten eine Möglichkeit, die Höhe, Abstufung und Linienabstand einer Schriftart zu überschreiben:

  • Der Aufstieg gibt an, wie weit die Schriftzeichen eines Fonts über die Grundlinie hinausragen.
  • Der Abstieg ist der maximale Abstand, um den sich die Glyphen eines Schriftzugs unter der Grundlinie erstrecken.
  • Der Zeilenabstand, auch als „Löschabstand“ bezeichnet, ist der Abstand zwischen aufeinanderfolgenden Textzeilen.

Diagramm, das Steigung, Abstieg und Linienabstand einer Schriftart zeigt.

Mit Überschreibungen von Schriftmesswerten können Sie den Auf- und Abstieg sowie den Zeilenabstand einer Fallback-Schriftart überschreiben, damit sie mit dem Auf- und Abstieg sowie dem Zeilenabstand der Webschriftart übereinstimmen. Dadurch haben die Webschriftart und die angepasste Fallback-Schriftart immer die gleichen vertikalen Abmessungen.

Overrides für Schriftmetriken werden in einem Stylesheet so 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 richtigen Überschreibungswerte für den Schriftmesswert generieren. Sie können diese Werte jedoch auch selbst berechnen.

Überschreibungen für Schriftmesswerte berechnen

Die folgenden Gleichungen ergeben die Schriftmetrik-Überschreibungen für eine bestimmte Webschrift. Die Werte der Schriftmetrik-Überschreibungen 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

Hier sind beispielsweise die Schriftmetrik-Überschreibungen 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 Webschriftart. Im nächsten Abschnitt dieses Artikels wird erläutert, wie Sie diese Werte abrufen.

Schrifttabellen lesen

Die Metadaten eines Schriftzugs (insbesondere die Schrifttabellen) enthalten alle Informationen, die Sie zum Berechnen der Überschreibungen der Schriftmetriken benötigen.

Screenshot des Dialogfelds „Schriftinformationen“ in FontForge Im Dialogfeld werden Schriftmetriken wie „Typo Ascent“, „Typo Descent“ und „Typo Line Gap“ angezeigt.
Schriftart-Metadaten mit FontForge ansehen

Hier sind einige Tools, mit denen Sie die Metadaten eines Schriftbilds lesen können:

  • fontkit ist eine Schriftarten-Engine, die für Node.js entwickelt wurde. In diesem Code-Snippet wird gezeigt, wie Sie mit FontKit Überschreibungen für Schriftmetriken berechnen.
  • Capsize ist eine Bibliothek zur Größenanpassung und Layoutgestaltung. Capsize bietet eine API, mit der Informationen zu verschiedenen Schriftmetriken abgerufen werden können.
  • fontdrop.info ist eine Website, auf der Sie Schrifttabellen und andere schriftbezogene Informationen im Browser aufrufen können.
  • Font Forge ist ein beliebter Desktop-Schrifteditor. Wenn Sie ascent, descent und line-gap aufrufen möchten, öffnen Sie das Dialogfeld Font Info, wählen Sie das Menü OS/2 und dann den Tab Metrics aus. Wenn Sie UPM aufrufen möchten, öffnen Sie das Dialogfeld Font Info und wählen Sie das Menü General aus.

Schrifttabellen

Sie werden feststellen, dass Konzepte wie „Aufstieg“ auf mehrere Messwerte verweisen. Es gibt beispielsweise die Messwerte hheaAscent, typoAscent und winAscent. Das liegt daran, dass verschiedene Betriebssysteme unterschiedliche Ansätze für das Schriftbild-Rendering verfolgen: Programme auf OSX-Geräten verwenden in der Regel hhea*-Schriftmetriken, während Programme auf Windows-Geräten in der Regel typo* (auch sTypo* genannt) oder win*-Schriftmetriken verwenden.

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

Mac Windows
Chrom Es werden Messwerte aus der Tabelle „hhea“ verwendet. Es werden Messwerte aus der Tabelle „typo“ verwendet, 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. Es werden Messwerte aus der Tabelle „typo“ verwendet, wenn „USE_TYPO_METRICS“ festgelegt wurde. Andernfalls werden Messwerte aus der Tabelle „win“ verwendet.
Safari Es werden Messwerte aus der Tabelle „hhea“ verwendet. Es werden Messwerte aus der Tabelle „typo“ verwendet, wenn „USE_TYPO_METRICS“ festgelegt wurde. Andernfalls werden Messwerte aus der Tabelle „win“ verwendet.

Weitere Informationen dazu, wie Schriftmesswerte plattformübergreifend funktionieren, finden Sie in diesem Artikel zu vertikalen Messwerten.

Geräteübergreifende Kompatibilität

Bei der überwiegenden Mehrheit der Schriftarten (z. B. bei etwa 90 % der von Google Fonts gehosteten Schriftarten) können Überschreibungen von Schriftmetriken verwendet werden, ohne das Betriebssystem des Nutzers zu kennen. Mit anderen Worten: Bei diesen Schriftarten bleiben die Werte von ascent-override, descent-override und linegap-override genau gleich, unabhängig davon, ob hhea-, typo- oder win-Messwerte gelten. Dieses Repository enthält Informationen darüber, für welche Schriftarten dies gilt und nicht.

Wenn Sie eine Schriftart verwenden, für die separate Überschreibungen von Schriftmesswerten für OSX- und Windows-Geräte erforderlich sind, wird die Verwendung von Überschreibungen von Schriftmesswerten und size-adjust nur dann empfohlen, wenn Sie die Möglichkeit haben, Ihre Stylesheets je nach Betriebssystem des Nutzers zu ändern.

Überschreibungen für Schriftmesswerte verwenden

Da Schriftmetrik-Überschreibungen anhand von Messungen berechnet werden, die aus den Metadaten der Webschrift stammen (und nicht aus der Fallback-Schrift), bleiben sie unabhängig davon gleich, welche Schrift als Fallback-Schrift 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%;
}

Funktionsweise der Größenanpassung

Einführung

Mit dem CSS-Deskriptor size-adjust werden Breite und Höhe von Schriftsymbolen proportional skaliert. Mit size-adjust: 200% werden Schriftzeichen beispielsweise auf das Doppelte ihrer ursprünglichen Größe skaliert, mit size-adjust: 50% auf die Hälfte.

Diagramm, das die Ergebnisse der Verwendung von „size-Adjust: 50%“ und „size-Adjust: 200%“ zeigt.

size-adjust kann allein nur bedingt zur Verbesserung von Schrift-Fallbacks verwendet werden: In den meisten Fällen muss eine Fallback-Schrift leicht verengt oder verbreitert werden (und nicht proportional skaliert), um zu einer Webschrift zu passen. Wenn Sie size-adjust jedoch mit Überschreibungen für Schriftmetriken kombinieren, können Sie zwei beliebige Schriftarten sowohl horizontal als auch vertikal aufeinander abstimmen.

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 Berechnung von size-adjust (wird im nächsten Abschnitt erläutert) ändert sich der Wert von size-adjust (und der entsprechende Messwert für die Schriftart überschreibt) je nachdem, 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%;
}

Überschreibungen von Messwerten zur Größenanpassung und Schrift berechnen

Dies sind die Gleichungen für die Berechnung von size-adjust- und Schriftartmesswert-Überschreibungen:

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 dieser Eingaben (d. h. Auf-, Abstieg und Zeilenabstand) können direkt aus den Metadaten der Webschrift gelesen werden. avgCharacterWidth muss jedoch geschätzt werden.

Durchschnittliche Zeichenbreite approximieren

In der Regel lässt sich die durchschnittliche Zeichenbreite nur annähernd ermitteln. Es gibt jedoch einige Szenarien, in denen sie genau berechnet werden kann, z. B. bei Verwendung einer Schriftart mit Leerzeichen oder wenn der Inhalt einer Textzeichenfolge im Voraus bekannt ist.

Ein Beispiel für eine naive Berechnung von avgCharacterWidth besteht darin, die durchschnittliche Breite aller [a-z\s]-Zeichen zu verwenden.

Diagramm, in dem die Breite einzelner Roboto-Glyphen [a–zs] verglichen wird.
Breite von Roboto-Glyphen

Wenn Sie jedoch alle Zeichen gleich gewichten, wird die Breite häufig verwendeter Buchstaben (z. B. e) wahrscheinlich zu gering und die Breite selten verwendeter Buchstaben (z. B. z) zu hoch eingestuft.

Ein komplexerer Ansatz, der die Genauigkeit verbessert, besteht darin, die Buchstabenhäufigkeit zu berücksichtigen und stattdessen die frequenzgewichtete durchschnittliche Breite von [a-z\s]-Zeichen zu berechnen. Dieser Artikel ist eine gute Referenz für die Buchstabenhäufigkeit und die durchschnittliche Wortlänge englischer Texte.

Ein Diagramm mit der Häufigkeit der Buchstaben im Englischen
Buchstabenhäufigkeit im Englischen

Ansatz auswählen

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

  • Die Verwendung von Überschreibungen von Schriftartmesswerten ist ein guter Ansatz, wenn Sie mit der Optimierung Ihrer Schriftart-Fallbacks beginnen. Obwohl dies der einfachere der beiden Ansätze ist, ist er in der Regel leistungsstark genug, um die Auswirkungen schriftbezogener Layoutverschiebungen deutlich zu reduzieren.

  • Wenn Sie hingegen eine höhere Genauigkeit wünschen und bereit sind, etwas mehr Arbeit und Tests zu investieren, ist die Einbindung von size-adjust ein guter Ansatz. Bei richtiger Implementierung kann dieser Ansatz schriftbezogene Layoutänderungen effektiv beseitigen.

Fallback-Schriftarten auswählen

Die in diesem Artikel beschriebenen Techniken basieren auf der Verwendung von Überschreibungen von Schriftmesswerten und von size-adjust, um allgemein verfügbare lokale Schriftarten umzuwandeln, anstatt zu versuchen, eine lokale Schriftart zu finden, die der Webschriftart sehr nahe kommt. Bei der Auswahl lokaler Schriftarten ist zu beachten, dass nur sehr wenige Schriftarten weithin lokal verfügbar sind und es keine einzelne Schriftart gibt, die auf allen Geräten vorhanden ist.

Arial ist die empfohlene Fallback-Schriftart für serifenlose Schriftarten und Times New Roman die empfohlene Fallback-Schriftart für Serifenschriften. Keine dieser Schriftarten ist unter Android jedoch verfügbar. Roboto ist die einzige Systemschriftart unter Android.

Im folgenden Beispiel werden drei Fallback-Schriftarten verwendet, um eine breite Geräteabdeckung zu gewährleisten: eine Fallback-Schriftart, die auf Windows-/Mac-Geräte ausgerichtet ist, eine Fallback-Schriftart, die auf Android-Geräte ausgerichtet ist, und eine Fallback-Schriftart, die eine generische Schriftartfamilie verwendet.

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

Bitte um Feedback

Bitte wenden Sie sich an uns, wenn Sie Feedback zu den Überschreibungen von Schriftmetriken und size-adjust haben.