The Universal Web

2.4 Zeilenabstand

Durchschuss für das Lesen am Bildschirm: einheitenloses CSS line-height, die WCAG-1.4.12-Anforderung, 1,5 zu tolerieren, und warum der richtige Wert von der Zeilenlänge abhängt.

6 min read

Diese Seite wurde mit AI-Unterstützung übersetzt. Das englische Original ist maßgeblich.

Der Raum zwischen Textzeilen — im Druck der Durchschuss, in CSS die line-height — gehört zu den folgenreichsten Einstellungen der Bildschirmtypografie. Seine Aufgabe ist navigatorisch: Genug Weißraum zwischen den Zeilen lässt das Auge eine Zeile abschließen, den langen Rücksprung zum linken Rand ausführen und auf der richtigen nächsten Zeile landen, statt die aktuelle erneut zu lesen oder vorauszuspringen. Die Ausgabe von 2005 empfahl rund 140 % der Schriftgröße und merkte an, dass die Browser-Standards von 100–120 % zu eng seien, besonders für sehbehinderte Leserinnen und Leser. Diese Empfehlung ist gut gealtert; wenn überhaupt, sind Praxis und Standards leicht über sie hinausgegangen.

Was sich seit 2005 geändert hat

Der ursprüngliche Wert von etwa 1,4 war seiner Zeit voraus und liegt heute am konservativen Ende der gängigen Praxis. Fließtext auf gut gesetzten Seiten läuft 2026 typischerweise zwischen 1,4 und 1,6, und die Untergrenze der Barrierefreiheit ist formalisiert worden: Das WCAG-Erfolgskriterium 1.4.12 Text Spacing (Level AA) verlangt, dass Inhalte einen vom Nutzer angewandten Zeilenabstand vom 1,5-Fachen der Schriftgröße ohne Verlust von Inhalt oder Funktionalität überstehen, und das ältere Kriterium 1.4.8 Visual Presentation (Level AAA) fordert innerhalb von Absätzen von vornherein einen Zeilenabstand von mindestens 1,5. Die praktische Lesart: 1,5 ist kein Wunschziel, sondern der Wert, den Ihr Layout mindestens tolerieren muss — und für die meisten Fließtext-Situationen ist er schlicht ein guter Standard.

Drei Absätze aus Platzhalterzeilen mit line-height 1,2, 1,5 und 2,0 — enge Zeilen drängen sich, 1,5 ist der Fließtext-Standard, 2,0 driftet auseinander.

Die zweite Veränderung betrifft die Art der Angabe. 2005 setzten Gestalter den Durchschuss in Pixeln oder Prozenten. Die moderne CSS-Praxis ist eindeutig: einheitenlose Werte verwenden (line-height: 1.5, nicht 24px oder 150%). Der Unterschied liegt in der Vererbung. Ein einheitenloser Wert wird als Verhältnis vererbt und für die eigene Schriftgröße jedes Elements neu berechnet; ein Pixel- oder Prozentwert wird einmal berechnet und als feste Länge vererbt. Setzen Sie line-height: 24px auf den Seitenkörper, und eine verschachtelte Überschrift in 32px rendert mit überlappenden Zeilen. Einheitenlose line-height lässt die gesamte Kaskade korrekt skalieren — und das ist auch, was Layouts intakt hält, wenn Nutzer den Text vergrößern.

Drittens haben sich die Layouts selbst verändert. Textcontainer mit fester Höhe waren 2005 verbreitet und sind das Hauptopfer der 1.4.12-Anforderung: Eine Box, die exakt auf drei Textzeilen bei line-height 1,3 bemessen ist, schneidet ihren Inhalt ab, wenn ein Leser auf 1,5 überschreibt. Container, die Text enthalten, sollten sich nach ihrem Inhalt bemessen — mit min-height, wo ein Minimum nötig ist, nie mit fester Höhe.

Durchschuss und Satzbreite sind eine Entscheidung

Die wichtigste Verfeinerung des ursprünglichen Kapitels ist, dass der Zeilenabstand nicht isoliert gewählt werden kann. Durchschuss und Zeilenlänge (Satzbreite) sind voneinander abhängig, und der Mechanismus ist der Rücksprung. Auf einer kurzen Zeile ist der Rücksprung des Auges nach links ein kurzer Hüpfer und Fehllandungen sind selten, sodass ein engerer Durchschuss tolerierbar ist. Auf einer langen Zeile ist der Rücksprung lang und unpräzise; ein großzügiger Durchschuss gibt dem Auge eine breitere "Landebahn" und macht das Doppeln — das erneute Lesen derselben Zeile — deutlich unwahrscheinlicher. Das ist ein langjähriger Befund der Leserlichkeitsforschung, von den Druckstudien an beobachtet: Der akzeptable Durchschuss steigt mit der Satzbreite.

