Wenn du eine Website gestaltest, entscheidest du, ob sie eine Systemschrift oder eine zusätzliche Schriftdatei lädt. „Websicher“ heißt, dass eine Schrift auf vielen verbreiteten Geräten verfügbar ist – nicht, dass sie überall gleich aussieht.
Systemschriften machen zusätzliche Schriftdateien überflüssig. Webfonts, also über die Website geladene Schriftdateien, bieten mehr Kontrolle über das Schriftbild. Entscheidend ist, ob geringe Abhängigkeiten oder ein bestimmtes Erscheinungsbild wichtiger sind.
Was websicher bedeutet
Schriftarten wie Arial, Georgia, Verdana und Courier New sind auf vielen Geräten verbreitet. Trotzdem ist nicht jede davon auf jedem Betriebssystem installiert. Auch Schriftgröße, Zeichenabstände und Zeilenumbrüche können sich je nach Gerät unterscheiden.
Eine CSS-Fallback-Kette legt deshalb mehrere Alternativen fest. Der Browser prüft sie der Reihe nach und verwendet die erste verfügbare Schrift. Am Ende steht eine allgemeine Schriftfamilie wie sans-serif, serif oder monospace. Sie gibt die Schriftartengruppe an, aber keine bestimmte Schriftdatei.
body {
font-family: Arial, Helvetica, sans-serif;
}
.article-heading {
font-family: Georgia, "Times New Roman", serif;
}
code,
pre {
font-family: "Courier New", Courier, monospace;
}
Die Beispiele sind ein Ausgangspunkt und garantieren kein einheitliches Schriftbild. Fehlt in einer Schrift ein benötigtes Zeichen, kann der Browser dieses Zeichen aus einer anderen Schrift darstellen. Prüfe deshalb auch Umlaute, Sonderzeichen und Satzzeichen im tatsächlichen Layout.
Wann Systemschriften passen
Systemschriften sind eine gute Wahl, wenn die Website ohne zusätzliche Schriftdateien auskommen und möglichst unabhängig von externen Abrufen bleiben soll. Für längere Texte eignet sich oft eine gut lesbare Schrift mit passenden Ersatzschriften. Eine Serifenschrift wie Georgia hebt Überschriften optisch ab.
Mit system-ui nutzt der Browser die Schrift, die das jeweilige Betriebssystem für seine Benutzeroberfläche vorsieht:
body {
font-family: system-ui, sans-serif;
}
Die Schrift passt zum vertrauten Erscheinungsbild des jeweiligen Betriebssystems, sieht aber auf verschiedenen Geräten unterschiedlich aus. Prüfe daher, ob Schriftbild und Zeilenumbrüche zu deiner Website passen. Für längere Texte zählt vor allem, dass Besucherinnen und Besucher den Inhalt gut lesen können.
Wann eine Webfont sinnvoll ist
Eine Webfont lohnt sich, wenn eine bestimmte Schrift zum visuellen Auftritt gehört und auf den Geräten der Besucherinnen und Besucher zuverlässig erscheinen soll. Die Website lädt dafür eine Schriftdatei. Fallbacks bleiben trotzdem nötig, etwa wenn der Abruf fehlschlägt oder ein Zeichen in der Webfont fehlt.
@font-face {
font-family: "Beispiel Sans";
src: url("/fonts/beispiel-sans.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body {
font-family: "Beispiel Sans", Arial, sans-serif;
}
font-display: swap zeigt zuerst die Ersatzschrift. Sobald die Webfont geladen ist, wechselt der Browser zu ihr. Dabei kann sich das Layout verändern, wenn die beiden Schriften unterschiedlich viel Platz benötigen. Teste deshalb die Ersatzschrift mit echten Texten und prüfe Überschriften, Navigation und längere Absätze.
Schriftdateien schlank halten
Lade nur die Schriftschnitte, die die Website tatsächlich verwendet. Ein Schriftschnitt bezeichnet eine Variante wie normal oder fett. Nicht benötigte Varianten und Dateiformate erhöhen die Zahl der Dateien, die der Browser lädt, ohne den sichtbaren Text zu verändern. WOFF2 ist für viele moderne Websites ein geeignetes Format.
Variable Fonts bündeln mehrere Schriftschnitte in einer Datei. Das kann die Verwaltung vereinfachen, spart aber nicht in jedem Fall Daten. Entscheidend sind die tatsächlich benötigten Stile und die Dateigröße.
Ob du Schriftdateien selbst auf deinem Webserver ablegst oder einen externen Fontdienst nutzt, hängt von deinen Anforderungen ab: Selbsthosting gibt dir mehr Kontrolle über die Auslieferung, bringt aber auch die Verantwortung für Dateien und Lizenzen mit sich. Bei einem externen Dienst solltest du prüfen, wie die konkrete Einbindung funktioniert und welche Datenschutzanforderungen dafür gelten. Ob die Einbindung rechtlich zulässig ist, hängt vom konkreten Dienst und dessen Einsatz ab.
Webfonts sind weit verbreitet: Der Web Almanac 2025 fand sie auf rund 88 Prozent der untersuchten mobilen Seiten. Die untersuchten Seiten wurden größtenteils im Juli 2025 automatisiert erfasst. Die Zahl bezieht sich auf die damals untersuchten Seiten. Sie zeigt nicht, welche Lösung für eine einzelne Website am schnellsten ist oder am besten passt.
Lesbarkeit auf Geräten prüfen
Eine Schrift allein macht eine Website nicht barrierefrei. Besucherinnen und Besucher müssen Text vergrößern können, ohne dass Inhalte verschwinden oder unbenutzbar werden. Zur Lesbarkeit tragen auch eine passende Schriftgröße und ausreichender Kontrast bei. Klare Abstände erleichtern das Lesen zusätzlich.
Teste die Seite auf dem Desktop und auf einem Smartphone. Vergrößere den Text und prüfe, ob Absätze, Formulare und Navigation weiterhin funktionieren. Teste auch längere Überschriften. Prüfe außerdem Inhalte mit Umlauten, Zahlen und Links. Eine Fallback-Schrift im CSS hilft nur dann, wenn die Seite mit ihr ebenfalls gut lesbar bleibt.
Systemschrift oder Webfont wählen
| Ansatz | Vorteil | Worauf du achten solltest |
|---|---|---|
| System- oder websichere Schrift | Keine zusätzliche Schriftdatei nötig | Schriftbild und Umbrüche variieren je nach Gerät |
| Selbst gehostete Webfont | Kontrolle über Dateien und Auslieferung | Schriftschnitte, Fallbacks und Lizenz selbst verwalten |
| Externer Fontdienst | Große Schriftauswahl und vereinfachte Einbindung | Abhängigkeit vom Dienst sowie Datenschutz und Ladeverhalten prüfen |
Für eine einfache, robuste Website reicht oft eine Systemschrift mit einer sauberen Fallback-Kette. Wenn das genaue Schriftbild Teil des Designs ist, passt eine Webfont besser. Entscheide nach dem konkreten Layout und teste beide Varianten mit echten Inhalten, statt allein nach dem Namen der Schrift auszuwählen.
