Zeilenabstand (UX)

Definition: Der Zeilenabstand (englisch: line spacing, CSS-Eigenschaft: line-height) bezeichnet den vertikalen Abstand zwischen zwei aufeinanderfolgenden Textzeilen — genauer: den Abstand von der Baseline einer Zeile zur Baseline der nächsten Zeile. Er wird im Webdesign typischerweise als unitloser Multiplikator der Schriftgrösse angegeben (z.B. line-height: 1.5, was bei 16px Schriftgrösse einem Zeilenabstand von 24px entspricht). Der Zeilenabstand ist einer der wirkungsvollsten typografischen Parameter: Er beeinflusst Lesbarkeit, kognitive Belastung beim Lesen, wahrgenommene Textkompaktheit und die ästhetische Qualität eines Layouts massgeblich.

Erläuterung

Die wissenschaftliche Auseinandersetzung mit dem Zeilenabstand reicht weit in die Drucktypografie zurück. Robert Bringhurst, kanadischer Typograf und Autor, widmete in „The Elements of Typographic Style" (Hartley & Marks, Vancouver, 1992, 4. Auflage 2012) einen zentralen Abschnitt dem Thema Zeilenabstand und definierte als Grundregel, dass der Zeilenabstand stets grösser als der Wortabstand sein müsse — damit das Auge die Zeilen als horizontale, nicht als vertikale Einheiten wahrnimmt. Walter Tracy, britischer Schriftgestalter und Autor, ergänzte in „Letters of Credit: A View of Type Design" (Gordon Fraser, London, 1986), dass der optimale Zeilenabstand von der Schriftart, der Zeilenlänge und dem Lesekontext abhänge. Im digitalen Kontext untersuchte Aries Arditi, Forscher am Lighthouse International (New York), in einer 2005 in „Optics and Photonics News" publizierten Studie, wie Zeilenabstand die Lesbarkeit bei sehschwachen Nutzern beeinflusst — mit dem Ergebnis, dass erhöhte Zeilenabstände die Lesegeschwindigkeit dieser Gruppe signifikant verbessern. Das W3C (World Wide Web Consortium) kodifizierte die Bedeutung des Zeilenabstands im Erfolgskriterium 1.4.12 der WCAG 2.1 (Web Content Accessibility Guidelines, 2018): Texte müssen so implementiert sein, dass Nutzer Zeilenabstände auf mindestens das 1,5-Fache der Schriftgrösse erhöhen können, ohne Inhalt oder Funktionalität zu verlieren. Dies schützt insbesondere dyslexische Nutzer, die von grösserem Zeilenabstand profitieren — Forschungen des British Dyslexia Association-Programms (2018) zeigten, dass vergrösserter Zeilenabstand die Lesbarkeit für Menschen mit Dyslexie um bis zu 30 % verbessern kann. Im Web-Kontext bestimmt line-height nicht nur den sichtbaren Abstand zwischen Zeilen, sondern auch die Gesamthöhe einer Textzeile im Box-Model des Browsers — ein technisches Detail mit direktem Einfluss auf vertikale Abstände und das Layout-Rendering.

Optimale Werte und Empfehlungen

• Körpertext (16px–18px): Für Fliesstext in Artikeln, Blogposts und langen Texten empfehlen führende Typografen und Usability-Experten einen Zeilenabstand von 1.4 bis 1.6. Die WCAG 2.1 setzt 1.5 als Mindest-Anpassungswert; Google Material Design 3 (2022) definiert für Body Text einen Standard-line-height von 1.5 (24px bei 16px Schriftgrösse). Apple Human Interface Guidelines empfehlen für iOS-Lesetexte ebenfalls Werte zwischen 1.4 und 1.6. Ein Wert unter 1.2 bei längeren Texten gilt als kritisch für die Lesbarkeit.
• Headlines und kurze Textelemente: Für H1–H3 und andere kurze, grossformatige Textelemente sind kleinere Zeilenabstände angemessen (1.1–1.3), da die höhere Schriftgrösse bereits ausreichend visuellen Rhythmus schafft und zu grosser Zeilenabstand bei wenigen Wörtern die visuelle Einheit auflöst. Sehr grosse Display-Schriften (ab 48px) kommen oft mit Zeilenabständen unter 1.1 aus.
• Einfluss der Zeilenlänge: Robert Bringhurst formulierte eine Grundregel: Längere Zeilen benötigen grössere Zeilenabstände, damit das Auge den Rückweg zum nächsten Zeilenbeginn findet. Bei langen Zeilen (über 80 Zeichen) ist ein Zeilenabstand von 1.6–1.8 empfehlenswert; bei kurzen Spalten (unter 40 Zeichen) kann 1.3 ausreichend sein. Zeilenlänge und Zeilenabstand müssen daher aufeinander abgestimmt werden.
• Schriftart und x-Höhe: Schriften mit hoher x-Höhe (das Verhältnis der Kleinbuchstabenhöhe zur Grossbuchstabenhöhe) — z.B. Roboto, Inter oder Open Sans — wirken bei gleichem Zeilenabstand kompakter als Schriften mit niedriger x-Höhe wie Garamond oder Georgia. Schriften mit hoher x-Höhe profitieren tendenziell von grösserem Zeilenabstand (1.5–1.6) im Vergleich zu Schriften mit niedriger x-Höhe (1.3–1.5).

