Was ist das 8pt-Raster?

Eine Abstands-Konvention, bei der jede Distanz und Größe in einer Oberfläche ein Vielfaches von 8 Pixeln ist. Sie funktioniert, weil sich 8 sauber teilen lässt, gängige Bildschirmdichte-Skalierungen (1×, 1,5×, 2×) mit ganzen Pixeln übersteht und Teams ein kurzes Menü an Werten gibt, um das herum sie sich koordinieren.

Sollte ich ein 4pt- oder 8pt-Raster verwenden?

Meist beides, als Ebenen — 8er-Vielfache für Abstände auf Layout-Ebene zwischen Komponenten und Abschnitten, 4er-Vielfache für feine innere Abstände wie Icon-Padding und Label-Lücken. Datendichte Produkte stützen sich stärker auf die 4pt-Ebene.

Müssen alle Werte Vielfache von 8 sein?

Nein. Ein-Pixel-Rahmen, optische Korrekturen und Text-Grundlinien sind legitime Ausnahmen — das Raster reduziert Entscheidungen, es ist kein Gesetz. Entscheidend ist, dass Ausnahmen sichtbare Entscheidungen sind und keine schleichende Abweichung.

Ist das 8pt-Raster dasselbe wie ein Grundlinienraster?

Nein — das 8pt-Raster quantisiert den Raum (wie weit Dinge voneinander entfernt sind), ein Grundlinienraster quantisiert den Text-Rhythmus (auf welchen Linien der Text sitzt). Sie lassen sich gut kombinieren, wenn die Grundlinie als Hälfte der Grundschriftgröße abgeleitet wird, sodass beide dasselbe Quantum teilen.

Wie werden aus Abstandswerten Tokens?

Jede Stufe der Skala bekommt einen Namen (space-1 … space-8 oder xs–3xl) und wird als CSS Custom Properties, Tailwind oder Figma Variables exportiert — sodass Design-Dateien und Code denselben endlichen Satz an Distanzen lesen.

Abstandssysteme & das 8pt-Raster: Der Praxisleitfaden

Q: Wie viele Abstands-Stufen braucht ein System?

Etwa 6 bis 10 decken viele Produkte ab. Mehr Stufen deuten meist darauf hin, dass die Skala linear ist (8, 16, 24, 32 …) — eine nicht-lineare Skala, dicht am kleinen Ende und spärlich am großen, erledigt dieselbe Aufgabe mit weniger Werten.

Ein Abstandssystem ist ein kurzes, geordnetes Menü erlaubter Distanzen — statt jeden Rand und jede Lücke einzeln zu wählen, wählst du aus sechs bis zehn Werten, die das ganze Team teilt. Das 8-Punkt-Raster ist die bekannteste Ausprägung dieser Idee; eine Abstands-Skala ist ihre stärkere, nicht-lineare Form. Dieser Hub sammelt unsere Leitfäden zu beidem; der schnellste Einstieg ist, eine live erzeugte Abstandsskala anzusehen.

Warum quantisierte Abstände funktionieren

Der Wert liegt nicht in Pixel-Mystik — er liegt in Entscheidungs-Ökonomie und Kohärenz. Wenn jede Distanz aus einem kurzen Menü stammt, wirken Screens, die von verschiedenen Leuten in verschiedenen Monaten gebaut wurden, immer noch verwandt, und „sollte diese Lücke 12 oder 14 sein?” ist keine Diskussion mehr. Auch das Auge belohnt es: weniger unterschiedliche Abstands-Beziehungen bedeuten weniger visuelles Rauschen, das man in Einklang bringen muss.

Was ist das 8-Punkt-Raster? erklärt das bekannteste Menü und warum sich gerade 8 durchgesetzt hat: Es teilt sauber und landet bei den gängigen Dichte-Skalierungen auf ganzen Pixeln. Wenn Komponenten feinere innere Distanzen brauchen — Icon-Padding, Label-Lücken — übernimmt eine Halbschritt-Ebene; 4pt vs. 8pt-Raster behandelt, wann welche Ebene gilt und wie die beiden koexistieren, ohne zu „jedes Vielfache von 4 ist erlaubt” zu werden.

Das Raster ist der Spezialfall; die Skala ist die Idee

Vielfache von 8 bilden ein lineares Menü, und lineare Schritte sind an beiden Enden falsch — kleine Lücken brauchen feine Unterschiede, große nicht. Eine Abstandsskala aus einer Formel (dieselbe Basis-und-Ratio-Progression, die auch eine Schriftgrößenskala antreiben kann) liefert dir nicht-lineare Schritte: 8, 11, 16, 23, 32, 45, 64. Dicht, wo Präzision zählt, spärlich, wo nicht, jeder Schritt durch eine Regel begründet.

Wie viele Schritte dieses Menü fassen sollte, ist eine eigene Entscheidung — Wie viele Abstands-Stufen braucht ein System? plädiert für sechs bis zehn, und Was ist eine Abstandsskala? baut die nicht-lineare Version von Grund auf. Dieselbe Formel ist auch das, worum Scale Composer herum gebaut ist: Eine Basis und Ratio erzeugen die Schriftgrößen, die Abstands-Stufen und die Raster-Maße gemeinsam, sodass das Ändern einer Zahl alle drei auf einmal neu abstimmt.

Text-Rhythmus ist auch Abstand

