Tracking, Kerning, Zeilenabstand: das Abstandstrio

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.

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

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

   Zeilenabstand festlegen

   Entscheide, wie eng sich die Zeilen stapeln. Headlines enger, Absätze lockerer.

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

Tracking, Kerning und Zeilenabstand in 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;
}

Halte diese Werte an einem Ort, damit jede Seite für dieselbe Rolle denselben Abstand nutzt. Das ist das Herz eines Typografiesystems. 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.