In der Praxis: Eine Randnotiz mit 45 Zeichen liest sich bequem bei 1,4; eine Artikelspalte mit 75 Zeichen verlangt 1,6 oder mehr. Wenn ein Layout lange Zeilen erzwingt, kompensieren Sie mit Durchschuss. Besser noch: Begrenzen Sie die Satzbreite (das Thema des nächsten Kapitels), damit der Durchschuss im bequemen Mittelbereich bleiben kann.

Die im Original angemerkte Variabilität der Schriften gilt weiterhin. Die line-height wird aus der Schriftgröße berechnet, aber was der Leser wahrnimmt, ist der weiße Kanal zwischen der visuellen Masse einer Zeile und der nächsten — und der hängt von x-Höhe, Länge der Ober- und Unterlängen und Strichstärke ab. Eine Schrift mit großer x-Höhe wie Verdana füllt ihr Geviert voller aus und wirkt bei gegebener line-height enger als eine Schrift mit kleiner x-Höhe in derselben Einstellung. Dunkle, fette oder schmale Schriften verlangen ebenfalls mehr Luft. Beurteilen Sie den Durchschuss, indem Sie gesetzte Absätze betrachten, nicht indem Sie einer Zahl vertrauen.

Überschriften sind anders

Die Empfehlung von 1,4–1,6 gilt für durchgehenden Fließtext. Überschriften folgen der umgekehrten Logik: In großen Graden hinterlässt ein proportionaler Zeilenabstand riesige Lücken zwischen umbrochenen Zeilen und trennt die Überschrift visuell von sich selbst. Mehrzeilige Überschriften lesen sich am besten eng — typischerweise 1,1 bis 1,25, bei sehr großen Display-Einstellungen gegen 1,0. Weil einheitenlose line-height als Verhältnis vererbt wird, sollten Überschriftenstile ihre engeren Werte explizit setzen, statt den Fließtext-Durchschuss zu erben. Die Abstandsanforderungen der WCAG betreffen Textblöcke, nicht Display-Headlines, aber auch Überschriften dürfen nicht abgeschnitten werden, wenn Nutzer Überschreibungen anwenden — ein weiterer Grund, Hero-Container mit fester Höhe zu meiden.

Zwei kleinere Anmerkungen. Erstens schaden Extreme in beide Richtungen: Die Warnung des Originals vor übertriebenem Durchschuss steht, denn Zeilen, die in zu viel Weißraum schwimmen, erschweren die Suche nach der nächsten Zeile und fragmentieren den Absatz als Einheit — jenseits von etwa 2,0 beginnt Fließtext zu zerfallen. Zweitens sind auch Interfaces Text: Buttons, Formularbeschriftungen und Navigation brauchen eine line-height, die vernünftig genug ist, Umbrüche und Nutzer-Überschreibungen zu überstehen, und die verbreitete Gewohnheit, einzeilige UI-Texte mit Tricks zu zentrieren, die davon ausgehen, dass sie nie umbrechen, ist ein wiederkehrender 1.4.12-Fehler.

In CSS

body { line-height: 1.5; }      /* unitless — scales with size */
h1, h2 { line-height: 1.15; }   /* display sizes want less */
figcaption { line-height: 1.4; }

/* Longer measures need more leading: */
.wide-column { line-height: 1.6; }

Empfehlungen

  • Setzen Sie Fließtext standardmäßig mit einem Zeilenabstand von 1,5; passen Sie innerhalb von etwa 1,4–1,7 nach Schrift und Satzbreite an.
  • Verwenden Sie stets einheitenlose line-height-Werte, damit das Verhältnis vererbt wird und korrekt skaliert.
  • Erhöhen Sie den Durchschuss mit wachsender Zeilenlänge; lange Satzbreiten brauchen mehr Luft für den Rücksprung.
  • Verengen Sie Überschriften auf etwa 1,1–1,25, explizit in den Überschriftenstilen gesetzt.
  • Fixieren Sie nie die Höhe von Containern, die Text enthalten; lassen Sie den Inhalt die Höhe bestimmen, mit min-height, wo nötig.
  • Testen Sie mit einer Textabstands-Überschreibung (Zeilenabstand 1,5, gemäß WCAG 1.4.12) und bei 200 % Zoom, um sicherzustellen, dass nichts abgeschnitten wird oder überlappt.
  • Bewerten Sie den Durchschuss visuell pro Schrift — x-Höhe und Strichstärke verändern, wie dieselbe Zahl wirkt.

Weiterführende Literatur