Ein Font-Stack ist die Reihenfolge von Schriftarten in der CSS-Eigenschaft font-family. Der Browser verwendet die erste verfügbare Schrift; fehlt sie, greift er auf die nächste zurück, am Ende auf eine generische Familie wie sans-serif:
font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
Bedeutung für Lesbarkeit und Barrierefreiheit
- Ausfallsicherheit: Lädt eine Webschrift nicht (langsame Verbindung, Blocker), bleibt Text dank ähnlicher Systemschrift gut lesbar.
- Layoutstabilität: Passende Ersatzschriften mit ähnlichen Maßen vermeiden Layoutsprünge (CLS). Mit
size-adjustlassen sich Fallbacks angleichen. - Performance: Systemschriften („System Font Stack“) laden ohne Download.
- Zeichenabdeckung: Ersatzschriften decken Sonderzeichen und andere Schriftsysteme ab.
Kriterien für gut lesbare Schriften
Klare Formen, eindeutig unterscheidbare Zeichen (Il1, O0), ausreichende x-Höhe, mehrere Schriftschnitte und gute Darstellung auf Bildschirmen. Icon-Fonts sind problematisch, da sie bei Ladefehlern oder eigener Nutzerschrift als Kästchen erscheinen – SVG-Icons sind besser.
Häufige Fragen
Was ist ein System Font Stack?
Ein Font-Stack aus den Standardschriften der Betriebssysteme (z. B. system-ui, Segoe UI, SF Pro, Roboto). Er ist schnell und vertraut für Nutzer.
Wie viele Schriften sollte ein Font-Stack haben?
Meist reichen 3 bis 6 Einträge: Wunschschrift, ähnliche Systemschriften und eine generische Familie.
Verwandte Begriffe: Web Fonts, Legasthenie-freundliche Schriften, CSS, Web Performance