line-height

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.

Steckbrief line-height

Syntax: line-height: normal | <number> | <length> | <percentage>
Initialwert: normal (ca. 1.2, browserabhängig)
Vererbt: Ja
Animierbar: Ja

Kategorie: Typografie
Werte: 5
Beispiele: 7
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 15.02.2026

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

5 Werte

Wert	Beschreibung	Beispiel
`normal`	Browserabhängig, typischerweise ca. 1.2. Die genaue Berechnung hängt von der Schrift ab.	line-height: normal
`<number>`	Einheitenloser Multiplikator der font-size. Empfohlene Schreibweise.	line-height: 1.5
`<length>`	Fester Wert in px, rem, em etc. Wird als fixer Wert vererbt.	line-height: 24px
`<percentage>`	Prozent der font-size. Wird als berechneter Wert vererbt (nicht empfohlen).	line-height: 150%
`inherit`	Erbt den Wert explizit vom Elternelement.	line-height: inherit

Beispiele

7 Beispiele

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.

Unitless vs. feste Werte bei Vererbung

/* 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>

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.

Verschiedene Zeilenhöhen im Vergleich

/* 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>

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.

Vertikale Zentrierung mit line-height

.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>

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.

Überschriften mit engem Zeilenabstand

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

6 Fehler

01 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.

02 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.

03 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.

04 line-height: 0 für Platzersparnis

line-height: 0 lässt Zeilen überlappen und macht Text unlesbar. Der Wert wird auch an Kindelemente vererbt.

05 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.

06 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

4 von 5

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

Apple Mail

Komplett
Gmail

Komplett
Outlook

Teilweise

Unitless-Werte und Prozent funktionieren. Feste px-Werte können abweichen. mso-line-height-rule: exactly kann helfen
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da