Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Zeichenabstand beeinflussen – letter-spacing:

Mit der CSS-Anweisung letter-spacing haben wir eine weitere Möglichkeit der Textformatierung.

Wir können über CSS den Zeichenabstand zwischen den einzelnen Buchstaben und Zeichen beeinflussen. Im ersten Augenblick denkt man zwar an Buchstabenabstand, aber die Angabe bezieht sich auch alle Zeichen wie z.B. Zahlen und Sonderzeichen.

Beispiele Zeichenabstand über letter-spacing:

Im Folgenden 3 Beispiele – wobei das dritte durch die negative Wertangabe interessant ist!

Text mit einen Zeichenabstand von 6 Pixel.

Text mit einen Zeichenabstand von 1em.

Text mit einen Zeichenabstand von -0.2em.

Beim dritten Beispiel haben wir als Wert -0.2em

Aufbau der CSS-Anweisung

Beispiel für die Angabe von Werten bei letter-spacing:

letter-spacing: normal; /* Standard */
letter-spacing: 5px;  /* Angabe über Pixel */
letter-spacing: 0.2em; /* relative Angabe über EM */

Wir können also die Angaben über Pixel oder relative machen. Hier macht i.d.R. die relative Angabe über em Sinn, da wir mit Schriften arbeiten. Ändern wir die Schriftgröße, passt sich automatisch im entsprechenden Verhältnis auch der Buchstabenabstand an!

Die Angabe letter-spacing: normal; bewirkt, dass der Abstand wieder auf den Standard gesetzt wird.

Zum Verständnis: die Angabe letter-spacing: 0; entspricht der Angabe letter-spacing: normal; - die Buchstaben kleben also nicht übereinander (was man im ersten Augenblick sich bei dem Wert 0 denken könnte), sondern haben den Standardabstand. Somit wird immer jeder Angegebene Wert zu dem Standardwert addiert (bzw. bei negativen Werten abgezogen).

Wichtig ist also: es ändert nicht den Standartwert sondern wird zum Standardwert hinzugerechnet!

Sinnvolle Anwendung der Möglichkeit der Änderung des Zeichenabstands

Im ersten Augenblick scheint diese CSS-Anweisung wenig Relevanz für den Alltag zu haben. Es gibt aber immer wieder Augenblicke im Leben des Webdesigners, wo man genau diese Möglichkeit benötigt.

Alleine eine kleine Änderung des Wertes macht aus einer Standardschrift etwas anderes (aber man darf nicht mit den Werten übertreiben.

Somit kann man die Wirkung von Überschriften sehr schnell beeinflussen.

Man kann auch ganze Logos über diese Funktion aufbauen. Bei einigen Textlogos sind die Buchstaben ineinandergeschoben. Dazu folgendes Beispiel eines Logos einer fiktiven Computer-Firma, die nur durch das letter-spacing: erzeugt wird:



XZ -Computers

Aufgabe: Logo aus Initialen des Eigenen Namens

Als kleine Aufgabe. Aus den Anfangsbuchstaben des eigenen Namens ein kleines Logo erstellen. Tipp am Rande. Schriften ohne Serifen eigenen sich dafür am besten. Wer mag, kann auch mit den Schriftfarben spielen. Viel Spaß beim Umsetzen.

#klugscheissermodus Sperrsatz, Sperrschrift bzw. Sperren

Zu alten Schreibmaschinenzeiten sprach man von Sperrsatz, Sperrschrift bzw. Sperren, wenn man eine Hervorhebung durch das Vergrößern der Abstände zwischen den Buchstaben erreichen wollte.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe