Den Abstand zwischen Buchstaben und Wörtern anpassen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

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

Standardabstand zwischen Buchstaben und Wörtern im HTML-Text

Abbildung: Standardabstand zwischen Buchstaben und Wörtern im HTML-Text.

Lösung

Den Abstand zwischen Buchstaben können Sie mit der Eigenschaft letter-spacing einstellen (siehe nächste Abbildung):

h2 {
 font: bold italic 2em "Helvetica Nue", serif;
 margin: 0;
 padding: 0;
 letter-spacing: -0.1em;
}

Für Überschrift wurde Abstand zwischen Buchstaben verkleinert

Abbildung: Für die Überschrift wurde der Abstand zwischen den Buchstaben verkleinert.

Um auch den Abstand zwischen den Wörtern einer Zeile zu verändern, verwenden Sie die Eigenschaft word-spacing (siehe nächste Abbildung):

h2 {
 font: bold italic 2em "Helvetica Nue", serif;
 margin: 0;
 padding: 0;
 word-spacing: 0.33em;
}

Wortabstand in Überschrift wurde erhöht

Abbildung: Der Wortabstand in der Überschrift wurde erhöht.

Diskussion

Eine der größten Stärken von CSS liegt in der Fähigkeit, mit Typografie für das Web umzugehen. Früher mussten Webdesigner ein erschreckendes Arsenal von verschachtelten b-Elementen und Ein-Pixel-GIFs einsetzen, um den Text ansprechend aussehen zu lassen. Mit CSS dagegen sind Dinge wie die Anpassung des Abstands zwischen Buchstaben und ganzen Wörtern eines Absatzes kein Problem mehr.

Die Anpassung der Laufweite für eine bessere Ästhetik ist eine alte Tradition im Grafikdesign. 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 die Unterschneidung ist die Verringerung des Abstands zwischen einem großen T und einem folgenden kleinen i. Wird die Laufweite über mehrere Textblöcke hinweg reduziert, spricht man auch von Tracking.

Es wird allgemein als Best Practice angesehen, für Werte von letter-spacing und word-spacing relative Längeneinheiten anstelle von absoluten zu verwenden. Der Hintergrund dafür ist, dass Benutzer die Schriftgrößen im Browser selbst verändern können. Ein fester Abstand von 5 Punkt zwischen zwei Buchstaben mag bei einer Schriftgröße von 12 Pixel gut aussehen. Hat ein User aber seine Schriften stark vergrößert, wird der Abstand zwischen den Buchstaben bei der Verwendung absoluter Angaben trotzdem mit 5 Punkt dargestellt. Wird die Schrift bespielsweise mit einer Größe von 72 Pixeln angezeigt, ist eine Unterschneidung von 5 Pixeln kaum noch wahrzunehmen. Bei der Verwendung relativer Einheiten wie em wird die Unterschneidung dagegen im Verhältnis zur tatsächlichen Schriftgröße berechnet. Ein Wert von 1.5em skaliert also zusammen mit dem übrigen Text.

Entsprechendes gilt für die Verwendung anderer Texteffekte. Effekte sollten so verwendet werden, dass der Text weiterhin lesbar bleibt. Wenn Ihnen die Kommunikation mit Ihren Kunden wichtig ist, ist es sinnvoller, die Effekte subtil einzusetzen. Unlesbarer Text kann viele Leute verärgern, die Sie eigentlich auch ansprechen möchten.

Die Eigenschaften letter-spacing und word-spacing werden von allen modernen Browsern unterstützt.

Siehe auch

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln