Weißraum im Webdesign: Warum Abstand die Wirkung trägt

Zwischen einer Überschrift und dem Text darunter liegt ein Abstand. Zwischen zwei Abschnitten ein größerer. Am Rand der Seite noch einmal einer. Diese Flächen bleiben leer und werden trotzdem gelesen, denn sie sagen dem Auge, was zusammengehört und wo etwas Neues beginnt.

Weißraum ist deshalb ein Gestaltungsmittel wie Farbe oder Typografie. Er lässt sich planen, begründen und überprüfen. Dieser Beitrag zeigt, welche Arten von Abstand es gibt, wie ein Raster daraus ein Gerüst macht und mit welcher einfachen Skala Sie zu einem geordneten Layout kommen.

Zwei Arten von Weißraum

Der große Weißraum steht zwischen den Bausteinen einer Seite. Er trennt Abschnitte voneinander, hält den Rand frei und gibt einzelnen Elementen Luft. Auf ihn fällt der erste Eindruck, denn er bestimmt, ob eine Seite gedrängt oder großzügig wirkt.

Der kleine Weißraum sitzt innerhalb der Elemente. Er umfasst den Abstand zwischen den Zeilen eines Absatzes, den Raum zwischen Buchstaben, die Innenfläche eines Knopfes und die Lücke zwischen zwei Punkten einer Liste. Diese Abstände fallen einzeln kaum auf, entscheiden aber darüber, wie mühelos sich ein Text liest.

Beide Arten wirken zusammen. Ein großzügiges Layout mit gedrängten Textzeilen bleibt anstrengend, ebenso ein luftiger Absatz in einer überfüllten Seite. Prüfen Sie daher auf beiden Ebenen, einmal aus der Entfernung und einmal beim Lesen.

Übrigens meint Weißraum jede ungenutzte Fläche, unabhängig von ihrer Farbe. Der Begriff stammt aus dem Druck, wo das Papier tatsächlich weiß war. Auf einer dunklen Website übernimmt der dunkle Hintergrund dieselbe Aufgabe.

Warum Nähe Bedeutung stiftet

Die Wahrnehmung folgt einer einfachen Regel: Was nah beieinander steht, gehört zusammen. Was weiter auseinander liegt, wird als getrennt gelesen. Diese Beobachtung stammt aus der Gestaltpsychologie und lässt sich auf jeder Seite überprüfen.

Daraus folgt eine praktische Regel für Beschriftungen. Steht die Bezeichnung eines Formularfelds gleich weit vom eigenen wie vom nächsten Feld entfernt, muss der Betrachter raten, wozu sie gehört. Rückt sie näher an ihr Feld, verschwindet die Frage von selbst. Dasselbe gilt für Überschriften, Bildunterschriften und Preisangaben.

Abstände schaffen damit Hierarchie, ganz ohne Linien und Rahmen. Ein größerer Sprung vor einer neuen Überschrift signalisiert einen Themenwechsel deutlicher als jede Trennlinie. Wo Abstände diese Arbeit übernehmen, kommt ein Layout mit erstaunlich wenigen Gestaltungselementen aus.

Das Raster als Gerüst

Ein Layout-Raster teilt die Breite einer Seite in gleich große Spalten mit gleichmäßigen Zwischenräumen. Inhalte richten sich an diesen Spalten aus, statt frei platziert zu werden. Verbreitet sind zwölf Spalten, weil sich die Zahl durch zwei, drei, vier und sechs teilen lässt. Damit entstehen halbe, drittel und viertel Breiten aus demselben Gerüst.

Der Gewinn zeigt sich beim Wiedererkennen. Wenn Text, Bilder und Karten immer an denselben Kanten beginnen, entsteht eine unsichtbare Ordnung, der das Auge folgt. Genau diese Ordnung fehlt Seiten, die im Einzelnen sauber gestaltet sind und trotzdem unruhig wirken.

Ein Raster gibt außerdem Antwort auf die Frage, wie breit ein Element sein darf. Statt eine Zahl zu schätzen, wählen Sie eine Anzahl Spalten. Beim Wechsel auf kleinere Bildschirme bleibt die Entscheidung nachvollziehbar, weil aus vier Spalten zwei werden und aus zwei eine.

Eine Abstandsskala statt Zufallswerte

In vielen Projekten entstehen Abstände nach Gefühl. Hier sind es 14 Pixel, dort 18, an anderer Stelle 23. Einzeln wirkt jeder Wert vertretbar, in der Summe entsteht Unruhe, deren Ursache sich schwer benennen lässt.

Abhilfe schafft eine feste Skala aus Vielfachen einer Grundeinheit, meist vier oder acht Pixel. Erlaubt sind dann etwa 4, 8, 16, 24, 32, 48 und 64. Für jede Situation wählen Sie den nächsten passenden Wert aus dieser Reihe. Weil die Abstände dadurch in einem festen Verhältnis zueinander stehen, wirkt das Ergebnis stimmig, selbst wenn die Werte unbemerkt bleiben.

