Zeilenhöhen-Rechner
Berechnen Sie die optimale Zeilenhöhe für jede Schriftgröße. Werte ohne Einheit, px, em und rem mit Live-Vorschau und WCAG-Empfehlungen.
WCAG empfiehlt mindestens 1,5 für Fließtext.
Voreinstellungen
WCAG 1.4.12 verlangt eine Zeilenhöhe von mindestens 1,5× der Schriftgröße für Fließtext. Ihr aktuelles Verhältnis 1.5 ✓ passes WCAG 1.4.12.
Ergebnisse
Einheitenloses Verhältnis
1.5
Pixel
24px
Em
1.5em
Rem
1.5rem
CSS-Eigenschaft
line-height: 1.5;
Live-Vorschau
Der schnelle braune Fuchs springt über den faulen Hund. Typografie ist wichtig — eine gute Zeilenhöhe macht Text leichter lesbar und zugänglicher für alle Nutzer.
font-size: 16px; line-height: 1.5;
Inhaltsverzeichnis
Was ist Zeilenhöhe?
Die Zeilenhöhe (auch Durchschuss im Druckdesign) ist der vertikale Abstand zwischen Textzeilen, gemessen von einer Grundlinie zur nächsten. Sie hat einen großen Einfluss auf die Lesbarkeit: zu eng und der Text wirkt gedrängt; zu weit und das Auge verliert den Faden.
In CSS akzeptiert die Eigenschaft line-height eine einheitenlose Zahl (z. B. 1,5), einen Pixelwert (24px), einen em- oder rem-Wert (1,5em) oder einen Prozentsatz. Der einheitenlose Wert wird im Allgemeinen bevorzugt, da er automatisch mit der Schriftgröße jedes Elements skaliert.
Wie berechnet man die Zeilenhöhe?
- Wählen Sie Ihre Schriftgröße in Pixel (z. B. 16px für Fließtext).
- Wählen Sie ein Verhältnis — 1,5 ist ein guter Ausgangspunkt für Fließtext, 1,1–1,2 für Überschriften.
- Multiplizieren Sie Schriftgröße × Verhältnis für den Pixelwert (z. B. 16 × 1,5 = 24px).
- Verwenden Sie das einheitenlose Verhältnis direkt in CSS für beste Skalierbarkeit.
- Kopieren Sie das Ergebnis in der Einheit, die zu Ihrem Stylesheet passt.
Best Practices
- Verwenden Sie ein einheitenloses Verhältnis (z. B. 1,5) statt eines festen px-Werts, damit die Zeilenhöhe mit der Schriftgröße skaliert.
- Fließtext: Ziel 1,4–1,6. WCAG 1.4.12 fordert mindestens 1,5 für Barrierefreiheit.
- Überschriften: verwenden Sie ein engeres Verhältnis von 1,1–1,3.
- Kleiner Text (unter 14px): erhöhen Sie das Verhältnis leicht für bessere Lesbarkeit.
- Testen Sie Ihre Zeilenhöhe visuell — echte Absätze zeigen Probleme deutlicher.
Häufig gestellte Fragen
Die meisten Typografen empfehlen 1,4–1,6 für Fließtext. Das WCAG-Erfolgskriterium 1.4.12 schreibt mindestens 1,5× die Schriftgröße vor.
Ein einheitenloses Verhältnis (z. B. 1,5) erbt die Schriftgröße des Elements und skaliert korrekt, wenn diese geändert wird. Ein fester px-Wert passt sich nicht an, was zu überlappenden Zeilen führen kann.
Durchschuss ist ein Druckbegriff für den vertikalen Abstand zwischen Zeilen. In CSS steuert line-height dieselbe Maßeinheit, die standardmäßig ober- und unterhalb jeder Zeile verteilt wird.
Ja. Große Überschriften sehen mit einem engeren Verhältnis (1,1–1,2) besser aus. Fließtext braucht mehr Raum (1,4–1,6), um das Auge über die Zeilen zu führen.