line-height

Zuletzt aktualisiert am 15. Februar 2026

line-height bestimmt die Höhe einer Textzeile und damit den vertikalen Abstand zwischen den Zeilen. Die Eigenschaft beeinflusst die Lesbarkeit von Text maßgeblich: Zu enge Zeilen sind schwer zu lesen, zu weite lassen den Text auseinanderfallen. Der empfohlene Wert für Fließtext liegt bei 1.5 bis 1.7, für Überschriften bei 1.1 bis 1.3. Der beste Weg ist ein einheitenloser Wert (ohne px oder em), weil dieser als Multiplikator auf die jeweilige font-size wirkt und sich korrekt vererbt.

Grundlagen

line-height definiert die Zeilenhöhe, also die Gesamthöhe einer Textzeile inklusive des Abstands darüber und darunter. Der sichtbare “Zeilenabstand” (Leading) ergibt sich aus der Differenz zwischen line-height und font-size, gleichmäßig aufgeteilt auf oben und unten. Bei font-size: 16px und line-height: 24px ergibt das 4px oben und 4px unten.

Der einheitenlose Wert ist die empfohlene Schreibweise. line-height: 1.5 bedeutet: Die Zeilenhöhe ist das 1,5-fache der aktuellen font-size. Der entscheidende Vorteil gegenüber Einheiten: Bei der Vererbung wird der Multiplikator weitergegeben, nicht der berechnete Wert. Ein <h1> mit font-size: 32px in einem Container mit line-height: 1.5 bekommt 48px Zeilenhöhe. Bei line-height: 24px (als fester Wert) würde der <h1> nur 24px bekommen, was bei 32px Schriftgröße dazu führt, dass die Zeilen sich überlappen.

Für Fließtext empfehlen sich Werte zwischen 1.5 und 1.7. Für Überschriften reichen 1.1 bis 1.3, weil große Schrift visuell mehr Abstand hat. Buttons und einzeilige Elemente nutzen line-height oft zur vertikalen Zentrierung: Wenn line-height gleich der Höhe des Elements ist, wird der Text vertikal zentriert.

Syntax & Werte

Beispiele

Unitless vs. feste Einheiten

Der entscheidende Unterschied: Unitless-Werte vererben den Multiplikator, feste Werte den berechneten Wert. Bei verschachtelten Elementen mit unterschiedlichen Schriftgrößen ist das der Unterschied zwischen lesbarem und überlappenden Text.

/* Empfohlen: Multiplikator wird vererbt */
body { line-height: 1.5; }
/* h1 mit 32px → 48px Zeilenhöhe */

/* Nicht empfohlen: fester Wert wird vererbt */
body { line-height: 24px; }
/* h1 mit 32px → 24px Zeilenhöhe (Überlappung!) */

<div class="lh-compare">
<div class="lh-unitless">
  <div class="label">line-height: 1.5 (unitless)</div>
  <p>Fließtext bei 14px: 21px Zeilenhöhe</p>
  <h4>Überschrift bei 22px: 33px</h4>
</div>
<div class="lh-fixed">
  <div class="label">line-height: 21px (fixed)</div>
  <p>Fließtext bei 14px: 21px Zeilenhöhe</p>
  <h4>Überschrift bei 22px: immer noch 21px!</h4>
</div>
</div>

Optimale Zeilenhöhe für Lesetexte

Für längere Texte liegt die optimale Zeilenhöhe bei 1.5 bis 1.7. Kürzere Zeilen (schmale Spalten) brauchen mehr Zeilenabstand, breitere Zeilen weniger.

/* Fließtext */
p { line-height: 1.6; }

/* Überschriften brauchen weniger */
h1, h2, h3 { line-height: 1.2; }

/* Schmale Spalten brauchen mehr */
.sidebar p { line-height: 1.8; }

<div class="reading-demo">
<div class="r-tight"><div class="label">line-height: 1.2 (zu eng für Fließtext)</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="r-normal"><div class="label">line-height: 1.5 (gut für Fließtext)</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<div class="r-loose"><div class="label">line-height: 1.8 (luftig, gut für schmale Spalten)</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>

Vertikale Zentrierung mit line-height

Für einzeilige Elemente wie Buttons oder Badges kannst du line-height gleich der Höhe des Elements setzen, um den Text vertikal zu zentrieren.

