CSS Grundlagen: Fallback-Schriftstapel für robustere Webtypografie

In CSS sehen Sie möglicherweise eine Regel wie diese

html {
  font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
}

Was zum Teufel, oder? Warum sage ich dem Browser nicht einfach, welche Schriftart ich verwenden möchte, und das war's? Die ganze Idee hier sind Fallbacks. Der Browser versucht zuerst, die von Ihnen angegebene Schriftart zu verwenden (in diesem Fall Lato), aber wenn er diese Schriftart nicht hat, geht er die Liste weiter durch. Um hier also sehr ausführlich zu sein, besagt diese Regel

1. Ich möchte hier bitte die Schriftart Lato verwenden.
2. Wenn Sie diese nicht haben, versuchen Sie es als Nächstes mit „Lucida Grande“.
3. Wenn Sie diese nicht haben, versuchen Sie es mit Tahoma.
4. Wenn alles fehlschlägt, verwenden Sie, was immer Sie für das generische Schlüsselwort Sans-Serif haben

In welcher Situation hätte ein Browser nicht die angeforderte Schriftart? Das ist ziemlich häufig. Es gibt nur eine Handvoll Schriftarten, die als „websicher“ gelten – das bedeutet, dass die meisten Computer, die Ihre Website besuchen, wahrscheinlich über diese Schriftart verfügen und der Browser sie daher verwenden kann. Denken Sie an: Arial, Times New Roman, Courier, Georgia, Verdana und eine Handvoll weiterer.

Die meisten Websites verwenden heutzutage benutzerdefinierte Webfonts. Sie laden eine Schriftart als Ressource (genauso wie eine Website CSS selbst als Ressource, ein Bild oder JavaScript lädt), dann ist diese Schriftart verfügbar. Die weit verbreitete Google Fonts macht das ziemlich deutlich

Auch wenn Sie eine Schriftart auf diese Weise laden, ist es immer noch möglich, dass die Schriftart nicht geladen wird. Obwohl Google ein generell sehr zuverlässiger Hoster ist, haben Sie keine Kontrolle über deren Server; das haben sie. Noch häufiger können schlechte Netzwerkverbindungen das Laden einer Schriftart verhindern. In jedem Szenario eines fehlgeschlagenen Schriftart-Ladevorgangs ist dies eine weitere Situation, in der ein Fallback-Schriftstapel nützlich ist.

Nehmen wir an, ich verwende die benutzerdefinierte Schriftart Merriweather und richte meinen Schriftstapel wie folgt ein

html {
  font-family: Merriweather, Impact, Serif;
}

Wenn Merriweather nicht geladen werden kann (oder geladen wird, aber auf eine Weise, die beim Laden sichtbar wird – auch bekannt als FOUT), würden wir so etwas sehen

Besser, Ihre Schriftart fällt auf etwas zurück, das Ihrer Top-Wahl nahe kommt, als auf etwas völlig Unzusammenhängendes! Es gibt ein fantastisches Werkzeug von Monica Dinculescu namens Font style matcher, mit dem Sie mit Fallbacks experimentieren können (so habe ich das GIF oben erstellt).

Im obigen Beispiel sehen wir, dass Georgia eine viel schönere Fallback-Schriftart ist als Impact! Das Beispiel ist jedoch etwas ausgefallener als nur die Änderung der Schriftart. Ein paar andere Einstellungen wurden geändert, um sie so gut wie möglich abzugleichen. Um dies zu nutzen, sind Sie im Bereich des Schriftart-Ladens, was etwas komplex wird. Ihr bester Ansatz ist hier, Zach Leathermans A Comprehensive Guide to Font Loading zu konsultieren. In jedem Fall lohnt es sich, eine schöne Fallback-Schriftart zu wählen.

Einzelne Zeichen

Eine interessante Anmerkung zu Fallback-Schriftarten ist, dass es kein Alles-oder-Nichts ist. Einzelne Zeichen einer Schriftart können im Stapel nach unten fallen, wenn die angegebene Schriftart dieses Zeichen nicht verfügbar hat.

Als extremes Beispiel lade ich die benutzerdefinierte Schriftart Source Code Pro von Google Fonts, aber ich zwinge sie, nur eine Handvoll Buchstaben zu enthalten.

Sie können im ersten Satz sehen, wie die Fallback-Schriftarten übernommen haben und das Endergebnis nicht katastrophal war (im Gegensatz zum zweiten Satz), obwohl die benutzerdefinierte Schriftart einige Zeichen nicht verfügbar hatte. Dies wird eher bei Dingen wie ungewöhnlichen ASCII-Zeichen oder sogar Akzentzeichen wie ü, ā oder ñ. der Fall sein.

Als kleinen Nebenspaß, hier ist die Verwendung dieser Zeichen-Fallback-Fähigkeit von CSS, um etwas Einzigartiges zu tun

Weitere Lektüre

• Font Stack Snippets: Einige gängige Schriftstapel
• CSS Font Stack: Eine Sammlung von websicheren CSS-Schriftstapeln
• System Font Stack: Ein Snippet, das die Standard-Systemschriftart des Computers verwendet