Die Hälfte der vertikalen Distanzen auf einer Seite steckt im Text — Zeilenhöhen, Absatz-Lücken, Überschriften-Ränder. Eine Grundlinien-Einheit von der Hälfte der Grundschriftgröße abzuleiten (8px bei 16px Grundschrift) bringt Text-Rhythmus und Layout-Abstände auf dasselbe Quantum, was der praktische Weg ist, das Gefühl „alles richtet sich aus” zu bekommen, ohne gegen die CSS-Line-Box-Mechanik zu kämpfen. Grundlinienraster vs. 8pt-Raster zieht die Grenze zwischen den beiden Arten von Rhythmus, und Vertikale Abstände zwischen Textblöcken wendet das gemeinsame Quantum auf Absatz-Lücken und Überschriften-Ränder an — die Distanzen, die am ehesten driften, wenn sie pro Element gesetzt werden.

Wo Abstände auf den Rest des Systems treffen

Stufen steuern erst dann etwas, wenn sie benannt und ausgeliefert sind. Abstands-Tokens behandelt Benennung und Stufenzahl, und der design tokens-Hub behandelt, wie diese Namen aus einer Quelldatei nach CSS, Tailwind und Figma reisen. Im Layout setzt dieselbe Skala die Distanzen zwischen Spalten — Stege und Lücken verbindet sie mit dem Spaltensystem, das im Layout-Raster-Hub beschrieben wird. Zwei Leitfäden behandeln die ergonomische Untergrenze, die keine Skala unterschreiten darf: Touch Targets dazu, warum 44px zählen, und Density Modes dazu, kompakte und großzügige Oberflächen aus demselben Satz an Tokens zu bedienen.

Leitfäden in diesem Hub

4pt- vs. 8pt-Raster: Wann welches?
4pt- vs. 8pt-Raster ist eine Frage der Ebenen, keine Entweder-oder-Wahl: 8px-Vielfache für Layout-Abstände, 4px-Vielfache für feine innere Abstände und Typografie. Lerne, wo jedes hingehört.
Abstände-Tokens: Benennung und Stufen
Abstände-Tokens verwandeln eine Abstände-Skala in ein gemeinsames Vokabular. Vergleiche numerische und T-Shirt-Benennung, ergänze semantische Aliase und exportiere nach CSS, Tailwind und Figma.
Berührungsziele: Warum 44px zählen
Berührungsziel-Größe erklärt: Apple nennt 44pt, Material 48dp, WCAG 2.2 fordert 24px. Sieh, wie Padding aus einem 24px-Icon ein 48px-Ziel macht und warum Abstände zählen.
Border-Radius-Skalen
Eine Border-Radius-Skala ist ein kurzes Menü von Eckenwerten, das sich jede Komponente teilt — plus die Regel für verschachtelte Ecken (innen = außen minus Abstand), die die meisten Leitfäden auslassen.
Figma- und Code-Abstände synchron halten
Figma-Abstands-Tokens driften vom Code weg, wenn jede Seite ihre eigene Liste pflegt. Exportiere eine Skala als Figma Variables und CSS, damit Design und Code eine Quelle lesen.
Grundlinienraster vs. 8pt-Raster: der Unterschied
Ein Grundlinienraster quantisiert den Textrhythmus; ein 8pt-Raster quantisiert den Raum. Lerne, wie sie sich unterscheiden, wie sie ein gemeinsames 8px-Quantum teilen und was im Web Bestand hat.
Icon-Größen auf dem Raster (16, 20, 24)
Standard-Icon-Größen — 16, 20, 24, 32 — sind Bounding-Boxen auf dem 4px-Raster. Erfahre, warum gleich große Icons unterschiedlich wirken können und wie du Icons mit Text paarst.
Kompakt, komfortabel, großzügig: Dichtemodi
UI-Dichtemodi — kompakt, komfortabel, großzügig — sind ein Layout, aufgelöst gegen unterschiedliche Abstände-Stufen. Wie Alias-Neuzuordnung funktioniert, mit Tabellenzeilen-Rechnung.
Margin vs. Padding: Systemregeln
Margin vs. Padding: Padding ist der Raum innerhalb des Rahmens, Margin außerhalb — und die wichtigere Systemregel: Komponenten besitzen ihr Padding, Layouts besitzen die Abstände.
Stege und Gaps: Abstände zwischen Spalten
Ein Steg ist der Abstand zwischen Spalten in einem Raster — in CSS heißt er gap. Wie breit Stege sein sollten, wie sie sich zu Rändern und Spalten verhalten, mit durchgerechneter Breakpoint-Mathematik.
Vertikale Abstände zwischen Textblöcken
Wie viel Abstand zwischen Absätzen und Überschriften? Grundlinien-Vielfache, asymmetrische Überschriften-Ränder, engere Listen — ein durchgerechneter Text-Stack aus einer Skala.
Was ist das 8-Punkt-Raster?
Das 8-Punkt-Raster macht jeden Abstand und jede Größe in einer UI zu einem Vielfachen von 8px. Erfahre, warum 8 funktioniert, wann du 4pt-Halbschritte einsetzt und wie daraus eine Abstands-Skala wird.
Was ist eine Abstandsskala?
Eine Abstandsskala ist ein kurzer, geordneter Satz erlaubter Abstände. Erfahre, warum gute Skalen nichtlinear sind, wie drei Zahlen eine erzeugen und wie viele Stufen du brauchst.
Wie viele Abstandsstufen braucht ein System?
Wie viele Abstandswerte braucht ein System? Sechs bis zehn, aufgeteilt nach Zone — Mikro, Mitte, Makro — plus ein Audit, das zeigt, warum dein CSS wahrscheinlich vierzig hat.

Probier es an echten Spalten aus

Abstände werden konkret, sobald Layout ins Spiel kommt: öffne die Raster-Ansicht — 4 Spalten auf dem Handy, 8 auf dem Tablet, 12 auf dem Desktop — und schalte die Stege und Ränder mit den Pfeiltasten durch die Skala. Einen Steg Schritt für Schritt wandern zu sehen zeigt schneller als jede Definition, wofür ein Abstandssystem da ist.