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 eher zusammen mit text-transform: uppercase in Headlines oder Überschriften verwendet.
h2 {
letter-spacing: 0.1em;
word-spacing: 0.5em;
text-transform: uppercase;
}
CSS letter-spacing und Blocksatz vs font-stretch
Die CSS-Regel letter-spacing: kann die Ausrichtung im Blocksatz (text-align: justify) überschreiben.
letter-spacing: -1px;
font-stretch ist eine Alternative zu letter-spacing / word-spacing. Aber auch wenn alle modernen Browser font-stretch unterstützen: Nicht jeder Font unterstützt font-stretch mit allen Optionen und viele Systemfonts unterstützen font-stretch überhaupt nicht.
Wenn die gewählte Schrift allerdings mit font-stretch umgehen kann, wirkt die Ausdehnung bzw. das Stauchen professioneller und macht den Text besser lesbar.
font-stretch: 75%;
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)
