# Laufweite: wann du Schrift öffnest und wann du sie enger setzt

[Canonical HTML page](https://gradiently.design/de/guide/letter-spacing)

Ein paar Hundertstel Geviert entscheiden, ob ein Label durchdacht oder gequetscht wirkt. Hier steht, wo du Raum zwischen Buchstaben hinzufügst, wo du ihn wegnimmst und wo du ihn in Ruhe lässt.

## The short version

- Die Laufweite, auch Tracking genannt, ist der gleichmäßige Raum, der zwischen allen Buchstaben einer Textpassage hinzugefügt oder entfernt wird.
- Kerning ist etwas anderes: Es passt den Abstand zwischen bestimmten Buchstabenpaaren wie A und V an und ist meist in die Schrift eingebaut.
- Versalien und kleine Labels brauchen fast immer zusätzliche Laufweite, typischerweise etwa 0,05 bis 0,12 em.
- Große Überschriften sehen meist leicht enger besser aus, oft um 0,01 bis 0,03 em, weil die Standardabstände einer Schrift für kleinere Größen gezeichnet sind.
- Fließtext sollte normalerweise bei der Standard-Laufweite der Schrift bleiben.

Die **Laufweite** (Tracking) ist der gleichmäßige Raum, der zwischen allen Buchstaben eines Wortes oder einer Zeile hinzugefügt oder entfernt wird. Die kurze Regel: Gib Versalien und kleinen Labels mehr Laufweite, setz große Überschriften leicht enger und lass Fließtext bei der Standardeinstellung der Schrift. Die meisten Abstandsprobleme in echten Designs entstehen durch das Gegenteil: Versalien bleiben eng, große Überschriften bleiben locker, und Absätze werden gesperrt, um einen Kasten zu füllen.

Die Laufweite ist eine von drei Abstandseinstellungen, die bestimmen, wie sich Text liest. Die anderen beiden sind [Zeilenabstand und Zeilenlänge](https://gradiently.design/de/guide/line-height-and-line-length), und alle drei werden in [Typografie-Grundlagen](https://gradiently.design/de/guide/typography-basics) vorgestellt.

## Laufweite vs. Kerning: was ist der Unterschied

Die beiden Begriffe werden oft verwechselt, erfüllen aber verschiedene Aufgaben. Die **Laufweite** ändert den Abstand einer ganzen Auswahl gleichmäßig. **Kerning** ändert den Abstand zwischen einem bestimmten Buchstabenpaar, weil manche Formen bei Standardabstand unschöne Lücken lassen: denk an *AV*, *To*, *Ty* oder *LT*.

| Frage | Laufweite | Kerning |
| --- | --- | --- |
| Was es ändert | Abstand zwischen allen Buchstaben einer Auswahl | Abstand zwischen einem Buchstabenpaar |
| Wer es meist festlegt | Du, pro Stil: Labels, Überschriften, Bildunterschriften | Der Schriftgestalter, in den Kerning-Tabellen der Schrift |
| Wann du es anfasst | Jedes Mal, wenn du Versalien, Labels oder Display-Schrift setzt | Selten: Logos, große Überschriften, unschöne Paare |
| In CSS | `letter-spacing` | `font-kerning`, in den meisten Browsern standardmäßig aktiv |

Die Laufweite ist eine Stilentscheidung, die du oft triffst. Kerning ist ein handwerkliches Detail, das du in großen Größen prüfst.

Gute Schriften bringen Tausende Kerning-Paare mit, in Textgrößen musst du also selten von Hand kernen. In Überschriften- und Logogröße werden kleine Lücken sichtbar, und ein oder zwei Paare von Hand zu kernen ist die Minute wert.

## Warum Versalien mehr Laufweite brauchen

Kleinbuchstaben sind dafür gestaltet, neben anderen Kleinbuchstaben zu stehen: Ober- und Unterlängen und runde Formen erzeugen einen abwechslungsreichen Umriss, den das Auge als Wortbild liest. Großbuchstaben sind blockig und ähnlich hoch, bei Standardabstand drängen sie sich also zu einem festen Balken zusammen. Ein wenig zusätzliche Laufweite trennt sie und macht jeden Buchstaben leichter erkennbar.

Wie viel, hängt von der Größe ab. Winzige Versalien, etwa ein Label oder eine Dachzeile in 11 bis 13 px, vertragen 0,08 bis 0,12 em. Versalien in Zwischenüberschriftengröße brauchen weniger, etwa 0,04 bis 0,06 em. Sehr große Versalien in einer Überschrift brauchen vielleicht gar nichts oder sogar eine Spur Verengung.

Ein Ankündigungs-Post im Hochformat mit einer kleinen, gesperrten Dachzeile in Versalien über einer großen Überschrift

Eine gesperrte Dachzeile in Versalien über einer Überschrift mit normalem Abstand.

Ein Event-Poster im Hochformat mit einem gesperrten Label in Versalien und einer Überschrift in normaler Schreibung

Kleine Versalien mit zusätzlicher Laufweite lesen sich als Label, nicht als Geschrei.

## Wann du die Laufweite verringerst

Schriften sind für einen bestimmten Größenbereich zugerichtet, meist für Textgrößen. Auf 60 oder 100 px vergrößert wirkt derselbe Abstand luftig, und das Wort liest sich nicht mehr als eine Form. Große Überschriften leicht enger zu setzen, oft um 0,01 bis 0,03 em, bringt sie wieder zusammen. Schriften mit einer Achse für optische Größe oder einem eigenen Display-Schnitt erledigen das oft für dich, einer der Vorteile, die [variable Fonts](https://gradiently.design/de/guide/variable-fonts) behandelt.

Setz vorsichtig enger. Buchstaben, die sich berühren, oder runde Buchstaben, die zu verschmelzen beginnen, sind ein Zeichen, dass du zu weit gegangen bist, vor allem bei fetten Schnitten. Prüf die Paare am Rand dessen, was die Schrift gut kann, etwa *rn* (das sich wie *m* lesen kann) und *cl* (das sich wie *d* lesen kann).

### Vermeiden

- Standardabstand bei winzigen Labels in Versalien
- Lockere Laufweite bei einer 96-px-Überschrift
- Fließtext sperren, um eine Zeile oder einen Kasten zu füllen
- Negative Laufweite bei kleinem Text, damit mehr Wörter passen

### Machen

- 0,05 bis 0,12 em bei kleinen Versalien und Labels
- Eine leichte Verengung bei sehr großer Schrift
- Standardabstand für Absätze
- Kürzerer Text oder eine schmalere Schrift, wenn der Platz ausgeht

## Laufweite in CSS

Setz `letter-spacing` in `em`, nicht in Pixeln, damit der Abstand mit der Schriftgröße skaliert. Ein Wert, der zu einem 12-px-Label passt, stimmt dann auch proportional, wenn das Label auf 14 px wächst. Das vollständige Verhalten beschreibt die MDN-Referenz zu [letter-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing).

```css
body {
  letter-spacing: normal; /* leave paragraphs alone */
  font-kerning: normal;
}

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

.button {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.display {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* Tracking also adds space after the last letter.
   Balance it when centring a short label. */
.eyebrow--centred {
  padding-inline-start: 0.1em;
}
```

Positive Laufweite für kleine Versalien, ein wenig für Buttons, eine leichte Verengung für Display-Schrift und nichts für Fließtext.

> **Der Raum am Ende** Browser fügen die Laufweite auch nach dem letzten Zeichen hinzu. Bei einem zentrierten, stark gesperrten Label schiebt das den Text leicht nach links. Ein passender Innenabstand am Anfang, wie im Code oben, gleicht das aus.

## Laufweite für kleinen Text, Labels und Zahlen

Kleiner Text profitiert von etwas mehr Raum, denn in kleinen Größen verschwimmen Buchstaben, besonders helle Schrift auf dunklem Grund. Viele Schriftfamilien öffnen ihre Abstände bei kleinen optischen Größen bereits. Tut deine das nicht, können 0,01 bis 0,03 em bei Bildunterschriften und Kleingedrucktem helfen. Zahlen in Tabellen profitieren mehr von Tabellenziffern (`font-variant-numeric: tabular-nums`) als von Laufweite, weil sie sich dann in Spalten ausrichten.

Zwei weitere Fälle brauchen Sorgfalt. Verbundene Schriften wie Arabisch sollten nicht gesperrt werden, weil Abstände die Verbindungen zwischen den Buchstaben brechen. Und Kleinbuchstaben sollten kaum je gesperrt werden: Gesperrte Kleinbuchstaben zerlegen die Wortbilder, die sie leicht lesbar machen.

Ein quadratischer Statistik-Post mit einer großen Zahl und einem kleinen, gesperrten Label in Versalien darüber

Große Zahlen leicht eng gesetzt, mit einem kleinen gesperrten Label darüber, halten einen Statistik-Post kompakt und klar.

## Ein Startwert für die Laufweite in jeder Rolle

Nutze diese Werte als Standard und passe sie dann nach Augenmaß an deine Schrift an. Sieh dir das Ergebnis in echter Größe auf einem echten Bildschirm an, denn Abstände, die auf einer herangezoomten Arbeitsfläche richtig aussehen, wirken bei 100 Prozent oft anders.

| Textrolle | Typische Größe | Laufweite |
| --- | --- | --- |
| Dachzeile oder Label, Versalien | 11 bis 13 px | 0,08 bis 0,12 em |
| Button-Text | 14 bis 16 px | 0 bis 0,02 em |
| Fließtext | 16 bis 18 px | Standard der Schrift |
| Zwischenüberschrift, Versalien | 18 bis 24 px | 0,04 bis 0,06 em |
| Überschrift | 32 bis 56 px | 0 bis -0,01 em |
| Display-Überschrift | Ab 64 px | -0,01 bis -0,03 em |

Startwerte für lateinische Schrift. Breitere Schriften brauchen weniger zusätzlichen Raum, schmale Schriften vertragen mehr.

Liegt dein Design auf einem Farbverlauf oder Foto, beeinflusst der Abstand auch die Lesbarkeit: Dünne, eng gesetzte Buchstaben verschwinden vor einem unruhigen Feld schneller als offene. Kombiniere diese Einstellungen mit den Tipps in [Text auf Farbverlauf](https://gradiently.design/de/guide/text-on-gradient) und [Schriften kombinieren](https://gradiently.design/de/guide/font-pairing) für Designs, die sich auf einen Blick lesen.

## FAQ

### Was ist der Unterschied zwischen Laufweite und Kerning?

Die Laufweite, oder Tracking, ändert den Abstand zwischen allen Buchstaben einer Auswahl gleichmäßig. Kerning passt den Abstand zwischen einem bestimmten Buchstabenpaar wie A und V an und ist meist in die Schrift eingebaut.

### Wie viel Laufweite sollten Versalien haben?

Etwa 0,05 bis 0,12 em für kleine Versalien wie Labels und Dachzeilen, und weniger, je größer sie werden. Sehr große Überschriften in Versalien brauchen vielleicht gar keine.

### Sollte Fließtext eine zusätzliche Laufweite haben?

Meist nicht. Schriftgestalter richten Schriften für Textgrößen zu, der Standardabstand ist für Absätze also normalerweise am besten lesbar.

### Warum em für letter-spacing in CSS nutzen?

Ein em-Wert skaliert mit der Schriftgröße, der Abstand bleibt also proportional, wenn der Text größer oder kleiner wird. Ein Pixelwert bleibt fest und wird schnell zu eng oder zu locker.