Regeln zur Laufweite nach Schriftgröße

Mach ein kleines Experiment, bevor du dir irgendwelche Regeln durchliest. Setze dasselbe Wort — „Hardware” passt gut — einmal bei 12px und einmal bei 64px in derselben Schrift, und achte auf die Zwischenräume zwischen den Buchstaben statt auf die Buchstaben selbst. Bei 64px sind die Zwischenräume zu eigenen, sichtbaren Formen geworden, und das Wort wirkt etwas locker. Bei 12px scheinen sich dieselben Buchstaben gegenseitig zu drängen. An der Schrift hat sich nichts geändert — nur an der Größe.

Das ist die Kernregel der Laufweite (in der Typografie heißt das Tracking): Sie läuft der Schriftgröße entgegen. Großer Display-Text wird enger gesetzt — negative Werte um −0,02em ab 48px aufwärts; Fließtext bleibt unangetastet, weil Schriften für Lesegrößen bereits passend abgestimmt sind; und kleiner Text, besonders Versal-Labels, wird geöffnet — +0,05em oder mehr. Der Rest dieses Artikels erklärt, warum es die Regel gibt, wie viel du auf jeder Ebene einer Skala anwendest und welche Einheiten du nutzt. Er ist Teil unseres Schriftgrößenskala-Leitfadens.

Warum hängt die Laufweite von der Schriftgröße ab?

Jede Glyphe einer Schrift trägt auf beiden Seiten einen eingebauten Freiraum — Schriftgestalter nennen das die Vor- und Nachbreite (Sidebearings) — abgestimmt darauf, dass Text bei den vom Gestalter erwarteten Größen gleichmäßig läuft, typischerweise Lesegrößen im Bereich von 9–14pt. Dieser Abstand skaliert linear mit der Schrift, aber die Wahrnehmung skaliert nicht mit. Bei Display-Größen erfasst das Auge das ganze Wort auf einen Blick, und die vergrößerten Zwischenräume beginnen als eigenständige Formen zu wirken: Das Wort wirkt locker. Bei sehr kleinen Größen schrumpfen dieselben Zwischenräume unter das, was das Auge braucht, um einen Strich vom nächsten zu trennen: Das Wort wirkt gedrängt.

Im Bleisatz gab es dieses Problem kaum, denn jede physische Größe wurde separat geschnitten, mit für diese Größe angepasstem Abstand. Eine digitale Schrift ist meist eine einzige Kontur, skaliert — die optische Anpassung, die früher in jede Größe eingebaut war, muss also von Hand wiederhergestellt werden. Tracking ist genau diese Wiederherstellung. (Manche Variable Fonts liefern inzwischen eine optische Größenachse, opsz, die einen Teil davon automatisiert — aber sie passt die Buchstabenformen und Abstände an, die der Gestalter gewählt hat, und das sind nach wie vor eine Minderheit der Schriften im produktiven Einsatz.)

Wie viel Laufweite sollte jede Größe bekommen?

Hier ein durchgerechneter Satz Startwerte auf einer gängigen modularen Skala — 16px-Basis, Verhältnis 1,333, zwei Stufen pro Intervall — der die Ebenen abdeckt, die die meisten Systeme führen:

Zwei Dinge lohnt es sich an den Zahlen zu beachten. Erstens sind die absoluten Effekte winzig: Bei 51px entfernt −0,02em etwa einen Pixel zwischen jedem Buchstabenpaar — und das reicht, um den Unterschied zwischen luftig und gesetzt auszumachen. Tracking ist ein Gewürz, keine Zutat. Zweitens sind die Werte Ausgangspunkte, kein Gesetz: Eine geometrische Grotesk mit offenen, gleichmäßigen Buchstabenformen verträgt engeres Display-Tracking als eine Serifenschrift mit filigranen Anschlüssen, und schmal laufende (Condensed) Schriften wollen oft gar keins. Die Richtung der Regel ist verlässlich; die genaue Menge ist eine Entscheidung, die du mit deinen Augen triffst.

Sieh dir das Muster über ein ganzes System hinweg an: diese Skala in Scale Composer öffnen — jede Ebene von Caption bis Display trägt ihren eigenen Laufweiten-Wert, der mit wachsender Größe enger wird. Verschiebe das Tracking auf einer beliebigen Ebene und vergleiche es mit seinen Nachbarn.

Warum braucht Versaltext zusätzliche Laufweite?

Kleingeschriebene Wörter haben Silhouetten: Ober- und Unterlängen geben „hardware” eine Skyline, die sich von „software” unterscheidet. Ein Wort in Großbuchstaben ist ein gleichförmiges Rechteck — die Skyline ist weg, und man muss das Wort Buchstabe für Buchstabe entziffern. Zusätzliches Tracking macht jeden Buchstaben leichter isolierbar und erkennbar; deshalb bekommt kleiner Versaltext — Overlines, Tags, Button-Labels — üblicherweise +0,05em bis +0,1em.

Dieselbe Logik sagt, was zu vermeiden ist: Negatives Tracking bei kleinem Versaltext arbeitet gegen den einzigen Erkennungskanal, der ihm bleibt. Enge Versalien können bei Display-Größen funktionieren, wo jeder Buchstabe groß genug ist, um ihn mühelos zu erkennen, aber bei 11–12px öffne sie.

Sollte die Laufweite em oder px verwenden?

Nimm em. In em ausgedrücktes Tracking ist relativ zur Schriftgröße, auf die es angewendet wird, also wandert die Proportion mit dem Text mit: Ein Label-Stil mit letter-spacing: 0.05em behält dieselbe optische Offenheit, egal ob das Label bei 11px oder 13px gerendert wird. Ein Pixelwert ist eingefroren — 1px Tracking, das bei 12px richtig aussieht, wird bei 24px unsichtbar und bei 8px zu grob, und es muss bei jeder Größenänderung neu hergeleitet werden. Auf einer Skala, deren Größen erzeugt und nicht für immer festgeschrieben werden, ist em die Einheit, die eine Neujustierung übersteht.

In CSS heißt die Eigenschaft letter-spacing, und sie hat eine Feinheit, die man kennen sollte: Der Standardwert normal ist nicht dasselbe wie 0. normal bedeutet den eingebauten Abstand der Schrift plus die Erlaubnis für den Browser, die Zwischenräume beim Blocksatz anzupassen; 0 verbietet diese Anpassung. Bei linksbündigem Interface-Text rendern beide gleich, aber der Unterschied ist ein Grund, Fließtext auf normal zu belassen statt ihn „explizit auf null” zu setzen.

Auch deshalb gehört Tracking in ein Typografie-Token hinein statt daneben: Ein Display-Stil ist seine Größe, Zeilenhöhe, Schriftstärke und das Tracking zusammen. Liefere die Größe ohne die −0,02em aus, und du hast den Stil nicht ausgeliefert.

Teste die Regel an deiner eigenen Schrift

Am schnellsten verinnerlichst du größenabhängiges Tracking, indem du ihm beim Scheitern zusiehst: eine Display-Ebene auf −0,02em verengt öffnen, dann setze die letter-spacing zurück auf 0 und sieh dir die Überschrift noch einmal an — die Lockerheit, die du im ersten Moment nicht benennen konntest, wird offensichtlich, sobald du die korrigierte Version gesehen hast. Probiere dann das Gegenteil an der Overline: Zieh ihre +0,08em auf null herunter und beobachte, wie das Versal-Label zusammenklumpt. Deine eigene Schrift verrät dir die genauen Werte; die Richtung der Regel bleibt bestehen.