letter-spacing und word-spacing • Text sperren, dehnen, stauchen

CSS letter spacing word spacing

CSS letter-spacing und word-spacing ändern die Laufweite der Schrift und vergrößern bzw. verkleinern den Platz zwischen aufeinander folgenden Zeichen oder Wörtern. Die Werte für letter-spacing und word-spacing werden zum normalen Abstand der Zeichen und Wörter addiert oder subtrahiert.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Laufweite und Lesbarkeit

In der Ära der Schreibmaschine gehörten Leerzeichen zwischen den Zeichen einer Textpassage zu den wenigen Gestaltungsmitteln, die einen Text betonten, denn es gab keine fetten Schriften und keine größeren Typen. Mehr oder weniger Platz für Wörter und Zeichen kann einen Text hervorheben und die Lesbarkeit verbessern oder leiden lassen.

Der Raum zwischen Wörtern und Zeichen wird mit word spacing bzw. mit letter spacing verändert. Bei kleinen Schriftgrößen kann letter-spacing bzw. word-spacing die Lesbarkeit u.U. verbessern.

Als Maßeinheit für letter-spacing und word-spacing wirken am besten relative Werte (z.B. die Maßeinheit »em«). Dann wächst der Raum zwischen den Zeichen und Wörtern mit, wenn der Benutzer die Schriftgröße der Seite ändert. Würde ein fester Abstand – z.B. 1px – eingesetzt, bliebe der Abstand von 1px bei Änderungen der Schriftgröße erhalten. Besser sind relative Werte wie em, rem oder ch.

letter-spacing in Texten mit Kleinbuchstaben beeinträchtigt die Lesbarkeit und wird besser nur in kurzen großgeschriebenen Textpassagen eingesetzt. letter-spacing und word-spacing werden darum oft zusammen mit text-transform: uppercase in Headlines oder Überschriften verwendet.

letter-spacing in Headlines

h2 { 
   letter-spacing: 0.1em;
   word-spacing: 0.5em;
   text-transform: uppercase;
}

CSS letter-spacing und Blocksatz

Die CSS-Regel letter-spacing: kann die Ausrichtung im Blocksatz (text-align: justify) überschreiben.

Als es klingelte nachts und zwar kurz vor halb zehn, wurde niemand erwartet und niemand gesehen. Doch dann sahn sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

Aus Edward Gorey »Der zweifelhafte Gast«

Werte für letter-spacing / word-spacing

letter-spacing / word-spacing
dehnt oder staucht den Raum zwischen aufeinander folgenden Zeichen bzw. Wörtern. Ein positiver Wert dehnt den Raum (»Text sperren«), ein negativer staucht den Zwischenraum.
Werte
normal | <length>
normal
ist die Standardeinstellung. Die Angabe normal verhindert, dass vorangegangene Deklarationen den Text beeinflussen.
length
kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter),em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica),pt (Punkt), px (Pixel)