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

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, und alle drei werden in Typografie-Grundlagen 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.

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.

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

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.

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;
}

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

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 und Schriften kombinieren für Designs, die sich auf einen Blick lesen.