Abstand zwischen Buchstaben und Wörtern

Problem

Sie wollen den horizontalen Abstand zwischen Buchstaben und Wörtern (die Laufweite) im HTML-Text anpassen.

Lösung

Den Abstand zwischen Buchstaben können Sie mit der Eigenschaft letter-spacing einstellen; der Wortabstand wird durch die Eigenschaft word-spacing definiert.

h2 {
letter-spacing: -0.05em;
word-spacing: 1em;
font-family: Times, "Times New Roman", serif;
}

CSS Typografie - Den Abstand zwischen Buchstaben und Wörtern mit CSS anpassen

Während in der ersten Deklaration der Buchstabenabstand um 0,05 em-Einheiten verringert wird, erhöhen wir in der zweiten Anweisung den Abstand zwischen den Wörtern um eine em-Einheit. Das Ergebnis sehen Sie in Abbildung.

Diskussion

Die Anpassung der Laufweite für eine bessere Ästhetik ist eine alte Tradition in der Typografie. Zwei Fachbegriffe beschreiben die im Text vorgenommenen Abstandsänderungen: Unterschneidung (Verringern der Laufweite, auch Kerning genannt) und Spationierung (Vergrößern der Laufweite, auch Sperren genannt). In der Praxis kommt vor allem die Unterschneidung zum Einsatz.

Die Unterschneidung beschreibt die Reduzierung des Leerraums zwischen zwei Buchstaben, um eine bessere Lesbarkeit zu erreichen. Ein Beispiel für eine Unterschneidung ist die Verringerung des Abstands zwischen einem großen T und einem folgenden kleinen i. Wird die Laufweite über mehrere Textblöcke hinweg verändert, spricht man auch von Tracking.

Zwar können Sie für letter-spacing und word-spacing sämtliche in CSS gültigen Längeneinheiten verwenden. Allerdings gilt es allgemein als beste Vorgehensweise, die Werte in relativen Längeneinheiten anstelle von absoluten anzugeben.