Die Schrift ist das Erste, was ein Besucher auf Ihrer Website liest, und das Letzte, worüber er nachdenkt. Er bemerkt sie erst, wenn sie stört: wenn die Preisliste auf dem Handy kaum zu entziffern ist, wenn das ß in der Überschrift aus einer anderen Schrift stammt oder wenn die Seite beim Laden springt, weil die Hausschrift nach dem Text eintrifft. Die Auswahl ist riesig, freie Schriftfamilien gibt es zu Hunderten, und gerade deshalb lohnt ein Vorgehen statt eines Bauchgefühls. Dieser Beitrag zeigt, wie Sie eine oder zwei Familien auswählen, Überschrift und Fließtext sinnvoll kombinieren, Ziffern und Umlaute prüfen und mit wenigen Schnitten schnell bleiben. Wie Sie Schriften ohne Datenabfluss an fremde Server einbinden, steht im Beitrag über externe Inhalte, Karten und Schriften; hier geht es um die Gestaltungsfrage, die davor kommt.
Schrift ist Lesestoff, kein Zierrat
Webschriften sind längst der Normalfall. Im Jahr 2025 luden rund 88 Prozent (HTTP Archive Web Almanac 2025) der untersuchten Websites Webschrift-Dateien, 2024 waren es etwa 87 Prozent (HTTP Archive Web Almanac 2025).
Nur eine Minderheit von rund 12 Prozent (HTTP Archive Web Almanac 2025) bleibt bei den Schriften, die auf jedem Gerät ohnehin installiert sind. Die Frage lautet also selten, ob eine Website eine eigene Schrift bekommt, sondern welche und wie viele. Genau hier entstehen die typischen Fehler: eine Überschriftenschrift, die im Fließtext landet, vier Familien auf einer Seite, weil jede Vorlage ihre eigene mitbringt, oder ein dünner Schnitt, der auf dem Laptop elegant aussieht und auf dem Handy in der Sonne verschwindet.
Für eine Betriebswebsite hat die Schrift drei Aufgaben, und alle drei sind nüchtern. Sie muss den Fließtext in kleiner Größe auf dem Telefon lesbar halten. Sie muss Ziffern, Preise, Telefonnummern und Öffnungszeiten eindeutig zeigen. Und sie muss deutsche Texte vollständig setzen, mit Umlauten, ß und typografischen Anführungszeichen. Die Persönlichkeit der Marke kommt danach, meist über die Überschriften. Wer in dieser Reihenfolge auswählt, landet selten bei einer Schrift, die nach drei Monaten wieder ausgetauscht wird, weil Kunden die Preisliste nicht lesen können oder die Telefonnummer falsch abtippen.
Eine oder zwei Familien reichen
Eine Schriftfamilie ist eine Schrift mit all ihren Varianten, also mageren, normalen, fetten und kursiven Schnitten. Für eine Unternehmenswebsite genügen eine oder zwei Familien.
Eine einzige Familie wirkt ruhig und einheitlich, wenn sie genug Schnitte für Überschrift und Text bietet. Zwei Familien geben mehr Charakter: eine markante für Überschriften, eine ruhige für den Fließtext. Die Dokumentation von XICflow bringt das auf den Punkt: Zwei Schriften genügen, mehr wirkt selten besser (XICflow-Dokumentation). Eine dritte Familie bringt selten mehr Ausdruck, aber zuverlässig mehr Dateien, mehr Abstimmung und mehr Gelegenheiten, dass zwei Schriften einander zu ähnlich sehen und wie ein Versehen wirken.
Tabelle waagerecht wischen
| Aufbau | Wann er passt | Worauf achten |
|---|---|---|
| Eine Familie für alles | Ruhige Seiten mit viel Text, Betriebe mit sachlichem Auftritt | Mindestens ein normaler und ein fetter Schnitt, damit Überschriften sich absetzen |
| Zwei Familien: markant und ruhig | Marken mit eigenem Charakter, etwa Handwerk, Gastronomie oder Praxis | Deutlicher Unterschied in der Form, nicht nur in der Größe |
| Systemschrift | Kundenportale, Werkzeuge, Seiten mit Tempo als oberstem Ziel | Sieht auf jedem Gerät etwas anders aus, kein fester Markenauftritt |
| Display- oder Handschrift | Überschriften, kurze Zeilen, Elemente nahe am Logo | Nicht im Fließtext, nicht in Formularen oder Preislisten |
Die Systemschrift ist eine echte Option und keine Notlösung. Der Wert system-ui greift auf die Bedienoberflächenschrift des jeweiligen Betriebssystems zurück und kommt ohne eine einzige Schriftdatei aus. Rund 9,7 Prozent (HTTP Archive Web Almanac 2025) der Desktop-Seiten und 9,3 Prozent (HTTP Archive Web Almanac 2025) der mobil erfassten Seiten setzen ihn inzwischen ein. Der Preis dafür: Die Seite sieht auf einem Telefon anders aus als auf einem Laptop, Zeilen brechen an unterschiedlichen Stellen um, und die Marke bekommt keine eigene Handschrift. Für eine Website, die verkaufen und wiedererkannt werden soll, ist eine bewusst gewählte Webschrift meist die bessere Wahl, für ein Kundenportal oder ein internes Werkzeug oft nicht.
Überschrift und Fließtext kombinieren
Die wichtigste Regel beim Kombinieren heißt: Unterschied statt Ähnlichkeit.
Zwei serifenlose Schriften, die sich nur in Details unterscheiden, wirken nebeneinander nicht wie eine Gestaltungsentscheidung, sondern wie ein Fehler in der Vorlage. Bewährt haben sich zwei Wege. Der erste kombiniert eine Serifenschrift für Überschriften mit einer serifenlosen für den Text oder umgekehrt; der Unterschied ist sofort sichtbar, und beide Rollen bleiben klar getrennt. Der zweite nutzt eine einzige Familie und trennt die Rollen über die Strichstärke: Überschriften fett oder halbfett, Fließtext im Normalschnitt. Dieser Weg eignet sich, wenn Sie unsicher sind, weil er kaum danebengehen kann. Die Schriftmusterkarte oben zeigt beide Wege mit derselben Überschrift und demselben Text.
- Ähnliche Proportionen: Die Kleinbuchstaben beider Schriften sollten ungefähr gleich hoch wirken, sonst sieht der Fließtext neben der Überschrift zu klein oder zu groß aus
- Gleiche Grundhaltung: Eine nüchterne Textschrift passt zu einer klaren Überschriftenschrift, eine verspielte Überschrift braucht einen besonders ruhigen Text
- Display- und Handschriften nur für kurze Zeilen einsetzen: Überschriften, Zitate, ein Aktionsband, keine Absätze
- Die Überschriftenschrift mit langen deutschen Wörtern wie „Öffnungszeiten“ oder „Gebäudereinigung“ testen, bevor sie feststeht
- Beide Schriften neben dem echten Logo ansehen, nicht neben einem Platzhalter
- Jeder Schrift eine Rolle geben und dabei bleiben: keine dritte Schrift für Knöpfe, Fußzeile oder Aktionsbanner
Der Langwort-Test
Lesbar auch in kleiner Größe
Ob eine Textschrift taugt, entscheidet sich nicht in der Überschrift, sondern im Kleingedruckten: in Preishinweisen, Formularbeschriftungen und der Fußzeile.
Gut lesbare Textschriften haben eine großzügige Höhe der Kleinbuchstaben, offene Formen bei Buchstaben wie a, e und c und klar unterscheidbare Zeichen. Ein schneller Test ist die Folge „Il1 O0“: Wenn großes I, kleines l und die Ziffer 1 gleich aussehen, wird jede Rechnungsnummer zum Ratespiel. Vorsicht bei sehr dünnen Schnitten: Ein magerer Schnitt verliert auf hellem Grund schnell an Kontrast, auch wenn die Farbe im Entwurf stimmt. Wie Sie Schriftfarben auf ihren Kontrast prüfen, zeigt der Beitrag über Markenfarben und Kontrast; welche Schriftgrößen sich auf dem Telefon bewähren, steht im Beitrag über die Bedienbarkeit auf dem Handy.
Die Richtlinien für barrierefreie Webinhalte stellen zwei Anforderungen, die direkt mit der Schriftwahl zusammenhängen. Nach Erfolgskriterium 1.4.4 muss sich Text ohne Hilfsmittel auf 200 Prozent (W3C, WCAG 2.2) vergrößern lassen, ohne dass Inhalte oder Funktionen verloren gehen. Nach Erfolgskriterium 1.4.12 darf nichts verloren gehen, wenn Nutzer die Zeilenhöhe auf das 1,5-Fache (W3C, WCAG 2.2) der Schriftgröße, den Abstand nach Absätzen auf das 2-Fache (W3C, WCAG 2.2), den Buchstabenabstand auf das 0,12-Fache (W3C, WCAG 2.2) und den Wortabstand auf das 0,16-Fache (W3C, WCAG 2.2) setzen. Für die Schriftwahl heißt das: Eine sehr breit laufende Schrift, die schon in der Grundeinstellung knapp in ihre Knöpfe und Kästen passt, bricht unter diesen Einstellungen als Erste. Feste Höhen für Textkästen sind deshalb ebenso heikel wie Schriften, deren Zeichen sich schon im Normalfall fast berühren. Welche Rolle WCAG 2.2 für das Barrierefreiheitsstärkungsgesetz spielt, erklärt der Beitrag zur barrierefreien Website für Unternehmen.
Für längere Texte nennt Erfolgskriterium 1.4.8 auf der höchsten Stufe AAA weitere Richtwerte, die sich auch als freiwillige Messlatte eignen: Zeilen mit höchstens 80 Zeichen (W3C, WCAG 2.2), einen Zeilenabstand von mindestens dem Anderthalbfachen (W3C, WCAG 2.2) innerhalb von Absätzen und Text, der nicht im Blocksatz steht (W3C, WCAG 2.2). Gerade der Blocksatz ist im Deutschen heikel, weil lange zusammengesetzte Wörter auf schmalen Bildschirmen große Lücken in die Zeile reißen. Abhilfe schafft die automatische Silbentrennung, die der Browser übernimmt, wenn die Sprache der Seite mit lang="de" ausgezeichnet und die Eigenschaft hyphens: auto gesetzt ist. Genutzt wird sie selten: Nur etwa 10,5 Prozent (HTTP Archive Web Almanac 2025) der Seiten setzen hyphens: auto in ihrem CSS. Drei weitere Dinge kosten Lesbarkeit: Absätze in Großbuchstaben, die dem Auge die Wortbilder nehmen, kursiver Fließtext, der in kleiner Größe unruhig wird, und hellgraue Schrift auf weißem Grund.
Ziffern, Umlaute und Sonderzeichen prüfen
Viele Schriften werden mit englischsprachigen Musterzeilen vorgestellt, und dort fällt nicht auf, was im Deutschen fehlt.
Bevor eine Schrift feststeht, gehört deshalb eine eigene Testzeile in den Entwurf: „Größe, Öffnungszeiten, 0 1 7“ zeigt auf einen Blick Umlaute, ß, Komma und Ziffern, die sich leicht verwechseln lassen. Dazu kommen typografische Anführungszeichen, der Gedankenstrich, das Eurozeichen und das große ẞ. Das amtliche Regelwerk lässt bei Schreibung in Großbuchstaben ausdrücklich beide Formen zu, das große ẞ und die Doppelung SS (Rat für deutsche Rechtschreibung, Paragraf 25 E3). Wer Überschriften oder Etiketten in Großbuchstaben setzt, sollte also wissen, ob seine Schrift das große ẞ enthält. Fehlt ein Zeichen, springt der Browser für genau dieses Zeichen auf eine Ersatzschrift, und mitten im Wort steht ein Buchstabe in fremder Form.
Bei Ziffern lohnt ein zweiter Blick. Viele Schriften bringen zwei Arten mit: proportionale Ziffern, die im Fließtext harmonisch laufen, und Tabellenziffern, die alle gleich breit sind und in Preislisten, Öffnungszeiten und Tabellen sauber untereinanderstehen. Unter den im Web gefundenen Schriften mit OpenType-Funktionen enthalten rund 20 Prozent (HTTP Archive Web Almanac 2025) Tabellenziffern als umschaltbare Funktion. Eingeschaltet werden sie über font-variant-numeric: tabular-nums (W3C, CSS Fonts Module Level 4), was bisher nur auf 3,2 bis 3,3 Prozent (HTTP Archive Web Almanac 2025) der Seiten geschieht. Wer eine Preisliste mit Beträgen untereinander zeigt, prüft beim Auswählen, ob die Ziffern der Schrift von Haus aus gleich breit sind oder sich umschalten lassen; sonst stehen Kommas und Euro-Beträge schief untereinander, und die Liste wirkt unordentlich, obwohl jede Zahl stimmt.
/* Sprache auszeichnen, damit die Silbentrennung greift: <html lang="de"> */
body {
font-family: "Ihre Textschrift", system-ui, sans-serif;
line-height: 1.5;
}
p {
max-width: 65ch; /* Zeilen nicht zu lang werden lassen */
hyphens: auto; /* Silbentrennung nach der Sprache der Seite */
}
.price-list td,
.opening-hours {
font-variant-numeric: tabular-nums; /* gleich breite Ziffern */
}Jeder Schnitt ist eine Datei
Ein Schnitt ist eine Strichstärke oder Lage einer Familie: normal, halbfett, fett, kursiv. Bei klassischen Webschriften ist jeder Schnitt eine eigene Datei, die der Browser beim ersten Besuch lädt.
Eine typische Webschrift-Datei ist komprimiert 30 bis 40 KB (HTTP Archive Web Almanac 2025) groß, und viele Websites laden mehrere davon. Zwei Familien mit je zwei Schnitten sind vier Dateien; wer eine Familie komplett mit allen Stärken und Kursiven einbindet, kommt schnell auf acht und mehr, von denen die Seite vielleicht zwei verwendet. Die Faustregel für Betriebswebsites: ein Normalschnitt für den Text, ein fetter für Hervorhebungen und Zwischenüberschriften, ein Schnitt der Überschriftenschrift, wenn es eine zweite Familie gibt. Kursiv nur, wenn Sie ihn tatsächlich einsetzen.
Text: ein Normalschnitt
Der Normalschnitt trägt Absätze, Listen, Formularfelder und Fußzeile. Er muss in kleiner Größe ruhig und eindeutig bleiben, denn an ihm hängt die Lesbarkeit der ganzen Seite.
Betonung: ein fetter Schnitt
Halbfett oder fett für Zwischenüberschriften, Preise und wichtige Hinweise. Ein kräftiger Schnitt reicht, ein zweiter fällt neben dem ersten kaum auf und kostet trotzdem eine Datei.
Überschrift: ein Schnitt der zweiten Familie
Gibt es eine eigene Überschriftenschrift, braucht sie meist nur einen Schnitt. Überschriften erscheinen selten in mehreren Stärken, jeder weitere Schnitt wäre eine Datei ohne Aufgabe.
Das Dateiformat ist weitgehend entschieden: Etwa 65 Prozent (HTTP Archive Web Almanac 2025) der abgerufenen Schriftdateien sind WOFF2, das Format mit der besseren Kompression. Daneben wachsen variable Schriften, die viele Strichstärken in einer Datei vereinen; 39,4 Prozent (HTTP Archive Web Almanac 2025) der Desktop- und 41,3 Prozent (HTTP Archive Web Almanac 2025) der mobil erfassten Websites nutzen mindestens eine. Eine variable Datei ist in der Regel größer als ein einzelner Schnitt, ersetzt aber mehrere. Sie lohnt sich, wenn Sie tatsächlich drei und mehr Stärken einsetzen; für zwei Schnitte sind zwei schlanke Einzeldateien oft die kleinere Lösung. Zu jeder Datei gehört außerdem eine Lizenz. Rund 64 Prozent (HTTP Archive Web Almanac 2025) der untersuchten Websites nutzen mindestens eine Schrift unter der SIL Open Font License, die Nutzung, Veränderung und Weitergabe erlaubt und damit auch das Ablegen auf dem eigenen Server. Bei gekauften Schriften ist das nicht selbstverständlich: Viele Lizenzen unterscheiden zwischen Druck, Desktop und Web, manche verlangen für das Einbetten in eine Website einen eigenen Baustein. Wer eine Hausschrift aus dem Druckbereich mitbringt, klärt vor dem Relaunch, ob die Weblizenz enthalten ist.
Laden, ohne dass die Seite springt
Ist eine Webschrift noch nicht da, muss der Browser entscheiden: unsichtbaren Text zeigen und warten oder sofort eine Ersatzschrift zeichnen und später tauschen. Die Eigenschaft font-display legt das fest.
Für swap empfiehlt die Spezifikation für die meisten Fälle eine sehr kurze Sperrzeit von 100 Millisekunden (W3C, CSS Fonts Module Level 4) oder weniger, danach wird jederzeit getauscht; für block empfiehlt sie, ebenfalls für die meisten Fälle, eine Sperrzeit von 3 Sekunden (W3C, CSS Fonts Module Level 4), in der der Text unsichtbar bleibt, solange die Schrift fehlt. Etwa die Hälfte (HTTP Archive Web Almanac 2025) der Seiten mit Webschriften setzt für mindestens eine Schrift swap. Der Tausch hat einen Nebeneffekt: Ist die Ersatzschrift breiter oder schmaler als die eigentliche Schrift, rutschen Zeilen und Absätze nach, sobald die echte Schrift eintrifft, und wer gerade liest, verliert die Stelle.
Die strengere Variante heißt optional. Ist die Schrift beim ersten Zeichnen nicht da, bleibt die Ersatzschrift für diesen Seitenaufruf stehen; laut Spezifikation darf eine solche Schrift das Layout beim Laden nicht springen lassen (W3C, CSS Fonts Module Level 4). Damit sie trotzdem in aller Regel rechtzeitig ankommt, wird die wichtigste Datei mit einer Vorladeanweisung früh angefordert. Genutzt wird optional bisher kaum, auf etwa 0,4 bis 0,5 Prozent (HTTP Archive Web Almanac 2025) der Seiten. Welche Rolle Auslieferung, Zwischenspeicher und Vorladen für die Ladezeit insgesamt spielen, beschreibt der Beitrag über statische Auslieferung und PageSpeed. Rund 72 Prozent (HTTP Archive Web Almanac 2025) der Websites liefern inzwischen mindestens eine Schriftdatei vom eigenen Server aus, und laut Web Almanac verschiebt sich das Verhältnis weiter zur ausschließlichen Selbstauslieferung, vermutlich aus Tempo- und Datenschutzgründen. Was der Datenschutz dabei verlangt, erklärt der Beitrag über Schriften ohne Datenabfluss.
Schriften in XICflow festlegen
In XICflow wählen Sie die Schriften einmal für die ganze Website, getrennt nach zwei Rollen: eine für „Überschriften“ und eine für „Fließtext“ (XICflow-Dokumentation).
Zur Auswahl stehen 775 freie Schriftfamilien (XICflow-Leistungsseite) mit Suche und Kategorie-Filter, aufgeteilt in 272 serifenlose, 147 Serifen-, 191 Display-, 128 Handschrift- und 37 Monospace-Familien (XICflow-Dokumentation). Je Familie legen Sie fest, welche Schnitte mitgeliefert werden; vorgegeben sind der Normalschnitt 400 sowie 600 und 700, soweit die Familie sie hat (XICflow-Dokumentation). Jeder zusätzliche Schnitt wird mit ausgeliefert, deshalb lohnt es sich, nur die Stärken anzuhaken, die Ihre Seiten wirklich nutzen. Wo die Einstellung sitzt, zeigt die Dokumentation zu Marke und Design, was das Gestaltungssystem darüber hinaus bietet, die Funktionsübersicht zu Flow Design.
Beim Veröffentlichen holt der Bau ausschließlich die gewählten Familien und Schnitte und legt sie als woff2 mit Ihrer Website ab (XICflow-Leistungsseite); beim Besuch wird keine Schrift von fremden Servern geladen. Mitgeliefert werden die Zeichensätze für Latein und erweitertes Latein, die Umlaute, ß und die westeuropäischen Sonderzeichen abdecken. Die ausgelieferte Seite nutzt font-display: optional und lädt je Familie den Hauptschnitt vor, damit der Text beim Laden nicht nachrutscht. Ein Hinweis für die Auswahl: Die Vorschauzeile in der Liste zeigt die Ersatzschrift Ihres Rechners, solange die Familie dort nicht installiert ist; das echte Schriftbild sehen Sie nach dem Veröffentlichen (XICflow-Dokumentation). Prüfen Sie Ihre Testzeile deshalb auf der veröffentlichten Seite, am Telefon und am Rechner. Wie Schrift, Farbe und Aufbau in fertigen Websites zusammenspielen, zeigen die Demos.
Die Schriftprobe vor dem Livegang
- Je Rolle zwei oder drei Kandidaten auswählen und Display- oder Handschriften nur für Überschriften zulassen
- Eine echte Überschrift mit dem längsten Wort Ihres Angebots setzen und auf dem Telefon in voller Größe ansehen
- Die Testzeile „Größe, Öffnungszeiten, 0 1 7“ und die Folge „Il1 O0“ im Fließtext prüfen, dazu Anführungszeichen, Gedankenstrich, Eurozeichen und das große ẞ
- Eine Preisliste oder die Öffnungszeiten setzen und prüfen, ob die Ziffern sauber untereinanderstehen
- Den Text im Browser auf 200 Prozent (W3C, WCAG 2.2) vergrößern und Zeilen- sowie Buchstabenabstand erhöhen: Nichts darf abgeschnitten werden oder überlappen
- Die Schnitte zählen, die tatsächlich ausgeliefert werden, und alles abwählen, was keine Aufgabe hat
- Die Seite auf einem älteren Telefon mit langsamer Verbindung laden und darauf achten, ob Text nachrutscht
Weniger Schriften, klarere Seite