Die Skala hilft zusätzlich bei der Hierarchie. Der Abstand über einer Überschrift fällt größer aus als der darunter, weil die Überschrift zum folgenden Text gehört. Mit festen Stufen lässt sich dieser Unterschied sauber abbilden, etwa 48 darüber und 16 darunter.

Zeilenlänge und Textblöcke

Beim Fließtext entscheidet die Zeilenlänge über die Anstrengung. Als angenehm gelten etwa 60 bis 75 Zeichen je Zeile. Werden die Zeilen deutlich länger, findet das Auge beim Umbruch schwerer den Anschluss, und der Leser rutscht in dieselbe Zeile zurück.

Auf breiten Bildschirmen bedeutet das eine Begrenzung der Textbreite, unabhängig davon, wie viel Platz zur Verfügung steht. Der Rest der Fläche bleibt frei oder nimmt Elemente auf, die den Text begleiten. Genau deshalb laufen Artikel auf gut gestalteten Seiten in einer schmalen Spalte, während Bilder und Tabellen breiter ausfallen dürfen.

Der Zeilenabstand folgt derselben Überlegung. Etwa das Anderthalbfache der Schriftgröße hat sich für Fließtext bewährt. Überschriften vertragen weniger, weil sie kurz sind und als Block gelesen werden. Wie stark diese Werte auf die Usability einzahlen, zeigt sich, sobald jemand eine Seite länger als ein paar Sekunden nutzt.

Wo es meist hakt

Der häufigste Fehler sind gleich große Abstände zwischen allem. Eine Seite, auf der jedes Element denselben Abstand zum nächsten hat, wirkt zwar aufgeräumt, lässt aber offen, was zusammengehört. Hierarchie entsteht erst durch Unterschiede.

Ein zweiter Fehler betrifft den Rand. Wo Inhalte bis dicht an die Kante des Bildschirms laufen, wirkt eine Seite gedrängt, besonders auf dem Telefon. Ein Rand von mindestens 16 bis 24 Pixel gibt dem Inhalt Halt und erleichtert das Bedienen mit dem Daumen.

Der dritte Fehler entsteht beim Nachrüsten. Wird eine Seite über Monate um Bausteine ergänzt, die jeweils eigene Abstände mitbringen, franst das Layout aus. Eine früh festgelegte Skala verhindert das, weil neue Elemente sich in ein bestehendes System einfügen.

Schließlich verdient das Nachladen Beachtung. Elemente, die erst später erscheinen und den bereits sichtbaren Inhalt verschieben, zerstören jede sorgfältig gebaute Ordnung. Diese Verschiebung misst Google als Cumulative Layout Shift, und feste Platzhalter für Bilder und Anzeigen halten sie klein.

So gehen Sie vor

Legen Sie zuerst die Grundeinheit fest, meist acht Pixel, und leiten Sie die Skala daraus ab. Halten Sie schriftlich fest, welche Stufe wofür gilt, etwa 64 zwischen Sektionen, 32 zwischen Blöcken, 16 innerhalb eines Blocks. Diese wenigen Zeilen ersparen später viele Einzelfragen.

Wählen Sie anschließend das Raster und die maximale Textbreite. Beides zusammen legt fest, wie Ihre Seite auf großen Bildschirmen atmet. Prüfen Sie beides früh mit echtem Text, denn Platzhalter geben die tatsächliche Länge nur ungefähr wieder.

Sehen Sie sich das Ergebnis zum Schluss mit zusammengekniffenen Augen an, sodass die Schrift unleserlich wird. Was dann noch als Gruppe erkennbar ist, gehört auch inhaltlich zusammen. Fällt die Seite dabei in gleichförmige Streifen auseinander, fehlt Hierarchie. Dieser Test dauert Sekunden und deckt mehr auf als langes Vermessen einzelner Werte.

Weißraum-Checkliste

Fazit

Weißraum kostet Fläche und zahlt sie mit Verständlichkeit zurück. Abstände zeigen, was zusammengehört, ein Raster gibt der Seite ein Gerüst, und eine feste Skala hält beides über Jahre stabil. Der Aufwand dafür fällt einmalig an, meist an einem Nachmittag.

Beginnen Sie mit einer einzigen Seite Ihres Auftritts und messen Sie nach, welche Abstände dort tatsächlich verwendet werden. Die Liste fällt fast immer länger aus als erwartet, und schon das Zusammenstreichen auf fünf Werte verändert die Wirkung spürbar. Zusammen mit einer durchdachten Typografie und einem klaren Farbsystem entsteht daraus ein Auftritt, der geordnet wirkt und dadurch Vertrauen schafft.