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!

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:

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.