Zeilenhöhe, Buchstabenabstand und Wortabstand

Mit line-height, letter-spacing und word-spacing steuerst du den Abstand zwischen Zeilen, Buchstaben und Wörtern. Das verbessert die Lesbarkeit und hilft beim Gestalten von Überschriften oder hervorgehobenem Text.

Zeilenhöhe (line-height)

line-height legt den vertikalen Abstand zwischen Textzeilen fest. Du kannst einheitenlose Werte (z. B. 1.5), Pixel oder andere Längeneinheiten verwenden.

Enger Abstand (line-height: 1)

Die Zeilen stehen sehr nah beieinander.

1p {
2    line-height: 1;
3}

Normaler Abstand (line-height: 1.5)

Ein gut lesbarer Standardabstand für Fließtext.

1p {
2    line-height: 1.5;
3}

Weiter Abstand (line-height: 2)

Mehr Abstand zwischen den Zeilen – z. B. für Überschriften oder Zitate.

1p {
2    line-height: 2;
3}

Buchstabenabstand (letter-spacing)

letter-spacing vergrößert oder verkleinert den Abstand zwischen einzelnen Buchstaben. Positive Werte weiten den Text, negative Werte drücken ihn zusammen.

Leicht vergrößert (letter-spacing: 2px;)

1p {
2    letter-spacing: 2px;
3}

Stark vergrößert (letter-spacing: 6px;)

1p {
2    letter-spacing: 6px;
3}

Verkleinert (letter-spacing: -1px;)

1p {
2    letter-spacing: -1px;
3}

Wortabstand (word-spacing)

word-spacing steuert den Abstand zwischen Wörtern. Das ist besonders nützlich, wenn du Texte bewusst luftiger oder kompakter gestalten möchtest.

10px Abstand

1p {
2    word-spacing: 10px;
3}

20px Abstand

1p {
2    word-spacing: 20px;
3}