Gute Webtypografie hilft dir, einen Text zu beginnen, seine Struktur zu erkennen und beim Lesen die Zeile wiederzufinden. Dafür müssen Schriftgröße, Zeilenlänge, Zeilenabstand und Überschriften zusammenspielen. Eine außergewöhnliche Schrift allein löst keine dieser Aufgaben.
Eine echte Dokumentationsseite als Leseprobe
Eine fachliche Referenz ist die USWDS-Typografiedokumentation. Zwischenüberschriften gliedern den Inhalt, Absätze beginnen an einer gemeinsamen linken Kante und unterstrichene Links bleiben im Text erkennbar. Fett gesetzte Einleitungen markieren einzelne Empfehlungen. Der Leser muss diese verschiedenen Ebenen nicht aus Schriftgröße allein erschließen.
Die Seite nennt für längere Texte Orientierungswerte, unter anderem einen Zeilenabstand von mindestens 1,5. Solche Werte sind Ausgangspunkte des konkreten Designsystems, keine Garantie für jeden Text. Eine deutsche Überschrift mit langen zusammengesetzten Wörtern verhält sich anders als eine kurze englische. Deshalb solltest du mit deinen echten Inhalten prüfen, nicht nur mit Blindtext.
Die Spalte ist Teil der Typografie
Eine Textspalte darf auf einem großen Bildschirm begrenzt bleiben. Wenn sie mit dem gesamten Browserfenster mitwächst, verändert sich der Zeilensprung erheblich. Auf dem Smartphone braucht sie dagegen genügend Platz neben den Seitenrändern. Ein starrer Pixelwert für alle Geräte löst diesen Gegensatz nicht.
Lege eine flexible Breite und eine Obergrenze fest. Eine Angabe in ch kann als Ausgangspunkt helfen, ist aber kein exakter Zeichenzähler für jede Schrift. Prüfe Absätze mit kurzen und langen Wörtern, Listen, Links und hervorgehobenen Begriffen. Achte darauf, ob Überschriften versehentlich wie ein eigener, vom folgenden Absatz getrennter Bereich wirken.
Größe darf sich verändern
Die W3C-Anforderung zur Textvergrößerung verlangt grundsätzlich, dass Text bis 200 Prozent ohne Verlust von Inhalt oder Funktion vergrößert werden kann; definierte Ausnahmen sind zu beachten. Die Anforderung an Textabstände prüft außerdem, ob individuell veränderte Abstände Inhalte abschneiden oder überlagern.
Das bedeutet nicht, dass jede Website exakt dieselben Standardabstände verwenden muss. Es bedeutet, dass dein Layout Änderungen aushalten soll. Feste Höhen um Absätze, knapp bemessene Buttons und abgeschnittene Überschriften sind deshalb besonders verdächtige Stellen.
Ein kurzer Typografie-Test
Öffne einen langen Artikel auf Desktop und Smartphone. Lies einen vollständigen Abschnitt, statt nur die Gesamtwirkung anzusehen. Vergrößere anschließend den Text. Prüfe, ob du jede Überschrift einem folgenden Absatz zuordnen kannst und ob Links auch ohne Mausbewegung sichtbar sind.
Ändere im Vergleichswerkzeug unten die Zeilenlänge. Es ist eine gekennzeichnete Demonstration, keine Studie zur optimalen Breite. Nutze sie, um Unterschiede zu sehen, und überprüfe die Einstellung anschließend an deiner eigenen Seite.
Hierarchie beginnt mit dem Inhalt
Bevor du Schriftgrößen festlegst, ordne die Aufgaben des Textes. Eine Überschrift benennt den nächsten Gedanken, eine Einleitung gibt Orientierung und ein Absatz entwickelt ein Argument. Wenn alle drei Ebenen denselben Satz wiederholen, kann auch eine sorgfältige Schriftwahl keine klare Struktur herstellen. Prüfe zunächst, ob sich der Artikel anhand seiner Zwischenüberschriften sinnvoll überblicken lässt.
Die visuelle Hierarchie sollte diese Ordnung unterstützen. Nicht jeder hervorgehobene Satz braucht eine große Schrift oder einen farbigen Kasten. Zu viele Auszeichnungen konkurrieren miteinander und erschweren die Unterscheidung wichtiger Ebenen. Beginne mit wenigen klaren Rollen und ergänze eine weitere nur, wenn sie eine wiederkehrende redaktionelle Aufgabe erfüllt.
Rhythmus entsteht zwischen den Zeilen
Betrachte einen Absatz als zusammenhängende Fläche. Zu enge Zeilen können das Verfolgen der nächsten Zeile erschweren; sehr große Abstände können den Zusammenhang auflösen. Die passende Einstellung hängt auch von der Schrift, ihrer tatsächlichen Größe und der Spaltenbreite ab. Ändere deshalb bei einem Vergleich möglichst eine Größe nach der anderen und lies jeweils denselben Text.
Absatzabstände erfüllen eine andere Aufgabe als Zeilenabstände. Sie markieren einen neuen Gedanken. Wenn jeder Satz einen eigenen Absatz erhält, wird eine längere Argumentation unnötig zerstückelt. Wenn mehrere Themen in einem einzigen Block stecken, fehlen Einstiegspunkte. Überarbeite deshalb Text und Layout gemeinsam, statt eine ungünstige Absatzstruktur allein durch mehr Weißraum zu kompensieren.
Lange Wörter gehören zum Testmaterial
Prüfe die Gestaltung mit tatsächlichen deutschen Begriffen, Datumsangaben und Links. Eine Überschrift wie „Benachrichtigungseinstellungen“ kann auf einem kleinen Bildschirm mehr Platz benötigen als eine dekorative Musterzeile. Erlaubte Umbrüche, sinnvolle Silbentrennung und flexible Höhen sollten zusammenwirken. Schneide den Text nicht ab, nur damit ein Kartenraster gleichmäßig bleibt.
Berücksichtige außerdem die Situation, in der eine Webschrift noch nicht geladen ist. Die Ersatzschrift muss die Inhalte benutzbar halten. Stark unterschiedliche Zeichenbreiten können Zeilenumbrüche verschieben und die Seite während des Lesens verändern. Prüfe deshalb auch einen langsamen Seitenaufruf und nicht ausschließlich den fertig geladenen Entwurf.
Eine abschließende Leseprobe umfasst mehr als den ersten Bildschirm. Lies mehrere Abschnitte, öffne einen Textlink und kehre zurück. Dabei zeigt sich, ob Überschriften, Absatzabstände und Linkgestaltung eine verlässliche Orientierung bieten. Typografische Qualität ist hier eine Eigenschaft des gesamten Leseablaufs.
Die räumliche Zuordnung von Inhalten vertieft der Beitrag über Abstände und visuelle Gruppen. Wenn Text trotz passender Größe schwer erkennbar bleibt, prüfe zusätzlich den Farbkontrast.
