CSS, HTML und Javascript mit {stil}

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

Abstand zwischen Wörtern und Abstand zwischen Buchstaben

CSS letter-spacing und word-spacing vergrößern bzw. verkleinern den Platz zwischen aufeinander folgenden Zeichen oder Wörtern – letter-spacing und word-spacing werden zum normalen Abstand der Zeichen und Wörter addiert oder subtrahiert.

Als Maßeinheit für letter-spacing und word-spacing nutzt 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.

In der Zeit 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, aber die Lesbarkeit leidet u.U.

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.

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 und rem.

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.

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)