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 kennengelernt, 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 normalem Wortabstand.

Text mit einem Zeichenabstand von 1em.

Text mit einem 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, mir bitte zukommen lassen!).

Es eignet sich gut für Spielereien Beispielsweise in Logos. Nehmen wir an, wie haben den Verein mit dem Vereinsnamen „zusammen schreiben e.V.“. Hier hat man je nach Schreibweise von „zusammenschreiben“ und „zusammen schreiben“ eine andere Bedeutung.

Bedeutung je nach Schreibweise:

  • Mit mehreren Menschen zusammen schreiben
  • Das Wort „Zusatz“ wird nicht getrennt, sondern zusammengeschrieben

Daher könnte man beim Logo damit spielen und beide Wörter visuell zusammenziehen durch Änderung des Wortabstands und gleichzeitig trennen durch Farbe. Um trotzdem einen Unterschied 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) kennenlernen.

Weiterempfehlen • Social Bookmarks • Vielen Dank

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:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details