line-height

Die Lesbarkeit von Text wird massgeblich durch Abstände beeinflusst. Der Abstand zwischen Zeilen bestimmt, wie angenehm und schnell Text gelesen werden kann.

line-height legt den vertikalen Abstand zwischen Textzeilen fest. Diese Eigenschaft ist zentral für die Lesbarkeit von Text.

p { line-height: 1.6;}

Werte – mit und ohne Einheit

Technisch beeinflusst line-height die Höhe der Zeilenbox eines Inline-Elements und damit den vertikalen Rhythmus im Layout.

EinheitenlosEmpfohlen: line-height: 1.5; – Faktor der jeweiligen Schriftgrösse
emRelativ zur Schriftgrösse des Elements: line-height: 1.5em;
remRelativ zur Schriftgrösse des Root-Elements: line-height: 1.5rem;
%Relativ zur Schriftgrösse des Elements: line-height: 150%;
pxAbsoluter Wert: line-height: 24px;
normalAbhängig von Schrift und Browser, häufig ungefähr 1.2

em, rem und % sind ebenfalls relative Werte. Bei der Vererbung wird jedoch ihre berechnete Zeilenhöhe weitergegeben. Ein einheitenloser Wert vererbt stattdessen den Faktor und wird für jede Schriftgrösse neu berechnet.

Warum einheitenlos besser ist

Der wichtigste Unterschied: Bei einheitenlosen Werten erben Kindelemente den Faktor, nicht den berechneten Wert. Das bedeutet: Die line-height skaliert automatisch mit jeder Schriftgrösse.

Einheitenlos

Parent-Element (font-size: 20px)

Kind-Element (font-size: 30px) – Die line-height passt sich automatisch an und der Text hat genug Luft zum Atmen!

.parent {
  font-size: 20px;
  line-height: 1.5;  /* Faktor wird vererbt */
}
.child {
  font-size: 30px;  /* Erbt line-height: 1.5 */
}

Wert mit Einheit

Auch relative Werte mit einer Einheit werden vor der Vererbung berechnet.

Parent-Element (font-size: 20px)

Kind-Element (font-size: 30px) – Die line-height bleibt fix bei 30px und der Text wird gequetscht!

.parent {
  font-size: 20px;
  line-height: 1.5em;  /* Wird zu 30px berechnet */
}
.child {
  font-size: 30px;  /* Erbt line-height: 30px – zu eng! */
}

Fazit: Einheitenlose Werte (z.B. 1.5) sind flexibler und funktionieren bei jeder Schriftgrösse.

Beispiele

Fliesstext

line-height: 1.0 (zu eng)
Der schnelle braune Fuchs springt über den faulen Hund. Diese Zeile ist viel zu eng gesetzt und wirkt bedrängend. Die Lesbarkeit leidet stark darunter.

line-height: 1.5 (optimal)
Der schnelle braune Fuchs springt über den faulen Hund. Diese Zeile hat einen angenehmen Abstand. Die Lesbarkeit ist optimal für längere Texte.

Empfehlung für Fliesstext

Für Fliesstext eignet sich häufig eine line-height zwischen 1.5 und 1.7. Der passende Wert hängt von der Schrift, der Schriftgrösse und der Zeilenbreite ab.

Überschriften

Mehrzeilige Überschrift
Zweite Zeile hat guten Abstand

line-height: 1.3;

Empfehlung für Überschriften

Für Überschriften eignet sich häufig eine line-height zwischen 1.1 und 1.3. Der passende Wert hängt von der Schrift, der Schriftgrösse und der Anzahl Zeilen ab.

line-height mit clamp()

Mit clamp() kann die Zeilenhöhe flexibel begrenzt werden. Für die Berechnung werden relative Einheiten verwendet.

p {
  line-height: clamp(1.4em, 1.2em + 0.5vw, 1.8em);
}

Auf kleinen Bildschirmen bleibt die line-height beim Minimalwert. Mit wachsender Bildschirmbreite steigt der bevorzugte Wert langsam an. Sobald das Maximum erreicht ist, wächst der Wert nicht weiter.

MIN: 1.4em – kleinster erlaubter Wert
PREFERRED: 1.2em + 0.5vw – flexibler, bevorzugter Wert
MAX: 1.8em – grösster erlaubter Wert

Die Logik

Bei einer Schriftgrösse von 16px und einer Viewport-Breite von 800px:

Browser berechnet 1.4em → ergibt 22.4px
Browser berechnet 1.2em + 0.5vw → 19.2px + 4px → ergibt 23.2px
Browser berechnet 1.8em → ergibt 28.8px
Browser prüft: Ist 23.2px kleiner als 22.4px? Nein.
Browser prüft: Ist 23.2px grösser als 28.8px? Nein.
→ 23.2px liegt zwischen 22.4px und 28.8px → also wird 23.2px verwendet.

So entsteht eine flüssige Anpassung ohne Media Queries. Die line-height bleibt dabei immer in einem definierten, lesbaren Bereich. Für normalen Text sind einheitenlose Werte jedoch meist die bessere Wahl.

Kurz gesagt

line-height bestimmt den Abstand zwischen den Textzeilen
Einheitenlose Werte wie 1.5 sind meist die beste Wahl – sie vererben den Faktor statt der berechneten Zeilenhöhe
Für Fliesstext eignet sich häufig eine line-height zwischen 1.5 und 1.7
Für Überschriften eignet sich häufig eine line-height zwischen 1.1 und 1.3
clamp() kann die Zeilenhöhe innerhalb eines definierten Bereichs flexibel anpassen