Was ist eine Abstandsskala?

Eine Abstandsskala ist ein kurzer, geordneter Satz erlaubter Abstände — die einzigen Werte, die ein Design für Zwischenräume, Padding und Ränder verwendet. Statt irgendeine Zahl zu wählen, greifst du eine Stufe aus einem Menü von etwa acht Werten: 8, 11, 16, 23, 32, 45, 64. Gut gebaute Skalen sind nichtlinear — dicht am unteren Ende, licht am oberen Ende — weil das dazu passt, wie Menschen Abstände wahrnehmen.

Dieser Artikel behandelt, warum die Stufen nicht gleichmäßig verteilt sein sollten, wie drei Zahlen eine ganze Skala erzeugen, wie viele Stufen Produkte typischerweise brauchen und wie man sie benennt. Es ist der Baustein, der die Raster-Konventionen aus dem größeren Abstände-Hub zu einem vollständigen System macht.

Warum sollten die Stufen nicht gleichmäßig verteilt sein?

Das naheliegende Menü ist linear — die 8, 16, 24, 32, 40, 48, 56, 64 des 8-Punkt-Rasters. Es versagt an beiden Enden. Am unteren Ende ist es zu grob: Der Sprung von 8 auf 16 verdoppelt den Abstand, ohne etwas dazwischen für die engen Abstände innerhalb kompakter Komponenten — genau die Lücke, die die 4pt-Halbschritte füllen. Am oberen Ende ist es zu fein: 56 und 64 sind als Abschnittsabstände praktisch nicht zu unterscheiden, sodass das Menü vier Optionen — 40, 48, 56, 64 — für Unterschiede verschwendet, die kaum ein Leser registriert. Optionen, die keine gestalterische Bandbreite hinzufügen, laden trotzdem zu Inkonsistenz ein.

Der tiefere Grund ist perzeptiv. Der Unterschied zwischen 8px und 12px ist offensichtlich — der eine Zwischenraum ist um die Hälfte größer als der andere. Der Unterschied zwischen 72px und 80px ist kaum sichtbar, obwohl es dieselben 8 Pixel sind. Das Auge liest Proportionen, keine absoluten Mengen. Die Wahrnehmungsforschung beschreibt dieses Muster allgemein als das Weber-Fechner-Gesetz — wir bemerken Veränderungen tendenziell im Verhältnis zu dem Reiz, den sie verändern. Das ist eher eine Beobachtung über die Wahrnehmung als eine Design-Regel, aber es erklärt, warum eine Skala, die sich gleichmäßig gestuft anfühlt, eine ist, bei der jede Stufe um ein Verhältnis wächst und nicht um ein festes Inkrement.

Wie erzeugt man eine Abstandsskala?

Aus drei Zahlen und einer Formel:

size = base × ratio^(i/notes)

• Base verankert die Skala — üblicherweise die Fließtextgröße, sodass Abstände und Typografie aus derselben Wurzel wachsen.
• Ratio legt fest, wie schnell die Stufen wachsen — ein Verhältnis von 2 bedeutet, dass sich die Skala über jedes Intervall verdoppelt.
• Notes unterteilen jedes Intervall. Der Begriff ist aus der Musik entlehnt, wo eine Oktave in Noten unterteilt wird: zwei Noten pro Verdopplung setzen eine zusätzliche Stufe zwischen 16 und 32.

Mit Base 16, Ratio 2 und zwei Noten:

Jede Stufe ist etwa 41 % größer als die vorige (2^(1/2) ≈ 1,414). Vergleiche das mit dem linearen Menü: Am unteren Ende bietet die Skala 8, 11 und 16, wo das lineare nur 8 und 16 bot; am oberen Ende springt sie in zwei Schritten 32 → 45 → 64, wo das lineare vier verbrauchte. Dicht, wo feine Unterschiede sichtbar sind, licht, wo sie es nicht sind — die perzeptive Form, erzeugt durch Arithmetik.

Sieh live, wie sie neu berechnet wird: öffne diese Skala im Scale Composer — zieh am Verhältnis, und jede Stufe bewegt sich mit; füge eine Note hinzu, und die Zwischenwerte erscheinen. Dieselben drei Zahlen steuern die Schriftgrößenskala und das Grundlinienraster (die Hälfte der Base), sodass Abstände und Typografie konstruktionsbedingt verwandt bleiben.

Wie viele Stufen braucht eine Abstandsskala?

Irgendwo zwischen 6 und 10 deckt viele Produkte ab. Eine sinnvolle Aufteilung: ein oder zwei Mikro-Stufen für das Innere von Komponenten (Icon-Abstände, Chip-Padding), drei oder vier mittlere Stufen für den Raum zwischen Elementen und Komponenten und zwei oder drei große Stufen für Abschnitte und Seitenbereiche. Weniger als sechs erzwingt Kompromisse am einen oder anderen Ende; deutlich mehr als zehn, und das Menü ist nicht mehr kurz — die Entscheidungsmüdigkeit, die die Skala eigentlich beseitigen sollte, schleicht sich zurück. Datendichte Produkte liegen am oberen Ende dieser Spanne (mehr Noten pro Intervall); inhaltsstarke Websites liegen bequem am unteren Ende.

Wie sollten die Stufen heißen?

Zwei Konventionen dominieren in der Praxis: numerisch (space-1 bis space-7) und T-Shirt-Größen (xs bis 3xl). Zahlen halten die Reihenfolge offensichtlich und lassen sich mühelos erweitern; T-Shirt-Namen sind leichter im Kopf zu behalten, bieten aber keinen natürlichen Namen zwischen md und lg, wenn später eine Stufe eingefügt wird. Beides funktioniert — was wehtut, ist ein Wechsel, nachdem sich die Namen durch Komponenten und Stylesheets verbreitet haben. Die Benennungsfrage wird in dem Moment konkret, in dem die Skala als Abstands-Tokens exportiert wird, und sie verdient dort ihre eigene Behandlung.

Mach dieselbe Skala fluid

Eine feste Skala beantwortet „welche Abstände erlaubt sind” — aber dasselbe Layout muss auch bei 360px und bei 1440px funktionieren. Öffne diese Skala im Fluid-Modus: Der Export wechselt von festen Pixel-Stufen zu CSS-clamp()-Ausdrücken, die zwischen einem Minimum und einem Maximum gleiten, und jede Stufe teilt sich dieselbe Viewport-Steigung — so behält die Skala ihre internen Proportionen, während die absoluten Größen sich an den Bildschirm anpassen. Das Menü bleibt kurz; es lernt nur zu atmen.