Typografie im Web: Schriftwahl, Lesbarkeit und Größenverhältnisse

Eine Schrift kann auf einem Markenplakat hervorragend wirken und in einem langen Fachartikel mühsam werden. Auf einer Webseite kommen außerdem Formulare, Tabellen, kurze Beschriftungen und wechselnde Bildschirmgrößen hinzu. Die Auswahl einer Schrift ist deshalb erst der Beginn eines Systems und keine abschließende Geschmacksentscheidung.

Dieser Leitfaden entwickelt eine prüfbare Vorgehensweise für einen fiktiven Beratungsauftritt mit Leistungsseiten, Fachbeiträgen und Kontaktformular. Die Beispiele sind eigene redaktionelle Entwürfe. Genannte CSS-Werte dienen als Ausgangspunkt für Versuche und stellen keine allgemeine Zusage guter Lesbarkeit dar.

1. Die tatsächlichen Textaufgaben erfassen

Beginnen Sie mit einer Liste der Textarten. Ein Unternehmensauftritt benötigt vielleicht große Titel, Fließtext, Navigationsbegriffe, Eingabebeschriftungen und Preisangaben. Ein Fachportal ergänzt lange Quellenlisten, Tabellen und Quellcode. Diese Aufgaben stellen unterschiedliche Anforderungen an dieselbe Schriftfamilie.

Für die fiktive Beratung werden drei echte Mustertexte vorbereitet: eine kurze Leistungsbeschreibung, ein Fachabschnitt mit Zwischenüberschriften und ein Formular mit einer längeren Fehlermeldung. „Lorem ipsum“ ist für diese Prüfung ungeeignet, weil Wortlänge, Satzbau und Sonderzeichen der späteren Sprache fehlen.

Erfassen Sie zudem die vorgesehenen Sprachen. Umlaute, Akzente, Währungszeichen und spezielle Fachzeichen müssen tatsächlich enthalten sein. Eine Schrift kann die Hauptsprache vollständig abdecken und bei übersetzten Namen dennoch auf eine optisch unpassende Ersatzschrift zurückfallen.

Die Aufgabenliste hilft, eine Auswahl einzugrenzen. Eine sehr schmale Schrift kann große Titel tragen, ist aber nicht automatisch die beste Grundschrift. Eine zweite Schrift ist nur dann sinnvoll, wenn ihre zusätzliche Rolle den Aufwand für Gestaltung, Dateien und Pflege rechtfertigt.

2. Buchstabenformen im Zusammenhang prüfen

Lesbarkeit hängt nicht allein davon ab, ob eine Schrift mit oder ohne Serifen gestaltet ist. Sichtbare Buchstabenhöhe, Innenräume, Strichstärken und Zeichenunterscheidbarkeit beeinflussen die Wahrnehmung. Entscheidend ist das Zusammenspiel mit Größe und Ausgabesituation.

Testen Sie ähnliche Zeichen bewusst nebeneinander: großes I, kleines l und die Ziffer 1 sowie großes O und die Ziffer 0. Bei Seriennummern, Rechnungen oder Zugangsdaten kann eine schlechte Unterscheidbarkeit konkrete Fehler begünstigen. Für einen erzählenden Artikel fällt dieselbe Schwäche möglicherweise weniger auf.

Prüfen Sie auch längere deutsche Begriffe und Fachwörter. Die Schrift sollte nicht nur im einzeln gesetzten Markennamen überzeugen. Überschriften, die häufig aus zusammengesetzten Wörtern bestehen, benötigen eine andere Aufmerksamkeit als ein Muster aus kurzen englischen Wörtern.

Die Auswahl wird an realen Geräten beurteilt. Ein hochauflösender großer Bildschirm kann feine Unterschiede anders darstellen als ein kleines Mobilgerät. Ein Screenshot aus dem Entwurfsprogramm ersetzt daher nicht die Betrachtung im Browser mit der tatsächlich ausgelieferten Schriftdatei.

3. Schriftgröße als Teil eines Verhältnisses sehen

Eine feste Aussage wie „16 Pixel sind immer richtig“ greift zu kurz. Die sichtbare Größe hängt von der Schrift ab. Auch Abstand zum Bildschirm, Textdichte und Nutzungssituation spielen eine Rolle. Ausgangswerte müssen deshalb an den vorgesehenen Inhalten geprüft werden.

