letter-spacing & word-spacing

letter-spacing steuert den Abstand zwischen einzelnen Buchstaben (Zeichen), word-spacing den Abstand zwischen Wörtern. Beide Eigenschaften sind wichtige Werkzeuge für typografische Feinabstimmung. letter-spacing wird besonders häufig in Kombination mit text-transform: uppercase eingesetzt, weil Großbuchstaben mit erhöhter Laufweite deutlich besser lesbar sind. Beide Eigenschaften werden vererbt und akzeptieren auch negative Werte, um Abstände zu verringern.

Steckbrief letter-spacing

Syntax: letter-spacing: normal | <length>
Initialwert: normal
Vererbt: Ja
Animierbar: Ja

Kategorie: Typografie
Werte: 9
Beispiele: 4
Browser: 5 von 5
E-Mail: 4 von 5
Stand: 15.02.2026

Grundlagen

letter-spacing addiert einen festen Wert zum natürlichen Abstand zwischen jedem Buchstabenpaar. Der Standardwert normal lässt den Browser den optimalen Abstand basierend auf der Schriftmetrik berechnen. Positive Werte vergrößern den Abstand, negative Werte verkleinern ihn. Die Einheit em ist besonders praktisch, weil sie relativ zur Schriftgröße ist: 0.05em ergibt bei 16px Schrift einen Abstand von 0.8px, bei 32px einen von 1.6px.

word-spacing funktioniert ähnlich, wirkt aber nur auf die Leerzeichen zwischen Wörtern. Der Wert wird zum normalen Wortabstand addiert (bei positiven Werten) oder davon abgezogen (bei negativen Werten). word-spacing wird in der Praxis seltener verwendet als letter-spacing, weil die Standard-Wortabstände der meisten Schriften bereits gut funktionieren.

Großbuchstaben (durch text-transform: uppercase oder im HTML) profitieren besonders von erhöhtem letter-spacing. In normaler Schreibweise sind die Buchstabenabstände auf Kleinbuchstaben optimiert. Großbuchstaben wirken ohne zusätzliches Spacing gedrängt und sind schwerer zu lesen. Ein Wert von 0.05em bis 0.1em ist für Uppercase-Text ein guter Ausgangspunkt.

Syntax & Werte

9 Werte

letter-spacing

Wert	Beschreibung	Beispiel
`normal`	Kein zusätzlicher Abstand. Browser nutzt die Schriftmetrik.	letter-spacing: normal
`<length>`	Zusätzlicher Abstand zwischen Buchstaben (px, em, rem).	letter-spacing: 0.05em
`negative Werte`	Reduzierter Abstand. Buchstaben rücken enger zusammen.	letter-spacing: -0.02em
`inherit`	Erbt den Wert explizit vom Elternelement.	letter-spacing: inherit

word-spacing

Wert	Beschreibung	Beispiel
`normal`	Standard-Wortabstand basierend auf der Schrift (meist ca. 0.25em).	word-spacing: normal
`<length>`	Zusätzlicher Abstand zwischen Wörtern.	word-spacing: 0.2em
`<percentage>`	Prozent der Breite eines Leerzeichens.	word-spacing: 50%
`negative Werte`	Reduzierter Wortabstand.	word-spacing: -0.1em
`inherit`	Erbt den Wert explizit vom Elternelement.	word-spacing: inherit

Beispiele

4 Beispiele

Erhöhtes letter-spacing bei Großbuchstaben ist ein klassisches typografisches Stilmittel. Es verleiht Überschriften Eleganz und verbessert die Lesbarkeit.

Gesperrte Überschriften mit letter-spacing

.heading {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}

.subheadline {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: #64748b;
}

<div class="spaced-demo">
<div><div class="label">letter-spacing: normal</div><span class="sp-none">Überschrift</span></div>
<div><div class="label">letter-spacing: 0.05em</div><span class="sp-small">Überschrift</span></div>
<div><div class="label">letter-spacing: 0.15em</div><span class="sp-wide">Überschrift</span></div>
<div><div class="label">letter-spacing: 0.25em (Subheadline-Style)</div><span class="sp-extra">Kategorie</span></div>
</div>

Große, fette Überschriften profitieren manchmal von leicht reduziertem letter-spacing. Die Buchstaben rücken enger zusammen und die Überschrift wirkt kompakter und prägnanter.

Negatives letter-spacing für kompakte Überschriften

h1 {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.02em; /* Leicht enger */
}