CSS-Implementierung

• Unitloser Wert (Best Practice): line-height: 1.5 ist die empfohlene CSS-Syntax, da der Wert relativ zur Schriftgrösse des Elements ist und sich automatisch anpasst, wenn die Schriftgrösse geändert wird — auch durch Nutzer-Browsereinstellungen. Ein unitloser Wert verhindert unerwartetes Verhalten bei vererbter Schriftgrösse, das bei fixen Pixel-Werten auftreten kann.
• Pixel-Werte und em: line-height: 24px oder line-height: 1.5em sind alternatif, aber weniger flexibel. Pixel-Werte skalieren nicht mit Nutzer-Schriftgrössen-Einstellungen (Barrierefreiheit!); em-Werte verhalten sich ähnlich wie unitlose Werte, erzeugen aber bei Vererbung andere Resultate. Der W3C empfiehlt explizit unitlose line-height-Werte für barrierefreie Implementierungen.
• Responsive Anpassung: Zeilenabstand kann per CSS Custom Properties und Media Queries responsiv gesteuert werden: Auf kleinen Viewports (Mobile) kann ein leicht verringerter Zeilenabstand (1.4 statt 1.6) die Textkompaktheit auf kleinem Bildschirm verbessern, ohne die Lesbarkeit wesentlich zu beeinträchtigen. Mit clamp() ist auch eine fliessende Skalierung möglich.
• Globale Definition im Design System: Zeilenabstand sollte als Design-Token definiert und global im CSS angewendet werden, nicht inline oder komponentenspezifisch. Typische Praxis: :root { --line-height-body: 1.5; --line-height-heading: 1.2; } und Verwendung dieser Custom Properties in allen Typografie-Definitionen. Dies stellt konsistentes Verhalten über alle Komponenten sicher.

Zeilenabstand und Barrierefreiheit

• WCAG 2.1 Erfolgskriterium 1.4.12 (Text Spacing): Websites müssen so implementiert sein, dass Nutzer per User-Stylesheet Zeilenabstände auf mindestens 1.5-fache Schriftgrösse erhöhen können, ohne Inhalt oder Funktionalität zu verlieren. Layouts, die bei solchen Anpassungen brechen (Text überlappt oder wird abgeschnitten), sind nicht WCAG-2.1-AA-konform. Tools wie das „Text Spacing Bookmarklet" (Developed by Steve Faulkner, The Paciello Group) ermöglichen schnelle Tests.
• Dyslexie und Lesebehinderungen: Nutzer mit Dyslexie profitieren überdurchschnittlich von vergrössertem Zeilenabstand, da engerer Zeilenabstand die Buchstaben-Verwechslung begünstigt. Die British Dyslexia Association empfiehlt in ihrem Style Guide (2018) mindestens 1.5-fachen Zeilenabstand. Speziell für Dyslexie entwickelte Schriften wie OpenDyslexic (2011) setzen auf vergrösserte Zeilenabstände als Standard.
• Sehschwäche und Vergrösserung: Nutzer mit Sehschwäche vergrössern häufig die Browser-Schriftgrösse oder nutzen Zoom. Bei fixen Pixel-Werten für line-height führt eine erhöhte Schriftgrösse zu überlappendem Text, da der Zeilenabstand nicht mitwächst. Unitlose Werte und relatives CSS (rem, em) sind daher barrierefreiheitsrelevant.