5.1 Eigenschaft line-height
Textparameter wie line-height, letter-spacing und word-spacing spielen eine wichtige Rolle bei der Textgestaltung auf
Webseiten. Sie ermöglichen die Kontrolle über den Zeilenabstand, den Abstand zwischen Buchstaben und den
Abstand zwischen Wörtern. Schauen wir uns diese Eigenschaften genauer an.
Die Eigenschaft line-height bestimmt die Höhe der Textzeile. Sie legt den Abstand zwischen den Basislinien
benachbarter Textzeilen fest, was die Dichte und Lesbarkeit des Textes beeinflusst.
Werte:
- Zahlenwert: Relativer Wert ohne Einheiten (z.B. 1.5), der mit der aktuellen Schriftgröße multipliziert wird
- Prozentwert: Relativer Wert in Prozent von der aktuellen Schriftgröße (z.B. 150%)
- Absoluter Wert: Wert in festen Einheiten (z.B. in Pixeln) (z.B. 24px)
- Schlüsselwort
normal: Standardwert, normalerweise gleich 1.2
Beispiel:
.normal {
line-height: normal;
}
.one-point-five {
line-height: 1.5;
}
.double {
line-height: 2;
}
<body>
<p class="normal">Das ist ein Text mit normaler Zeilenhöhe. Das ist ein Text mit normaler Zeilenhöhe.</p>
<p class="one-point-five">Das ist ein Text mit einer Zeilenhöhe von 1.5. Das ist ein Text mit einer Zeilenhöhe von 1.5.</p>
<p class="double">Das ist ein Text mit doppelter Zeilenhöhe. Das ist ein Text mit doppelter Zeilenhöhe.</p>
</body>
5.2 Eigenschaft letter-spacing
Die Eigenschaft letter-spacing bestimmt den Abstand zwischen Buchstaben, also den zusätzlichen Raum zwischen den Zeichen
eines Textes. Sie kann verwendet werden, um die Lesbarkeit zu verbessern oder visuelle Effekte zu erzeugen.
Werte:
- Absoluter Wert: Wert in festen Einheiten (z.B. in Pixeln — 2px)
- Negativer Wert: Verringert den Abstand zwischen Zeichen (z.B. -1px)
- Schlüsselwort
normal: Standardwert, gleich 0 (kein zusätzlicher Raum)
Beispiel:
.normal {
letter-spacing: normal;
}
.wide {
letter-spacing: 2px;
}
.narrow {
letter-spacing: -1px;
}
<body>
<p class="normal">Das ist ein Text mit normalem Buchstabenabstand.</p>
<p class="wide">Das ist ein Text mit erweitertem Buchstabenabstand.</p>
<p class="narrow">Das ist ein Text mit reduziertem Buchstabenabstand.</p>
</body>
5.3 Eigenschaft word-spacing
Die Eigenschaft word-spacing bestimmt den Abstand zwischen Wörtern im Text. Sie fügt zusätzlichen Raum zwischen den Wörtern hinzu oder entfernt ihn, was zur Verbesserung der Lesbarkeit oder zur Erzeugung visueller Effekte verwendet werden kann.
Werte:
- Absoluter Wert: Wert in festen Einheiten (z.B. in Pixeln) (z.B. 4px)
- Negativer Wert: Verringert den Abstand zwischen Wörtern (z.B. -2px)
- Schlüsselwort
normal: Standardwert, gleich dem normalen Wortabstand (normalerweise 0)
Beispiel:
.normal {
word-spacing: normal;
}
.wide {
word-spacing: 4px;
}
.narrow {
word-spacing: -2px;
}
<body>
<p class="normal">Das ist ein Text mit normalem Wortabstand.</p>
<p class="wide">Das ist ein Text mit erweitertem Wortabstand.</p>
<p class="narrow">Das ist ein Text mit reduziertem Wortabstand.</p>
</body>
GO TO FULL VERSION