letter-spacing & word-spacing

Zuletzt aktualisiert am 15. Februar 2026

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.

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

letter-spacing

word-spacing

Beispiele

Gesperrte Überschriften

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

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

Negatives letter-spacing für Überschriften

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.

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 im Vergleich

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.

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

Uppercase mit Spacing in der Praxis

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.

.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

• 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.
• 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.
• 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.
• word-spacing in em und letter-spacing verwechseln: letter-spacing wirkt zwischen Buchstaben, word-spacing nur zwischen Wörtern. Verwechsle die beiden nicht.
• 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

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

Email-Kompatibilität

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

Verwandte Eigenschaften