Relative Einheiten erleichtern ein zusammenhängendes System. Eine Grundschriftgröße kann über rem beschrieben werden. Überschriften erhalten dazu passende Stufen. Die Browsermöglichkeiten zur Vergrößerung dürfen dabei nicht eingeschränkt werden. Eine zusätzliche Bedienung auf der Webseite ist kein Ersatz für funktionierenden Browserzoom.

Die W3C-Erläuterung zur Textvergrößerung beschreibt im dort behandelten Kriterium die Vergrößerbarkeit bis 200 Prozent ohne Verlust von Inhalt oder Funktion, abgesehen von den genannten Ausnahmen. Für die Praxis werden deshalb auch Beschriftungen und Steuerelemente vergrößert geprüft.

Ein typischer Fehler liegt in fest begrenzten Höhen. Der Text wächst, der Kartenkopf bleibt jedoch gleich hoch und schneidet die zweite Zeile ab. Besser ist ein Aufbau, der seinen Inhalt aufnehmen kann. Die konkrete Ausrichtung wird anschließend im gesamten Komponentenverbund geprüft.

4. Zeilenlänge und Zeilenabstand gemeinsam einstellen

Sehr lange Textzeilen erschweren das Auffinden der nächsten Zeile. Sehr kurze Zeilen zerlegen den Gedankengang in viele Umbrüche. Es gibt keinen einzelnen Wert, der jede Schrift, Sprache und Textsorte optimal abbildet. Eine begrenzte Lesebreite ist trotzdem eine sinnvolle Ausgangsbasis.

Die Einheit ch kann bei der Begrenzung helfen. Sie orientiert sich an einer Zeichenmetrik und ist keine exakte Zusage einer bestimmten Anzahl beliebiger Buchstaben pro Zeile. Prüfen Sie deshalb, wie die tatsächlichen Absätze innerhalb der gewählten Breite aussehen.

.article-text {
  max-width: 66ch;
  font-size: 1.0625rem;
  line-height: 1.65;
}
.article-text p { margin-block: 0 1.25em; }
.article-text h2 { margin-block: 2em .6em; }

Diese Werte sind ein Versuch, kein fertiger Standard. Ändern Sie jeweils nur wenige zusammengehörige Parameter. Wird die Zeile breiter, kann ein anderer Zeilenabstand hilfreich sein. Ein riesiger Abstand löst jedoch nicht automatisch eine unpassende Zeilenlänge.

Lesen Sie mehrere Absätze tatsächlich durch. Die Beurteilung eines einzelnen Satzes zeigt nicht, ob längere Inhalte ermüden oder die Absatzfolge schwer nachvollziehbar wird. Besonders Quellenlisten und Aufzählungen benötigen eine eigene Betrachtung innerhalb des Systems.

5. Eine überschaubare typografische Skala entwickeln

Die Bedeutung eines Textes sollte nicht durch beliebig viele Größenstufen erklärt werden. Beginnen Sie mit Grundtext, kleiner Zusatzinformation, Abschnittsüberschrift und Haupttitel. Weitere Stufen werden dort ergänzt, wo eine echte Aufgabe entsteht.

Die Stufen können je Bildschirm flüssig angepasst werden. Eine Regel mit clamp() begrenzt einen variablen Wert zwischen Minimum und Maximum. Vermeiden Sie dabei eine ausschließlich an der Bildschirmbreite ausgerichtete Schriftgröße, die Nutzervergrößerung unangemessen relativiert.

Unabhängig von der sichtbaren Größe wird die HTML-Überschriftenebene nach dem Inhalt gewählt. Die dritte Überschriftenebene kann in einem bestimmten Baustein größer aussehen als an anderer Stelle, wenn der Kontext das rechtfertigt. Inhaltliche Gliederung und Gestaltung sind verbundene, aber unterschiedliche Entscheidungen.

6. Schriftgewichte und Hervorhebungen begrenzen

Eine große Sammlung verfügbarer Gewichte verführt zu unnötigen Varianten. Für viele Auftritte reichen wenige gut unterscheidbare Gewichte. Zusätzliche Schnitte brauchen einen Zweck. Wenn jeder zweite Satz fett erscheint, verliert die Hervorhebung ihre Funktion.

Nutzen Sie Hervorhebung für eine inhaltliche Aussage. Ein Fachbegriff kann beim ersten Auftreten markiert werden. Eine entscheidende Voraussetzung kann sichtbar betont sein. Mehrere konkurrierende Auszeichnungen wie fett, kursiv, farbig und unterstrichen im selben kurzen Absatz erzeugen häufig Unruhe.