.button {
  height: 40px;
  line-height: 40px; /* = height → vertikal zentriert */
  padding: 0 20px;
}

/* Moderne Alternative: Flexbox */
.button-modern {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
}

<div class="center-demo">
<a href="#" class="btn">Button</a>
<span class="badge">Badge</span>
</div>

Überschriften mit engem Zeilenabstand

Große Überschriften brauchen weniger Zeilenabstand als Fließtext, weil die großen Buchstaben visuell bereits viel Platz einnehmen. Werte zwischen 1.1 und 1.3 funktionieren gut.

h1 { line-height: 1.1; }  /* Sehr große Überschriften */
h2 { line-height: 1.2; }  /* Mittlere Überschriften */
h3 { line-height: 1.25; } /* Kleinere Überschriften */
p  { line-height: 1.6; }  /* Fließtext */

<div class="heading-demo">
<div><div class="label">line-height: normal (ca. 1.2)</div><h3 class="h-default">Eine Überschrift die über zwei Zeilen geht</h3></div>
<div><div class="label">line-height: 1.1 (sehr eng)</div><h3 class="h-tight">Eine Überschrift die über zwei Zeilen geht</h3></div>
<div><div class="label">line-height: 1.25 (optimal)</div><h3 class="h-good">Eine Überschrift die über zwei Zeilen geht</h3></div>
</div>

Barrierefreiheit

Die WCAG-Richtlinie 1.4.12 fordert, dass Nutzer den Zeilenabstand auf mindestens das 1,5-fache der Schriftgröße erhöhen können, ohne dass Inhalte verloren gehen. Verwende keine feste Höhe auf Text-Containern, die bei erhöhtem Zeilenabstand den Text abschneiden würden. Setze stattdessen min-height statt height und stelle sicher, dass overflow: hidden nicht Text versteckt.

Für Menschen mit Legasthenie oder Sehbeeinträchtigungen ist ein großzügiger Zeilenabstand (1.5 bis 1.8) besonders wichtig. Enge Zeilen erschweren es, den Anfang der nächsten Zeile zu finden. Für barrierefreie Texte ist line-height: 1.5 das absolute Minimum, besser sind 1.6 oder 1.7.

Verwende einheitenlose Werte, damit die Zeilenhöhe korrekt skaliert, wenn Nutzer die Schriftgröße über die Browser-Einstellungen vergrößern. Feste Werte in px skalieren nicht mit und führen bei vergrößerter Schrift zu überlappenden Zeilen.

Häufige Fehler

• Feste Werte statt unitless verwenden: line-height: 24px wird als 24px an alle Kindelemente vererbt. Bei einem <h1> mit 32px Schriftgröße überlappen die Zeilen. line-height: 1.5 vererbt den Multiplikator und berechnet für jedes Element den passenden Wert.
• Prozent statt unitless verwenden: line-height: 150% klingt wie line-height: 1.5, verhält sich aber bei der Vererbung wie ein fester Wert. Der berechnete Wert (z.B. 24px) wird vererbt, nicht der Multiplikator.
• Zu enge Zeilenhöhe für Fließtext: line-height: 1.2 ist für Überschriften in Ordnung, für Fließtext aber zu eng. Verwende mindestens 1.5 für Lesetext.
• line-height: 0 für Platzersparnis: line-height: 0 lässt Zeilen überlappen und macht Text unlesbar. Der Wert wird auch an Kindelemente vererbt.
• height und line-height für mehrzeiligen Text: Vertikale Zentrierung mit line-height funktioniert nur bei einzeiligem Text. Bei mehrzeiligen Elementen verwende display: flex mit align-items: center.
• line-height ignorieren: Der Browser-Standard normal (ca. 1.2) ist für die meisten Schriften zu eng für Fließtext. Setze immer eine explizite line-height auf body.

Browser-Kompatibilität

line-height wird von allen Browsern vollständig unterstützt. Die Eigenschaft gehört zu den ältesten CSS-Eigenschaften und funktioniert in allen Browsern identisch.

Email-Kompatibilität

line-height funktioniert in den meisten Email-Clients. In Outlook kann die Darstellung je nach Word-Rendering-Engine abweichen.

Verwandte Eigenschaften