CSS INTENSIVSTATION

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.

Zeilenabstand

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

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

Syntax

p { line-height: 1.6;}

Werte – Einheitenlos vs. mit Einheit

  • EinheitenlosEmpfohlen: line-height: 1.5; – multipliziert mit der Schriftgrösse
  • em / remRelativ: line-height: 1.5em; – basierend auf Schriftgrösse
  • pxAbsolut: line-height: 24px; – feste Pixelgrösse
  • %Prozentual: line-height: 150%; – Prozent der Schriftgrösse
  • normalBrowser-Standard (meist ca. 1.2)

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.

✅ Mit einheitenlosem Wert (empfohlen)

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

❌ Mit Pixelwert (problematisch)

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: 30px;  /* Pixelwert wird vererbt */
}
.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. Pixelwerte können zu unlesbarem Text führen, wenn die Schriftgrösse wächst.

line-height in der Praxis

line-height für 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.

line-height: 2.0 (zu locker)
Der schnelle braune Fuchs springt über den faulen Hund. Diese Zeile ist zu weit gesetzt. Der Zusammenhang zwischen den Zeilen geht verloren.

Empfehlung für Fliesstext

  • line-height: 1.5 bis 1.6 – ideal für die meisten Texte
  • line-height: 1.6 bis 1.8 – für längere Texte oder kleinere Schriften
  • line-height: 1.4 bis 1.5 – für grössere Schriften

line-height für Überschriften

Mehrzeilige Überschrift
Zweite Zeile sitzt sehr eng 

line-height: 1.1;

Mehrzeilige Überschrift
Zweite Zeile hat guten Abstand 

line-height: 1.3;

Mehrzeilige Überschrift
Zweite Zeile sitzt zu locker 

line-height: 1.8;

Empfehlung für Überschriften

  • line-height: 1.1 bis 1.2 – für grosse Display-Überschriften
  • line-height: 1.2 bis 1.3 – für normale Überschriften
  • line-height: 1.3 bis 1.4 – für mehrzeilige Überschriften

Vertikale Zentrierung mit line-height

line-height kann für die vertikale Zentrierung einzeiliger Texte verwendet werden:

Vertikal zentrierter Text 
.button {
  height: 60px;
  line-height: 60px;  /* Gleiche Höhe = zentriert */
}

Achtung: Diese Methode funktioniert nur bei einzeiligem Text. Für mehrzeilige Inhalte wird Flexbox oder Grid verwendet.

Responsive line-height mit clamp()

clamp() ist eine moderne CSS-Funktion, die einen Wert zwischen einem Minimum und einem Maximum begrenzt. Sie eignet sich gut für responsive Typografie.

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

Wie funktioniert clamp()?

clamp(MIN, PREFERRED, MAX) besteht aus drei Werten:

  • MIN: 1.4 – Kleinster erlaubter Wert
  • PREFERRED: 1.2 + 0.5vw – Flexibler, bevorzugter Wert
  • MAX: 1.8 – Grösster erlaubter Wert

Was passiert dabei?

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.

So entsteht eine flüssige Anpassung ohne Media Queries. Die line-height bleibt dabei immer in einem definierten, lesbaren Bereich.

Kurz gesagt

  • line-height bestimmt den Zeilenabstand – wichtigste Eigenschaft für Lesbarkeit
  • Einheitenlose Werte (z.B. 1.5) sind besser als Pixel oder em – sie vererben den Faktor, nicht den berechneten Wert
  • Fliesstext: line-height: 1.5 bis 1.6 ist optimal
  • Überschriften: line-height: 1.1 bis 1.3 je nach Grösse

Font Themen Font Basics | Font Styling | Font Size | Text Umbruch