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

Abstand zwischen Wörtern – word-spacing:

Mit der CSS-Anweisung letter-spacing aus dem letzten Kapitel haben wir die Möglichkeit kennen gelernt, zwischen einzelnen Zeichen den Abstand zu verändern. Mit word-spacing haben wir die CSS-Anweisung um den Abstand zwischen Wörtern zu verändern.

Wir haben also eine weitere Möglichkeit für Textformatierung, wobei man die word-spacing-Anweisung wenig in der freien Wildbahn antrifft.

Die Anwendung ist identisch wie bei letter-spacing.

Beispiel für die Auswirkung

In den folgenden 3 Beispielen sieht man die Wirkung der CSS-Anweisung. In der dritten Ausgabe von meinem Namen wurde mit einem negativen Wert gearbeitet!

Text mit normalen Wortabstand.

Text mit einen Zeichenabstand von 1em.

Text mit einen Wortabstand von -0.2em.

Aufbau der CSS-Anweisung word-spacing:

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

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

Weil wir mit Text arbeiten und dieser auch vom Besucher in seiner Größe über Browsereinstellungen verändert werden kann, sollten wir immer mit relativen Angaben arbeiten. Die Maßeinheit „em“ ist also eine gute Wahl!

Wichtig für das Verständnis ist (siehe dazu auch letter-spacing). Die Angabe von word-spacing: 0; entspricht dem normalen Abstand. Alles positiven Angaben werden also dazu addiert und vergrößern den Wortabstand. Negative Angaben verringern den Wortabstand vom normalen Zustand aus gesehen!

Sinnvolle Anwendung in der Praxis

Einer der sehr wenig genutzten CSS-Anweisungen stellt word-spacing dar. Allerdings gibt es durchaus Beispiele (wer gute weitere Beispiele findet, mit bitte zukommen lassen!).

Es eignet sich gut für Spielereien Beispielsweise in Logos. Nehmen wir an, wie haben der Verein „zusammen schreiben e.V.“. Hier hat man je nach Schreibweise von „zusammenschreiben“ und „zusammen schreiben“ eine andere Bedeutung. Daher könnte man beim Logo damit spielen und beide Wörter visuell zusammenziehen durch Änderung des Wortabstand und gleichzeitig trennen durch Farbe. Um trotzdem einen Unterscheid zu sehen, bekommen die Wörter unterschiedliche Farbe und „font-weight“.

Das könnte dann so aussehen:

Beispiel für Anwendung word-spacing:
Beispiel für Anwendung word-spacing:

Solche Umsetzungen findet man oft bei bekannten Fernsehtitel wie z.B. „Tagesschau“ und „Weltspiegel“ in ARD. Hier einfach sich mal die entsprechenden Logos ansehen.

Der CSS-Code des Beispiels wird nicht gezeigt, da die Umsetzung des Beispiels eher verwirren wäre. Zur geschickten Umsetzung sollten wir noch CSS-Klassen (die später eingeführt werden) kennen lernen.

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