Systemschriften-Vorschau
Gib einen Text ein und vergleiche ihn in den am weitesten verbreiteten Systemschriften: Passe Größe und Schriftstärke an und kopiere dann einen CSS-Font-Stack, den du direkt in dein Stylesheet einfügen kannst.
Warum Systemschriften verwenden?
Systemschriften sind auf den Geräten deiner Besucher bereits installiert, die Seite muss also nie eine Schriftdatei herunterladen. Der Text erscheint sofort, ohne das lästige „Flash of Unstyled Text“ (FOUT), das Webfonts oft verursachen. Deshalb setzen GitHub, Booking.com und viele andere große Websites auf System-Font-Stacks. Ein Haken: Nicht jede Schrift gibt es auf jedem Gerät. Impact und Comic Sans MS zum Beispiel fehlen auf vielen Android-Handys, dort greift der Browser auf die generische Schrift am Ende des Stacks zurück.
Wie verwende ich den kopierten CSS-Stack?
Füge den Stack in die Eigenschaft font-family deines CSS ein, zum Beispiel body { font-family: Georgia, "Times New Roman", serif; }. Die Reihenfolge ist wichtig: Der Browser probiert die Schriften von links nach rechts und nimmt die erste verfügbare; der letzte Wert (serif, sans-serif oder monospace) ist das Sicherheitsnetz, das in jedem Fall etwas Lesbares garantiert. Der Stack „system-ui“ verdient eine besondere Erwähnung: Er zeigt die native Oberflächenschrift des Geräts an, San Francisco auf Mac und iPhone, Segoe UI unter Windows, Roboto unter Android. Das Aussehen ändert sich also von Gerät zu Gerät, und genau das ist seine Stärke.