Was ist Whitespace?
Im Webdesign meint Whitespace jeden Bereich, der bewusst frei gelassen wird — zwischen Textzeilen, zwischen Absätzen, um Bilder herum, zwischen Sektionen, an den Rändern. Manche Leute hören "Whitespace" und denken an verschwendeten Platz. In Wahrheit ist es das Gegenteil: Whitespace ist der Rahmen, der dem Inhalt erst seine Wirkung gibt. Ohne ihn drängelt sich alles, nichts hat Luft, nichts atmet.
Der Begriff stammt aus dem Druckdesign. Layouter sprechen seit Jahrhunderten vom "weißen Raum", weil das unbedruckte Papier weiß ist. Edward Tufte, Pionier des modernen Informationsdesigns, hat ganze Bücher darüber geschrieben, wie leerer Raum Daten erst lesbar macht. Im Web ist die Hintergrundfarbe oft etwas anderes — Beige, Grau, Mintgrün — aber das Prinzip bleibt: Whitespace ist alles, was kein Inhalt ist.
Whitespace funktioniert über die Gestalt-Prinzipien aus der Wahrnehmungspsychologie, allen voran das Gesetz der Nähe: Elemente, die dicht beieinander stehen, werden als zusammengehörig wahrgenommen, Elemente mit Luft dazwischen als getrennt. Genau deshalb sortiert Whitespace deine Seite, ohne dass du Rahmen brauchst. Eine Überschrift gehört zu dem Absatz darunter, weil sie nah dran ist — nicht, weil du eine Box drumherum gezogen hast.
Beispiel: Die Apple-Website ist berüchtigt für ihren großzügigen Whitespace. Eine Produktseite zeigt oft nur ein einzelnes Foto, eine Headline und drei Sätze — auf einem Bildschirm, der Platz für viel mehr hätte. Das wirkt nicht leer, sondern teuer. Und genau das ist die Botschaft: Hier hat jemand das Selbstvertrauen, weniger zu zeigen.
Aktiver vs. passiver Whitespace
Designer unterscheiden zwei Arten — und beide sind wichtig.
| Typ | Was er ist | Beispiel |
|---|---|---|
| Passiver Whitespace | Kleine Abstände innerhalb eines Elements oder zwischen direkten Nachbarn | Zeilenabstand, Wortabstände, Padding in Buttons |
| Aktiver Whitespace | Große, bewusst gesetzte Lücken zwischen Sektionen oder um zentrale Elemente | Riesiger Rand um eine Headline, leerer Abstand zwischen Hero und nächster Sektion |
Passiver Whitespace ist die Grundhygiene. Wenn er fehlt, wird Text unlesbar und Buttons werden unklickbar. Aktiver Whitespace ist die Kunst. Er führt das Auge, schafft Hierarchie und macht aus einer Website etwas, das wertvoll wirkt statt billig.
Warum ist Whitespace für deine Website wichtig?
Whitespace macht drei Dinge gleichzeitig: Er erhöht Lesbarkeit, schafft Hierarchie und vermittelt Wertigkeit.
Lesbarkeit: Ein Absatz mit zu engem Zeilenabstand ist anstrengend zu lesen. Eine Liste ohne Luft zwischen den Punkten verschwimmt. Untersuchungen zur Lesetiefe zeigen seit Jahren denselben Effekt — je besser der Text atmet, desto länger wird er gelesen. Auf einer Website heißt das: höhere Verweildauer, besseres Ranking, mehr Conversion Rate.
Hierarchie: Ohne Whitespace ist alles gleich wichtig — und damit nichts. Mit Whitespace zeigst du, was zentral ist (großer Abstand drumherum) und was nebensächlich (eng gepackt). Eine Hero Section wirkt erst dann wie ein Hauptelement, wenn um sie herum genug Luft ist.
Wertigkeit: Premium-Marken arbeiten fast immer mit viel Whitespace. Discounter arbeiten mit dichten Layouts, in denen jedes Pixel mit Information vollgeknallt ist. Beides ist Strategie. Wenn du als Anwalt, Architekt, Berater oder Steuerexperte wahrgenommen werden willst, ist großzügiger Whitespace eines deiner stärksten Werkzeuge.
Konkretes Beispiel: Eine Architektin lässt ihre Website überarbeiten. Vorher waren alle Sektionen direkt aneinandergeklebt — Hero, Leistungen, Projekte, Kontakt — alles gestaucht. Nach der Überarbeitung sind die Sektionen jeweils 200 Pixel voneinander getrennt, Headlines stehen auf großen weißen Flächen. Anfragen über die Seite ändern sich kaum in der Anzahl, aber massiv in der Qualität: deutlich mehr Premium-Anfragen, weniger Preisdrücker.
Wie viel Whitespace ist richtig?
Es gibt keine harte Regel, aber ein paar Daumenwerte, die fast immer funktionieren:
- Zeilenabstand bei Fließtext: 1.5 bis 1.7 mal die Schriftgröße. Wer enger setzt, macht es anstrengend.
- Abstand zwischen Sektionen: mindestens 80 bis 120 Pixel auf dem Desktop. Großzügiger oft besser.
- Rand um eine Headline: mindestens die Höhe der Headline selbst.
- Padding in Buttons: mindestens das Doppelte der Schrifthöhe als Höhe.
- Rand am Bildschirmrand (Container): auf Mobile mindestens 16 Pixel, auf Desktop oft 60 bis 120 Pixel.
Das sind Startwerte. Wer einmal angefangen hat, mit Whitespace zu arbeiten, entwickelt schnell ein Gefühl, wann es zu eng oder zu weit ist. Faustregel: Wenn du dich fragst, "ob es vielleicht zu viel Luft hat" — ist es wahrscheinlich genau richtig.
Häufige Fehler beim Umgang mit Whitespace
Alles in Boxen packen. Wer jede Sektion in eine Card mit Rahmen, Schatten und Hintergrundfarbe steckt, zerstört Whitespace. Offene Layouts mit echten Abständen wirken hochwertiger und ruhiger.
Inhalte stauchen, weil "leerer Platz Geldverschwendung ist". Klassischer Reflex bei Kunden, die noch nicht wissen, wie Webdesign wirkt. Mehr Inhalte sind nicht gleich mehr Wirkung — meistens das Gegenteil.
Mobile vergessen. Auf dem Smartphone funktioniert das Whitespace-Prinzip anders, aber es ist nicht egal. Wer am Handy alles bis an den Rand drückt, wirkt kleinlich.
Inkonsistente Abstände. Mal 40 Pixel, mal 73, mal 96 — das wirkt unbewusst chaotisch. Ein Spacing-System mit drei bis fünf festen Werten (z.B. 8, 16, 32, 64, 128) löst das.
Whitespace nur als "Lücke" sehen. Whitespace ist aktives Design. Es ist nicht das, was übrig bleibt — es ist das, was du gestaltest.