Zeilenhöhe

Die Eigenschaft line-height legt die Höhe jeder Textzeile fest und damit auch den Abstand zwischen den Zeilen. Längerer Text lässt sich leichter lesen, wenn die Zeilen nicht zu dicht beieinander stehen.

Am besten schreibst du sie als Zahl ohne Einheit. Sie bedeutet ein Vielfaches der Schriftgröße des Elements:

p {
	font-size: 20px;
	line-height: 1.5;
}

Hier ist jede Zeile 1,5 × 20 = 30 Pixel hoch. Der Platz, den die Buchstaben nicht brauchen, wird gleichmäßig über und unter dem Text aufgeteilt, der Text sitzt also in der Mitte seiner Zeile.

Standardmäßig verwenden Browser line-height: normal, je nach Schrift etwa 1.2. Für Absätze sind Werte zwischen 1.4 und 1.8 leichter zu lesen. Vergleiche line-height: 1 und line-height: 1.8:

Die Hauskatze schläft 12 bis 16 Stunden am Tag. Am aktivsten ist sie abends und früh am Morgen, wenn sie gern jagt und spielt.

Die Hauskatze schläft 12 bis 16 Stunden am Tag. Am aktivsten ist sie abends und früh am Morgen, wenn sie gern jagt und spielt.

Wir könnten auch line-height: 30px schreiben, aber eine Zahl ohne Einheit ist besser, weil sie mit der Schriftgröße wächst. Würden wir die Schriftgröße später auf 30 Pixel ändern, würde die Zeilenhöhe 45 Pixel betragen, während 30px bei 30 Pixeln bliebe und die Zeilen gedrängt wären.