# Tracking, Kerning, Zeilenabstand: das Abstandstrio

[Canonical HTML page](https://gradiently.design/de/guide/tracking-vs-kerning)

Drei Begriffe für drei verschiedene Lücken. Wirfst du sie durcheinander, korrigierst du die falsche. Hier steht, was jeder steuert, wonach du zuerst greifst und welche Zahlen als Ausgangspunkt taugen.

## The short version

- Tracking verändert den Abstand zwischen allen Buchstaben einer Zeile oder eines Textblocks auf einmal.
- Kerning verändert den Abstand zwischen einem bestimmten Buchstabenpaar, etwa A und V.
- Der Zeilenabstand ist der vertikale Abstand zwischen Textzeilen, in CSS und den meisten Apps Zeilenhöhe genannt.
- Lege erst Zeilenabstand und Tracking für einen ganzen Stil fest und kerne einzelne Paare nur in großer Schrift.
- Große Headlines wollen meist etwas engeres Tracking und engeren Zeilenabstand, während Versalien und kleiner Text mehr Tracking wollen.

Bei **Tracking oder Kerning** liegt der Unterschied im Umfang. Tracking verändert den Abstand zwischen allen Buchstaben einer Auswahl, sodass sich eine ganze Headline gleichmäßig öffnet oder verengt. Kerning verändert den Abstand eines bestimmten Paars, etwa von A und V in WAVE, um eine Lücke zu beheben, die die Schrift hinterlassen hat. Der Zeilenabstand, der Dritte im Bunde, hat mit nebeneinanderstehenden Buchstaben nichts zu tun: Er ist der vertikale Raum von einer Textzeile zur nächsten.

| Begriff | Was er verändert | Umfang | In CSS |
| --- | --- | --- | --- |
| Tracking | Abstand zwischen allen Buchstaben | Ein Wort, eine Zeile oder ein Absatz | `letter-spacing` |
| Kerning | Abstand zwischen einem Buchstabenpaar | Zwei Zeichen | `font-kerning` (nur an oder aus) |
| Zeilenabstand | Abstand zwischen Zeilen | Ein Absatz oder Textfeld | `line-height` |

Das Abstandstrio auf einen Blick. Zwei wirken horizontal, einer vertikal, und nur einer arbeitet an einem einzelnen Paar.

## Was ist Tracking in der Typografie

Tracking ist eine gleichmäßige Änderung. Markiere eine Zeile, füge Tracking hinzu, und jede Lücke wächst um denselben Betrag. Es ist das Werkzeug, um die *Textur* von Text zu verändern: luftig und förmlich oder dicht und kernig. In Designprogrammen misst man es in Tausendsteln eines Gevierts (Adobe) oder als Prozentsatz der Schriftgröße (Figma), in CSS als `letter-spacing`, am besten in em, damit es mit der Schrift skaliert.

Drei Situationen verlangen danach. Große Headlines wirken bei Standardabstand meist locker, ein wenig negatives Tracking zieht sie zusammen. Versalien wirken gedrängt, weil Versalien dafür gezeichnet wurden, neben Kleinbuchstaben zu stehen, sie brauchen also positives Tracking. Und sehr kleiner Text wie Labels und Rechtszeilen liest sich mit etwas mehr Luft besser. [Buchstabenabstand](https://gradiently.design/de/guide/letter-spacing) behandelt jeden Fall im Detail.

## Was ist Kerning

Kerning ist eine lokale Reparatur. Manche Buchstabenpaare hinterlassen selbst in einer gut abgestimmten Schrift ein sichtbares Loch oder eine Kollision: AV, To, LT, Yo, P gefolgt von einem Punkt. Schriften enthalten eine Tabelle dieser Paare und passen sie automatisch an, bei Fließtext kannst du Kerning also in Ruhe lassen. In Headlines, Logos und Wortmarken musst du ein oder zwei Paare womöglich trotzdem von Hand anpassen. [Kerning](https://gradiently.design/de/guide/kerning) enthält die vollständige Liste schwieriger Paare und eine Methode, sie nach Augenmaß zu beheben.

## Was ist Zeilenabstand in der Typografie

Der englische Begriff Leading stammt von den Bleistreifen, die Setzer zwischen Zeilen aus Metalllettern legten. Heute ist es die Zeilenhöhe: der Abstand von einer Grundlinie zur nächsten. Zu wenig, und Oberlängen stoßen an Unterlängen; zu viel, und die Zeilen driften als getrennte Gedanken auseinander. Als Faustregel gilt: Je länger die Zeile und je kleiner der Text, desto mehr Zeilenabstand braucht er. Warum, erklärt [Zeilenhöhe und Zeilenlänge](https://gradiently.design/de/guide/line-height-and-line-length).

Ein Hochformat-Post mit gesperrtem Versalien-Eyebrow „NEUE SAISON“ über einer eng gesetzten Headline „Frühjahrskollektion ist da“

Wo jede Einstellung hingehört: weites Tracking beim Versalien-Eyebrow, enges Tracking und enger Zeilenabstand bei der Headline, normaler Abstand bei der Detailzeile.

Ein Hochformat-Redaktionspost mit kleinem gesperrtem Label „AUSGABE 04“ und dem Titel „Notizen aus dem Atelier“

Ein redaktionelles Layout. Seine kleine Schrift, das Label und der Untertitel, liest sich mit großzügigem Zeilenabstand und leicht offenem Tracking ruhiger.

## Was du zuerst änderst: Tracking, Kerning oder Zeilenabstand

Arbeite von der größten Entscheidung zur kleinsten. Zeilenabstand und Tracking legen den Stil fest; Kerning räumt auf, was übrig bleibt. Änderst du sie in der falschen Reihenfolge, machst du deine eigene Arbeit wieder zunichte.

1. **Größe und Schnitt wählen** Der Abstand hängt von beidem ab. Lege sie zuerst fest, denn ein kräftigerer Schnitt oder eine größere Größe braucht andere Werte.
2. **Zeilenabstand festlegen** Entscheide, wie eng sich die Zeilen stapeln. Headlines enger, Absätze lockerer.
3. **Tracking für den Stil festlegen** Wende einen Tracking-Wert auf den ganzen Headline-, Label- oder Fließtextstil an. Halte ihn im ganzen Design konsistent.
4. **Paare kernen, die noch klaffen** Nur in großer oder dauerhafter Schrift. Suche nach AV, To, LT und ähnlichen Paaren und passe sie einzeln an.
5. **In echter Größe prüfen** Sieh das Ergebnis in der Größe an, in der Menschen es sehen. Ein Abstand, der gezoomt stimmt, kann am Handy zu locker wirken.

## Startwerte für Tracking und Zeilenabstand

Das sind sinnvolle Standardwerte, keine Gesetze. Schriften unterscheiden sich, und eine schmale Display-Schrift verhält sich ganz anders als eine breite geometrische Grotesk. Nimm sie als Start und vertraue dann deinem Auge.

| Textrolle | Tracking (CSS) | Tracking (Adobe-Einheiten) | Zeilenabstand |
| --- | --- | --- | --- |
| Fließtext, 14 bis 20 px | 0 | 0 | 1,4 bis 1,6 |
| Headline, ab 48 px | -0,01em bis -0,03em | -10 bis -30 | 1,0 bis 1,15 |
| Riesige Display-Schrift, ab 120 px | -0,02em bis -0,04em | -20 bis -40 | 0,9 bis 1,05 |
| Labels in Versalien | 0,06em bis 0,12em | 60 bis 120 | 1,2 bis 1,3 |
| Kleiner Text unter 13 px | 0,01em bis 0,02em | 10 bis 20 | 1,4 bis 1,5 |

Tracking in CSS-em und in Adobes Tausendsteln eines Gevierts sagt dasselbe: 0,05em entspricht 50 Einheiten. Der Zeilenabstand steht als Vielfaches der Schriftgröße.

### Häufige Fehler

- Jedes Paar kernen, obwohl das Tracking nicht stimmt
- Fließtext enger tracken, damit mehr Wörter passen
- Standard-Zeilenabstand bei einer dreizeiligen Headline
- Versalien ohne Tracking
- Anderes Tracking bei jeder Headline eines Sets

### Besser

- Erst das Tracking korrigieren, dann kernen, was übrig bleibt
- Stattdessen den Text bearbeiten
- Den Headline-Zeilenabstand auf etwa 1,1 senken
- Versalien um 0,06em oder mehr öffnen
- Ein Wert pro Stil, in den Markenregeln festgehalten

## Tracking, Kerning und Zeilenabstand in CSS

```css
:root {
  font-kerning: normal; /* use the font's own pairs */
}

body {
  font-size: 1.0625rem;
  line-height: 1.55;      /* leading */
  letter-spacing: 0;      /* tracking */
}

h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.eyebrow {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
```

Schreibe `line-height` ohne Einheit, damit es mit der Schriftgröße skaliert, und `letter-spacing` aus demselben Grund in em.

Halte diese Werte an einem Ort, damit jede Seite für dieselbe Rolle denselben Abstand nutzt. Das ist das Herz eines [Typografiesystems](https://gradiently.design/de/guide/brand-typography-system). Gestaltest du Social Posts statt Webseiten, gilt dieselbe Idee: Lege den Abstand einmal fest, schreib ihn in deine Markenregeln und nutze ihn wieder. In Gradiently enthält das Markenkit deine Überschrift- und Fließtextschriften, und der Designer wendet es an, wenn er neue Größen anlegt, sodass die Schrift vom quadratischen Post bis zur Story konsistent bleibt.

## FAQ

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

Tracking verändert den Abstand zwischen allen Buchstaben einer Auswahl. Kerning verändert den Abstand zwischen einem bestimmten Buchstabenpaar.

### Ist der Zeilenabstand dasselbe wie die Zeilenhöhe?

In der Praxis ja. Zeilenabstand ist der traditionelle Begriff aus dem Print, Zeilenhöhe nennen CSS und die meisten Designprogramme den Abstand zwischen Zeilen.

### Soll ich zuerst Tracking oder Kerning anpassen?

Erst das Tracking. Es legt den Gesamtabstand fest; Kerning behebt dann die wenigen Paare, die noch ungleich aussehen, und nur in großer Schrift.

### Wie heißt Tracking in CSS?

`letter-spacing`. Schreibe es in em, etwa `0.05em`, damit es proportional bleibt, wenn sich die Schriftgröße ändert.

### Welche Zeilenhöhe sollte Fließtext haben?

Etwa das 1,4- bis 1,6-Fache der Schriftgröße für Fließtext und etwa 1,0 bis 1,15 für große Headlines.