4pt- vs. 8pt-Raster: Wann welches?

Das 4pt- und das 8pt-Raster sind zwei Ebenen einer einzigen Abstands-Methode, keine konkurrierenden Systeme: Vielfache von 8 regeln die Abstände auf Layout-Ebene — die Lücken zwischen Komponenten und Abschnitten — während Vielfache von 4 die feinen inneren Abstände regeln, etwa das Padding um Icons und den Abstand von einem Label zu seinem Eingabefeld, dazu die Typografie. Die praktische Frage ist nicht, welches Raster du übernimmst, sondern zu welcher Ebene jeder Abstand gehört.

Dieser Artikel behandelt, was die beiden Raster trennt, was ein Produkt zur 4pt-Ebene drängt, warum kleine Abstände überhaupt feinere Schritte brauchen und die Dokumentations-Gewohnheit, die verhindert, dass die beiden Ebenen zu einem einzigen unübersichtlichen Menü verschmelzen. Er baut auf den Grundlagen auf, die der Hub Abstände-System abdeckt.

Was ist der Unterschied zwischen einem 4pt- und einem 8pt-Raster?

Nur die Schrittweite. Ein 8pt-Raster erlaubt 8, 16, 24, 32, 40…; ein 4pt-Raster erlaubt 4, 8, 12, 16, 20, 24… — doppelt so viele Werte unterhalb jeder Obergrenze. Jeden Wert, den ein 8pt-Raster zulässt, lässt auch ein 4pt-Raster zu — deshalb beschreibt man das Paar besser als ein Raster mit halbem Zwischenschritt als als zwei Systeme.

Der Zielkonflikt ist direkt. Ein kürzeres Menü bedeutet weniger Entscheidungen und mehr Konsistenz zwischen Screens, die verschiedene Leute gestalten; ein feineres Menü bedeutet mehr Ausdrucksspielraum bei kleinen Größen — und mehr Raum, um auseinanderzudriften. Keines gewinnt eindeutig, deshalb fahren ausgereifte Systeme meist beide gleichzeitig, jedes auf seine eigene Ebene begrenzt:

• 8er-Vielfache fürs Layout: Abstand zwischen Komponenten, Abstand zwischen Abschnitten, Container-Padding, feste Komponentenhöhen.
• 4er-Vielfache innerhalb von Komponenten: Abstände von Icon zu Label, Padding in Chips und Badges, der Abstand von einem Label zu seinem Eingabefeld — und Typografie, wo Größen und Zeilenhöhen oft auf 4ern landen.

Plattform-Konventionen wirken ebenfalls auf dieser Ebene; Apples Human Interface Guidelines zum Layout sind ein Beispiel für die Rand- und Abstands-Vorgaben, mit denen ein Raster auf einer realen Plattform koexistieren muss.

Wann braucht ein Produkt die 4pt-Ebene?

Drei Kräfte treiben ein Produkt über reine 8er hinaus:

1. Datendichte. Tabellen, Dashboards, Admin-Panels: In einer 32px hohen Zeile ist ein Zell-Padding von 8px bereits ein Viertel der Höhe. Dichte Produkte brauchen 4 und 12 — Werte, die das 8pt-Menü nicht hat.
2. Kompakte Komponenten. Chips, Badges, Toolbar-Buttons, Listeneinträge in der Sidebar: In einem 24px hohen Element überspringt der Sprung von 8 auf 16 genau den Wert, der passen würde.
3. Kleine Schrift. Labels und Bildunterschriften bei 12–14px stehen näher an ihren Nachbarn als Fließtext. Der Abstand zwischen einem 12px-Label und seinem Eingabefeld wirkt bei 4px richtig; 8px sieht schon losgelöst aus.

Inhaltsreiche Seiten dagegen leben bequem auf 8ern — lange Texte, großzügige Abschnitte, wenige kompakte Bedienelemente. Wenn ein Produkt hauptsächlich Lesen ist, verdient sich die 4pt-Ebene ihren Platz vielleicht nie.

Warum brauchen kleine Abstände feinere Schritte?

Weil das Auge eine Lücke relativ zu den Elementen beurteilt, die sie trennt, nicht in absoluten Pixeln. Füge 4px in einem 24px hohen Chip hinzu, und die Komponente verändert sich sichtbar — die Lücke ist um einen Anteil gewachsen, den jeder erkennt. Füge dieselben 4px zu einem 64px-Abschnittsabstand hinzu, und kaum jemand bemerkt etwas. Die Auflösung, die du brauchst, ist proportional zum Abstand, den du setzt: feine Schritte aus der Nähe, grobe Schritte in der Ferne.

Das ist die Intuition hinter der Ebenen-Aufteilung. Kleine Abstände sind nicht wichtiger als große — sie sind der Bereich, in dem ein Unterschied von 4px noch eine sichtbare Entscheidung ist, also muss das Menü ihn genau dort anbieten.

Wie sieht die Aufteilung in der Praxis aus?

Hier ist ein dichtes Formular, Abstand für Abstand vermessen:

Lies die Wert-Spalte von oben nach unten: Die feinen Unterscheidungen ballen sich am kleinen Ende, und jeder Abstand auf Layout-Ebene ist ein 8er-Vielfaches. Diese Verteilung — dicht unten, spärlich oben — ist das, was eine nicht-lineare Abstands-Skala aus einer Formel erzeugt statt aus Fall-für-Fall-Entscheidungen.

Sieh dir das dichte Ende live an: öffne diese 4pt-freundliche Skala im Scale Composer — die Basis bleibt gleich, aber jedes Intervall der Skala wird in mehr Noten unterteilt, sodass das kleine Ende die Zwischenschritte gewinnt, die eine dichte UI braucht, während das obere Ende seine großen Layout-Sprünge behält.

Untergräbt es nicht den Sinn, wenn man 4er überall erlaubt?

Ja — das ist die Falle. Der Wert eines Rasters ist das kurze Menü: eine Handvoll Werte, aus denen alle wählen, sodass unabhängig gebaute Screens trotzdem verwandt herauskommen. Erlaube 4er-Vielfache überall, und das Menü unter 64px wächst von 8 auf 15 Optionen; benachbarte Screens sind sich wieder uneins über Abschnittsabstände — hier 20, dort 24 — und die Konsistenz, für die das Raster überhaupt da war, erodiert still.

Die Lösung kostet einen Satz in deiner Abstände-Dokumentation: Innere Abstände und Typografie dürfen 4er-Vielfache verwenden; Abstände zwischen Komponenten und Abschnitten verwenden 8er-Vielfache. Mit der schriftlich festgehaltenen Grenze wird ein 12px-Abschnittsabstand zu einer überprüfbaren Regelverletzung statt zu einer Geschmacksfrage, und die 4pt-Ebene fügt Präzision hinzu, ohne jede Entscheidung wieder aufzumachen, die das 8pt-Raster schon geschlossen hatte.

Teste die Layout-Ebene an echten Spalten

Die andere Hälfte der Antwort ist zu sehen, wie wenig die feinen Schritte auf Layout-Ebene ausmachen. Öffne die Raster-Ansicht mit einer geladenen 8pt-Layout-Skala und schalte die Stege und Ränder durch die Skala — 4 Spalten auf dem Handy, 8 auf dem Tablet, 12 auf dem Desktop. Einen Steg um einen Schritt zu verschieben, ist deutlich sichtbar; die 4px-Verfeinerungen, die sich ihren Platz in einem Chip verdient haben, wären hier draußen unsichtbar. Dieser Kontrast ist das ganze Argument dafür, die beiden Raster zu schichten, statt sich zwischen ihnen zu entscheiden.