Zeilenabstand-Rechner: Den perfekten Zeilenabstand für jede Schriftgröße finden

Zeilenhöhe ist eine der wirkungsvollsten — und am häufigsten übersehenen — typografischen Entscheidungen, die du treffen wirst. Zu eng und der Text wirkt klaustrophobisch. Zu weit und das Auge verliert zwischen den Zeilen den Faden. Der richtige Wert macht den Unterschied zwischen einem Text, der einlädt, und einem, dem man nur schwer folgen kann.

Der Tooladex Line Height Calculator hilft dir, den richtigen Wert für jede Schriftgröße zu finden und ihn in der gewünschten CSS-Einheit zu erhalten — als einheitenloses Verhältnis, px, em oder rem.

Was ist Zeilenhöhe (und was ist Durchschuss)?

Zeilenhöhe ist der vertikale Abstand von einer Grundlinie zur nächsten — die Gesamthöhe, die jeder Textzeile zugewiesen wird. Im Drucksatz wird dasselbe Konzept als Durchschuss bezeichnet, benannt nach den Bleistreifen, die Setzer zwischen die Reihen aus Metalltype platzierten.

In CSS steuert die Eigenschaft line-height dies direkt. Ein Wert von 1.5 bei einer 16px-Schrift bedeutet, dass jede Zeile 24px vertikalen Raum einnimmt.

Einheitenlos, px, em oder rem — was sollte man verwenden?

CSS bietet mehrere Möglichkeiten, die Zeilenhöhe anzugeben:

Das einheitenlose Verhältnis ist fast immer die richtige Wahl für Fließtext und Überschriften. Ein fester Pixelwert funktioniert nicht mehr, wenn ein übergeordneter Stil oder eine Benutzereinstellung die Schriftgröße ändert — der Text könnte sich überlappen. Ein einheitenloser Wert wird vererbt und skaliert problemlos.

WCAG 1.4.12: die Barrierefreiheits-Untergrenze

Die Web Content Accessibility Guidelines (WCAG) Success Criterion 1.4.12 (Textabstand, Level AA) schreiben vor, dass Benutzer die Zeilenhöhe von Fließtext auf mindestens das 1,5-fache der Schriftgröße setzen können müssen, ohne dass Inhalte oder Funktionen verloren gehen.

In der Praxis ist der einfachste Ansatz, bei Fließtext mit 1.5 oder höher zu beginnen — damit erfüllst du die Anforderungen von vornherein und gibst deinen Inhalten den nötigen Freiraum.

Empfohlene Zeilenhöhe nach Anwendungsfall

Dies sind Ausgangspunkte. Teste immer mit echten Inhalten bei deiner Zielspaltenbreite — schmale Spalten benötigen oft ein etwas höheres Verhältnis.

So verwendest du den Calculator

1. Gib deine Schriftgröße in Pixel ein (z. B. 16 für Fließtext, 32 für ein H1).
2. Ziehe den Verhältnis-Slider oder wähle eine Voreinstellung (Eng → Weit).
3. Lies die Ausgaben — du erhältst das Verhältnis, den Pixelwert, em, rem und eine kopierfertige CSS-Deklaration.
4. Prüfe das WCAG-Badge — das Tool zeigt an, ob dein Verhältnis WCAG 1.4.12 für Fließtext erfüllt.
5. Vorschau — sieh den Live-Textblock sofort neu umbrechen, während du die Werte anpasst.

/* Fließtext — WCAG-konform, einheitenlos (empfohlen) */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Überschrift — engerer Durchschuss */
h1 {
  font-size: 2rem;
  line-height: 1.2;
}

/* Kleingedrucktes */
figcaption {
  font-size: 0.875rem;
  line-height: 1.6;
}