Prüfen Sie, ob der gewünschte Schnitt als echte Datei oder als verfügbare Variation geliefert wird. Andernfalls kann der Browser einen ähnlichen Eindruck künstlich erzeugen. Das kann vom vorgesehenen Schriftbild abweichen. Die tatsächlich verwendeten Gewichte sollten daher mit der Fontdefinition übereinstimmen.

Für Links bleibt eine erkennbare Gestaltung wichtig. Eine Unterstreichung kann die Funktion zusätzlich zur Farbe anzeigen. Wird sie für dekorative Hervorhebungen verwendet, sollte keine Verwechslung mit anklickbaren Inhalten entstehen. Die Gestaltungskonvention muss über den Auftritt hinweg nachvollziehbar bleiben.

7. Zahlen und Tabellen gesondert betrachten

Zahlen stellen andere Anforderungen als längere Sätze. Preislisten, Zeitangaben und Messwerte sollten leicht vergleichbar sein. Eine Schrift mit geeigneten tabellarischen Ziffern kann dabei helfen, Stellen untereinander auszurichten. Ob diese Funktion verfügbar ist, hängt von der Schriftdatei ab.

.numeric-column {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.code-example {
  font-family: ui-monospace, monospace;
  overflow-x: auto;
}

Die Ausrichtung ersetzt keine verständlichen Einheiten. Eine Zahlenspalte ohne erkennbare Währung oder Messgröße bleibt mehrdeutig. Tabellen brauchen außerdem eine klare Zuordnung zu ihren Überschriften. Die typografische Gestaltung unterstützt die Datenstruktur und kann sie nicht allein erzeugen.

Für den Beratungsauftritt werden beispielhafte Preisangaben, Telefonnummern und mehrstellige Projektnummern geprüft. Solche Werte sind ausdrücklich Muster und keine tatsächlichen Angebote. Auf diese Weise lassen sich ungünstige Zeichenformen erkennen, bevor echte Geschäftsangaben eingepflegt werden.

8. Schriften zuverlässig laden

Eine Webschrift ist eine zu ladende Ressource. Bis sie verfügbar ist, muss der Browser eine Darstellungsstrategie verwenden. Der sichtbare Wechsel zwischen Ersatzschrift und Webschrift kann Zeilenumbrüche und Elementgrößen verändern.

Die MDN-Dokumentation zu font-display erläutert die möglichen Verhaltensweisen. Eine Einstellung wird nicht allein nach einem Schlagwort gewählt. Entscheidend ist, wie Textsichtbarkeit und späterer Wechsel im konkreten Projekt wirken.

@font-face {
  font-family: "Project Sans";
  src: url("/fonts/project-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
body { font-family: "Project Sans", system-ui, sans-serif; }

Der Dateiname ist ein Platzhalter für eine tatsächlich lizenzierte und vorhandene Schriftdatei. Die Regel darf nicht unverändert auf einen nicht existierenden Pfad zeigen. Laden Sie nur benötigte Varianten und prüfen Sie, ob ein Unterzeichensatz alle erforderlichen Sprachen abdeckt.

Die web.dev-Empfehlungen zur Fontleistung behandeln unter anderem verzögerte Textdarstellung und Layoutverschiebungen beim Schriftwechsel. Für eine aussagekräftige Prüfung werden deshalb ein leerer Cache, verzögerte Fontantworten und die Ersatzdarstellung betrachtet.

9. Ersatzschriften als vorgesehenen Zustand gestalten

Die Ersatzschrift ist kein bedeutungsloser Fehlerzustand. Sie kann bei langsamen Verbindungen, blockierten Ressourcen oder kurz nach dem ersten Seitenaufbau sichtbar sein. Ihre Größenverhältnisse sollten den vorgesehenen Inhalt möglichst stabil halten.

Prüfen Sie große Überschriften, Menüpunkte und Formularbuttons mit deaktivierter Webschrift. Wenn ein Menü erst nach dem Fontwechsel passt, liegt ein empfindlicher Aufbau vor. Die endgültige Schrift kann dieses Problem in schnellen Tests verdecken.

Auch persönliche Nutzereinstellungen müssen berücksichtigt werden. Personen können eigene Schrift- oder Abstandseinstellungen bevorzugen. Eine robuste Oberfläche bewahrt dann ihre Information und Bedienbarkeit. Nicht jede spätere Darstellung muss pixelgleich mit dem Entwurf sein.

Dokumentieren Sie die gewählte Ersatzfamilie und bekannte Unterschiede. Diese Information hilft bei einer späteren Überarbeitung. Ein Fontwechsel ist dann eine bewusste Anpassung des Systems und kein stiller Austausch einer Datei ohne Prüfung der Folgen.

10. Anpassbare Abstände zulassen

Die W3C-Erläuterung zu Textabständen beschreibt eine Prüfung mit veränderten Zeilen-, Absatz-, Buchstaben- und Wortabständen. Die dort genannten Werte sind keine Pflichtvorgabe für die Standardgestaltung. Entscheidend ist, dass bei der beschriebenen Anpassung keine Inhalte oder Funktionen verloren gehen.

Gerade fest gestaltete Karten und Navigationsleisten können bei zusätzlichen Abständen Probleme zeigen. Ein zuvor passender Titel benötigt plötzlich eine weitere Zeile. Eine Beschriftung darf dann nicht abgeschnitten oder von einer benachbarten Aktion überlagert werden.

Nutzen Sie für die Prüfung ein begrenztes Teststylesheet und entfernen Sie es anschließend wieder. Die beobachteten Schwierigkeiten werden am jeweiligen Baustein behoben. Ein pauschales Verkleinern aller Texte wäre keine passende Antwort auf den Wunsch nach besserer Lesbarkeit.

Berücksichtigen Sie außerdem Wörter mit geschützten Leerzeichen und absichtlich zusammengehaltenen Einheiten. Solche Maßnahmen können sinnvoll sein, sollten aber bei schmalen Ansichten nicht zu unnötigem Überlauf führen. Prüfen Sie den tatsächlichen Umbruch statt ausschließlich die CSS-Regel.

11. Lizenz und Bereitstellung vor dem Einbau klären

Eine heruntergeladene Schriftdatei ist nicht automatisch für jede Nutzung freigegeben. Webeinbettung, Appnutzung und Druck können unterschiedliche Lizenzbedingungen besitzen. Die konkreten Bedingungen müssen an der tatsächlichen Bezugsquelle geprüft und dokumentiert werden.

Die Entscheidung für eine eigene Bereitstellung ist außerdem eine technische Frage. Dateipfade, Cacheverhalten und spätere Aktualisierung gehören dazu. Bei einem externen Dienst werden zusätzlich dessen tatsächliche Einbindung und die erforderliche rechtliche Einordnung des Projekts betrachtet.

Dieser Leitfaden empfiehlt deshalb keine ungeprüfte einzelne Schriftfamilie. Ein vorhandener Markenfont wird zunächst auf Eignung und erlaubte Webnutzung untersucht. Erst wenn eine nachvollziehbare Lücke bleibt, ist die Suche nach einer ergänzenden Familie sinnvoll.

Bewahren Sie den Lizenznachweis zusammen mit den vorgesehenen Dateien auf. In der Projektdokumentation stehen Quelle, Version, erlaubte Nutzungsart und eingesetzte Varianten. Das erleichtert spätere Änderungen und verhindert, dass eine Person versehentlich eine anders lizenzierte Fassung austauscht.

12. Eine reale typografische Prüffläche anlegen

Eine Prüffläche sammelt die wichtigen Textaufgaben an einem Ort. Sie enthält einen langen Seitentitel, einen mehrteiligen Absatz, eine Liste, ein Formular und eine kleine Tabelle. Alle Inhalte werden in den tatsächlichen Sprachen vorbereitet.

Speichern Sie die Ergebnisse mit Datum und eingesetzter Schriftversion. Eine spätere Änderung kann dann an denselben Fällen geprüft werden. Die Dokumentation sollte konkrete Beobachtungen enthalten. „Typografie sieht gut aus“ erklärt nicht, ob ein längerer Fehlertext tatsächlich nutzbar blieb.

Wenn reale Personen in die Prüfung einbezogen werden, müssen deren Beobachtungen korrekt beschrieben werden. Eine kleine qualitative Rückmeldung ist kein repräsentativer Lesbarkeitstest. Die Grenze der Aussage wird ebenso dokumentiert wie die gefundene Verbesserung.

13. Sprache, Umbruch und redaktionelle Pflege verbinden

Lange Wörter sind im Deutschen ein normaler Bestandteil fachlicher Texte. Eine Gestaltung sollte dafür geeignete Umbruchmöglichkeiten vorsehen. Künstliche Trennungen im gespeicherten Titel sind dagegen mit Vorsicht zu behandeln. Sie können in Suchvorschauen, E-Mails oder Übersetzungen an anderer Stelle erscheinen und dort unpassend sein.

Die Sprachangabe im Dokument hilft dem Browser und unterstützenden Technologien, Inhalte richtig zu behandeln. Eine englische Sprachfassung erhält eine passende englische Sprachangabe. Einzelne anderssprachige Textteile können gezielt ausgezeichnet werden. Das ersetzt keine gute Übersetzung, schafft aber einen korrekteren technischen Zusammenhang.

Automatische Silbentrennung ist eine mögliche Hilfe, ihre tatsächliche Darstellung muss jedoch in den vorgesehenen Browsern geprüft werden. Wörterbücher und verfügbare Sprachunterstützung können sich unterscheiden. Eine Regel allein beweist deshalb nicht, dass jeder schwierige Titel angenehm umbricht.

Für sehr lange technische Zeichenfolgen wie Dateinamen oder Adressen wird ein geeigneter Überlauf beziehungsweise Umbruch vorgesehen. Fachlich wichtige Zeichen dürfen nicht stillschweigend entfernt werden. Bei Quellcode kann horizontales Scrollen im Codebereich sinnvoller sein als eine Darstellung, die den Zusammenhang einzelner Zeilen unklar macht.

Auch die Redaktion trägt zur Qualität bei. Ein umständlicher Titel muss nicht allein durch immer kleinere Schrift passend gemacht werden. Prüfen Sie, ob sich dieselbe Aussage präziser formulieren lässt. Die Entscheidung wird mit dem Inhalt getroffen und anschließend in allen Sprachfassungen nachvollzogen.

Neue Inhalte werden schließlich in die vorhandene Prüffläche aufgenommen, wenn sie eine bisher unbekannte Schwierigkeit zeigen. Ein außergewöhnlich langer Produktname oder eine neue Währung kann eine zusätzliche Anforderung darstellen. Auf diese Weise wächst das typografische System anhand realer Aufgaben und verliert seine Regeln nicht mit jeder Ergänzung.

14. Checkliste für die typografische Abnahme

• Textarten, Sprachen und benötigte Sonderzeichen sind erfasst.
• Die Schrift wurde mit echten Inhalten im Browser geprüft.
• Ähnliche Buchstaben und Zahlen bleiben unterscheidbar.
• Grundgröße, Zeilenlänge und Zeilenabstand passen zusammen.
• Die typografischen Stufen besitzen nachvollziehbare Rollen.
• Hervorhebungen und Linkgestaltung bleiben eindeutig.
• Tabellenwerte sind verständlich ausgerichtet und beschriftet.
• Vergrößerung führt nicht zu abgeschnittenen Inhalten.
• Die Ersatzschrift und langsame Ladezustände wurden geprüft.
• Persönliche Abstandseinstellungen bleiben nutzbar.
• Schriftlizenz und eingesetzte Dateien sind dokumentiert.
• Ein späterer Fontwechsel erhält dieselben Prüffälle.

Häufige Fragen zur Webtypografie

Sind Serifenschriften grundsätzlich schlechter lesbar?

Eine solche pauschale Aussage ist für die Auswahl nicht hilfreich. Schriftform, Größe, Textart und Nutzungssituation müssen gemeinsam betrachtet werden.

Braucht eine professionelle Webseite mehrere Schriftfamilien?

Nein. Eine gut geeignete Familie kann viele Aufgaben abdecken. Eine zusätzliche Familie braucht eine konkrete gestalterische Funktion und eine passende Lizenz.

Ist font-display: swap immer die beste Einstellung?

Die Wahl hängt vom konkreten Ladeverhalten und dem gewünschten Umgang mit Ersatzschriften ab. Prüfen Sie Sichtbarkeit und Layoutwechsel mit den tatsächlichen Dateien.

Quellen und weitere Grundlagen

Die verlinkten W3C-WAI-Dokumente, die MDN-Referenz und web.dev wurden am 9. November 2026 geprüft. Auswahlablauf, Prüffläche und Beispiele sind eigene redaktionelle Arbeitshilfen.

Weiterführend: Semantisches HTML, Ladezeit und Nutzererlebnis und Anforderungen an Unternehmenswebseiten.