<div class="negative-demo">
<div><div class="label">letter-spacing: normal</div><span class="n-normal">Große Überschrift</span></div>
<div><div class="label">letter-spacing: -0.02em</div><span class="n-tight">Große Überschrift</span></div>
<div><div class="label">letter-spacing: -0.04em</div><span class="n-tighter">Große Überschrift</span></div>
</div>

word-spacing beeinflusst nur die Abstände zwischen Wörtern, nicht zwischen Buchstaben. Große Wortabstände können die Lesbarkeit bei breiten Zeilen verbessern, zu große Abstände lassen den Text aber auseinanderfallen.

word-spacing im Vergleich

.normal { word-spacing: normal; }
.wide   { word-spacing: 0.3em; }
.tight  { word-spacing: -0.1em; }

<div class="word-demo">
<div class="w-normal"><div class="label">word-spacing: normal</div>Dies ist ein Beispieltext mit normalem Wortabstand. Der Browser berechnet den optimalen Abstand.</div>
<div class="w-wide"><div class="label">word-spacing: 0.3em</div>Dies ist ein Beispieltext mit erhöhtem Wortabstand. Die Wörter stehen weiter auseinander.</div>
<div class="w-tight"><div class="label">word-spacing: -0.1em</div>Dies ist ein Beispieltext mit reduziertem Wortabstand. Die Wörter stehen enger zusammen.</div>
</div>

Die Kombination von text-transform: uppercase, letter-spacing und font-weight ist ein weit verbreitetes Pattern in modernem Webdesign. Hier ein vollständiges Beispiel mit verschiedenen Varianten.

Uppercase mit Spacing in der Praxis

.nav-link {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
}

<div class="practice-demo">
<div class="pr-nav"><div class="label">Navigation</div><span>Home</span> <span>Blog</span> <span>Kurse</span> <span>Kontakt</span></div>
<div class="pr-badge"><div class="label">Badges</div><span class="b-blue">Neu</span> <span class="b-green">Aktiv</span> <span class="b-red">Wichtig</span></div>
</div>

Barrierefreiheit

Zu viel letter-spacing verschlechtert die Lesbarkeit, weil Buchstaben nicht mehr als zusammengehörige Wörter wahrgenommen werden. Die WCAG-Richtlinie 1.4.12 fordert, dass Nutzer den Buchstabenabstand auf mindestens 0.12em erhöhen können, ohne dass Inhalte verloren gehen. Stelle sicher, dass dein Layout bei erhöhtem Spacing nicht bricht.

Negatives letter-spacing kann dazu führen, dass sich Buchstaben überlappen, besonders bei Schriften mit breiten Zeichen. Teste negative Werte immer mit verschiedenen Inhalten und Schriftgrößen. Für Fließtext solltest du generell auf negatives letter-spacing verzichten.

Erhöhtes word-spacing kann für Menschen mit Legasthenie hilfreich sein, weil es die Wortgrenzen deutlicher macht. Übertrieben große Abstände sind aber genauso schädlich, weil der Text nicht mehr als zusammenhängend wahrgenommen wird.

Häufige Fehler

5 Fehler

01 Uppercase ohne letter-spacing

Großbuchstaben ohne zusätzlichen Zeichenabstand wirken gedrängt und sind schwer lesbar. Füge immer mindestens 0.05em letter-spacing hinzu.

02 px statt em für letter-spacing

letter-spacing: 2px bleibt bei jeder Schriftgröße gleich. 0.05em passt sich proportional an und sieht bei allen Größen gut aus.

03 Zu viel letter-spacing auf Fließtext

letter-spacing: 0.2em auf normalen Absätzen macht den Text langsam und schwer lesbar. Große Werte sind nur für Überschriften, Navigation und Badges geeignet.

04 word-spacing in em und letter-spacing verwechseln

letter-spacing wirkt zwischen Buchstaben, word-spacing nur zwischen Wörtern. Verwechsle die beiden nicht.

05 letter-spacing auf monospace-Schriften

Monospace-Schriften haben bereits gleichmäßige Abstände. Zusätzliches letter-spacing zerstört die Ausrichtung in Code-Blöcken.

Browser-Kompatibilität

5 von 5

letter-spacing und word-spacing werden von allen Browsern vollständig unterstützt. Beide Eigenschaften gehören zu den ältesten CSS-Eigenschaften.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

4 von 5

letter-spacing funktioniert in den meisten Email-Clients gut. word-spacing wird teilweise unterstützt.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Teilweise

letter-spacing funktioniert. word-spacing wird teilweise ignoriert
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da