UI White Space — der leere Bereich in einer Oberfläche — wird oft für "Platz, der gefüllt werden muss" gehalten, dabei wird er in gutem Design genauso bewusst platziert wie der Inhalt selbst. Dieser Negativraum ist die Atemluft zwischen den Elementen und lässt das Auge Text, einen Button oder ein Bild mühelos verfolgen. In diesem Artikel erkläre ich, wie White Space die Lesbarkeit und die visuelle Hierarchie stärkt, welche praktischen Regeln dahinterstecken und welche Fehler am häufigsten vorkommen — jeweils mit konkreten Beispielen.
Was White Space ist und warum er nicht "leer" ist
White Space ist der ungefüllte Bereich um und zwischen Elementen. Er muss nicht weiß sein; egal welche Hintergrundfarbe (auch dunkle Themes), dieser Bereich heißt Negativraum. Zwei Unterscheidungen sind hilfreich:
- Makro-White-Space: die größeren Abstände zwischen Blöcken — Sektionen, Karten und Ränder (Margins). Er bestimmt die Großzügigkeit und den Rhythmus der Seite.
- Mikro-White-Space: kleine Abstände wie Zeilenabstand, Buchstabenabstand, der Abstand zwischen einem Icon und seinem Label oder das Padding innerhalb eines Buttons. Er bestimmt den Lesefluss und die wahrgenommene Qualität.
White Space ist keine "Verschwendung"; im Gegenteil, er senkt die kognitive Last des Nutzers. Auf einem Bildschirm, auf dem jedes Pixel gefüllt ist, weiß das Auge nicht, wohin es schauen soll. White Space ist ein stilles Werkzeug, das die Aufmerksamkeit lenkt.
Wie UI White Space die Lesbarkeit verbessert
Lesbarkeit hängt stark vom Mikro-White-Space ab. Bei Text stechen drei Maße hervor:
- Zeilenhöhe (line-height): für Fließtext liest sich etwa das 1,4- bis 1,6-Fache der Schriftgröße angenehm. Zu eng gesetzte Zeilen ermüden das Auge.
- Zeilenlänge: Ziel sind etwa 50 bis 75 Zeichen pro Zeile. Sehr breite Absätze erschweren es dem Auge, den Anfang der nächsten Zeile zu finden.
- Abstand um Absätze und Überschriften: ein ausgewogener Abstand über und unter einer Überschrift verbindet sie visuell mit dem Inhalt, zu dem sie gehört.
Ein einfaches CSS-Beispiel liefert einen vernünftigen Ausgangspunkt für Fließtext:
.prose p {
max-width: 65ch; /* Zeilenlänge begrenzen */
line-height: 1.6; /* angenehmer Zeilenabstand */
margin-bottom: 1rem; /* Atemluft zwischen Absätzen */
}Die Einheit 65ch bedeutet etwa 65 Zeichen Breite in der aktuellen Schrift und skaliert die Zeilenlänge mit dem Inhalt.
White Space und visuelle Hierarchie
Die visuelle Hierarchie bestimmt, was der Nutzer zuerst liest und was danach kommt. White Space ist hier eines der stärksten Werkzeuge, denn nach dem Prinzip der Nähe wirken nah beieinander platzierte Elemente verwandt und weit entfernte getrennt. Wenn du ein Formular-Label näher an sein Eingabefeld und weiter weg vom nächsten Feld rückst, schaffst du Gruppierung, ohne eine einzige Linie zu zeichnen.
Eine praktische Regel: der Abstand zwischen verwandten Elementen sollte kleiner sein als der Abstand zwischen Gruppen. Innerhalb einer Karte stehen Titel, Beschreibung und Button nah beieinander, während der Abstand zwischen den Karten größer ist. Solche Konsistenz beschleunigt spürbar, wie schnell das Auge die Seite überfliegt.
Ein konsistentes Spacing-System aufbauen
Zufällig gewählte Padding- und Margin-Werte lassen eine Oberfläche unordentlich wirken. Professionelle Designs stützen sich meist auf eine Spacing-Skala — zum Beispiel ein System auf 4-px-Basis: 4, 8, 12, 16, 24, 32, 48, 64. Jeder Abstand wird aus dieser Menge gewählt. Das gibt visuellen Rhythmus und nimmt das Rätselraten aus der Entwicklung.
Ein solches System lässt sich leicht mit CSS-Variablen aufsetzen:
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 40px;
}
.card { padding: var(--space-4); }
.card + .card { margin-top: var(--space-5); }Wenn du Figma nutzt, kannst du dieselben Werte als "Spacing"-Variablen oder als Auto-Layout-Abstände definieren, um Design und Code aufeinander abzustimmen. Die "Gap"-Einstellung im Auto Layout lässt dich die Abstände von Karten und Listenelementen von einer Stelle aus steuern.
Häufige Fehler
- White Space als "verlorene" Fläche sehen: der Drang, jede Ecke mit Inhalt zu füllen, ist der häufigste Fehler. Dichte bedeutet nicht immer Wert.
- Ungleiches Padding: wenn der Innenabstand einer Karte links 16 und rechts 12 beträgt, fällt das dem Auge auf; Symmetrie wirkt vertrauenswürdig.
- Zu kleine Touch-Targets: etwa 44 bis 48 px für antippbare Elemente auf Mobilgeräten zu lassen, zählt sowohl für das Spacing als auch für die Barrierefreiheit.
- Inkonsistenter vertikaler Rhythmus: wenn der Abstand zwischen Überschrift, Absatz und Überschrift in jeder Sektion anders ist, wirkt die Seite "wackelig".
Eine schnelle Checkliste
- Liegt die Zeilenlänge des Fließtexts zwischen 50 und 75 Zeichen?
- Liegt die Zeilenhöhe bei etwa 1,4 bis 1,6?
- Stehen verwandte Elemente näher beieinander als der Abstand zwischen Gruppen?
- Stammen alle Abstände aus einer einzigen Spacing-Skala?
- Sind die Touch-Targets auf Mobilgeräten breit genug?
Häufige Fragen
Bedeutet White Space nur einen weißen Hintergrund?
Nein. Der Begriff "White Space" ist historisch; er bezeichnet eigentlich den leeren Bereich zwischen Elementen. Der Hintergrund kann dunkel, farbig oder gemustert sein — die Funktion des Raums ändert sich nicht. Deshalb spricht man auch von Negativraum.
Lässt zu viel White Space den Inhalt nicht "dünn" wirken?
Richtig eingesetzt ist das Gegenteil der Fall. Bewusster White Space gibt dem Inhalt Wert und Fokus; die Oberflächen von Premium-Marken nutzen oft reichlich davon. Entscheidend ist, dass der Raum konsistent und gezielt ist, nicht willkürlich.
Wo soll ich mit dem Skalieren von Abständen beginnen?
Beginne mit einer Spacing-Skala auf 4- oder 8-px-Basis und wähle alle Padding-/Margin-Werte aus dieser Menge. Ein aus einer einzigen Quelle verwaltetes System bietet sowohl Konsistenz als auch leichtere Wartung.
Wirkt deine Oberfläche überladen und die Botschaft kommt nicht an? Ich kann mit einem UI-Review helfen, das White Space, Typografie und Hierarchie gemeinsam angeht. Um über dein Projekt zu sprechen, nimm Kontakt mit mir auf.