Die Zeilenhöhe – im Web als CSS-Eigenschaft line-height bekannt – entscheidet maßgeblich darüber, ob ein Text angenehm zu lesen ist oder anstrengend wirkt. Zu eng, und die Zeilen kleben zusammen; zu weit, und das Auge verliert beim Sprung in die nächste Zeile den Faden. Dieser Ratgeber erklärt, wie Zeilenhöhe funktioniert und wie du den richtigen Wert findest.
Was ist Zeilenhöhe überhaupt?
Die Zeilenhöhe beschreibt den vertikalen Abstand von einer Textzeile zur nächsten, gemessen von Grundlinie zu Grundlinie. Sie umfasst die Schriftgröße plus den zusätzlichen Raum darüber und darunter. In klassischer Typografie nennt man diesen Zusatzraum Durchschuss. Ist die Schriftgröße 16 Pixel und die Zeilenhöhe 24 Pixel, bleiben 8 Pixel Luft, die sich oberhalb und unterhalb der Zeile verteilen.
Einheitenlos, Pixel oder Prozent?
Im CSS kannst du die Zeilenhöhe auf verschiedene Arten angeben. Am robustesten ist ein einheitenloser Faktor wie line-height: 1.5. Dieser Faktor multipliziert sich mit der jeweiligen Schriftgröße des Elements und vererbt sich sauber an Kindelemente. Absolute Pixelwerte (line-height: 24px) können dagegen Probleme machen, sobald verschachtelte Elemente unterschiedliche Schriftgrößen haben.
Den passenden Pixelwert aus Schriftgröße und Faktor zu bestimmen, geht am schnellsten mit dem Line Height Rechner: Du gibst deine Schriftgröße und den gewünschten Faktor ein und erhältst sofort die resultierende Zeilenhöhe in Pixeln – praktisch, wenn du ein Design aus einem Tool wie Figma in CSS übersetzt.
Welcher Wert ist optimal?
Es gibt keinen einzigen perfekten Wert, aber bewährte Richtwerte:
- Fließtext: 1,4 bis 1,6 – ein Faktor von 1,5 ist der klassische Allrounder für gute Lesbarkeit.
- Große Überschriften: 1,1 bis 1,25 – große Schrift braucht relativ weniger Zeilenabstand, sonst wirkt sie auseinandergerissen.
- Kleine Texte und Captions: bis 1,6 – kleinere Schrift profitiert von etwas mehr Luft.
- Buttons und einzeilige Labels: 1,0 bis 1,2 – hier zählt eher vertikale Zentrierung als Lesefluss.
Die Web Content Accessibility Guidelines (WCAG) empfehlen für Barrierefreiheit eine Zeilenhöhe von mindestens dem 1,5-fachen der Schriftgröße im Fließtext. Das ist ein guter Grund, im Body-Text nicht unter diesen Wert zu gehen.
Der Einfluss von Schriftgröße und Zeilenlänge
Zeilenhöhe lässt sich nicht isoliert betrachten. Sie hängt eng mit der Zeilenlänge zusammen: Lange Zeilen (über 75 Zeichen) brauchen mehr Zeilenabstand, damit das Auge zuverlässig die nächste Zeile findet. Kurze Zeilen kommen mit weniger aus. Auch die Schriftart spielt eine Rolle – Schriften mit großer x-Höhe wirken bei gleichem Faktor enger und vertragen etwas mehr Zeilenhöhe.
Praktischer Workflow
Ein bewährtes Vorgehen: Lege zuerst deine Grundschriftgröße fest (meist 16 bis 18 Pixel für Fließtext), wähle dann einen Faktor um 1,5 und prüfe das Ergebnis im Browser auf echten Texten – nicht an einer einzelnen Zeile. Erst im laufenden Absatz zeigt sich, ob der Rhythmus stimmt. Für eine harmonische Größenstaffelung von Schrift und Abständen hilft dir zusätzlich der Golden Ratio Rechner, mit dem du proportionale Sprünge zwischen den Textgrößen ableitest.
Weitere CSS- und Design-Helfer findest du in der Webtools-Übersicht. Mit dem Line Height Rechner testest du verschiedene Faktoren in Sekunden durch und findest den Zeilenabstand, der deinen Text am besten lesbar macht.