Abstände und Weißraum: zum Umgang mit Text


Auch wenn es im ersten Augenblick ein bisschen merkwürdig erscheint, die freie Fläche spielt in der Gestaltung mindestens die gleiche, wenn nicht sogar eine größere Rolle als die eigentlichen Inhalte. Das gilt sowohl für das Print- als auch das Webdesign. Allerdings führt der flexible Seitenaufbau im Webdesign zu einigen Besonderheiten, auf die wir Sie hier aufmerksam machen wollen.

Ein typischer Anfängerfehler in der Gestaltung ist es, die Seite möglichst gleichmäßig und vollständig mit Inhalt füllen zu wollen. Das Ergebnis sieht in der Regel nicht nur langweilig aus, sondern bietet dem Betrachter auch keinerlei Orientierung beim Lesen und Aufnehmen dessen, was Sie eigentlich transportieren wollen: Ihre Inhalte. Sogenannter Weißraum, also Platz zwischen den Layoutelementen, sorgt nicht nur für den nötigen Kontrast in der Gestaltung, sondern vermittelt dem Betrachter auch einen Eindruck davon, welche Inhalte zusammen gehören und welche nicht.


Text nimmt in diesem Zusammenhang eine Sonderrolle ein. Zwar besteht dieser aus Buchstaben, Wörtern und Zeilen, wird im Layout aber als Fläche wahrgenommen. Damit diese Flächen entstehen können, ist abhängig von Schriftgröße und Zeilenabstand ausreichend Platz um den Text nötig. Also kurz, je größer die Schrift und der Abstand zwischen den Zeilen, desto größer müssen auch die Abstände zum nächsten Layoutelement sein.

Zusätzlich müssen Sie einen zweiten Aspekt im Blick behalten: Werden die Textzeilen zu lang, kann man diesen nicht mehr folgen und das Lesen wird mühsam. Und genau hier liegt die Herausforderung im Webdesign. Achten Sie immer darauf, was passiert, wenn der Betrachter einen großen Bildschirm besitzt und das Browserfenster in voller Größe öffnet. Bleiben die Zusammenhänge erhalten? Sind Ihre Texte noch lesbar und die Zeilen werden nicht zu lang?

Dem letztgenannten Problem begegnet man im Print gerne mit einem mehrspaltigen Layout. Im Web lässt sich dieses Konzept für Text aber nicht wirklich komfortabel umsetzen. Zwar besteht technisch in modernen Browsern durchaus die Möglichkeit, einen Textfluss über mehrere Spalten zu gestalten, aber die schwer vorhersehbare Fenstergröße legt diesem Konzept immer wieder Steine in den Weg.

Um sehr lange Textzeilen zu vermeiden, wird deswegen gerne mit festen Layoutbreiten oder zumindest einer Begrenzung über das CSS-Tag max-width gearbeitet. Noch eleganter sind sogenannte responsive Layouts, die über das CSS-Tag @media abhängig von der Browserbreite die Gestaltung ändern. Also zum Beispiel für eine schmale Ausgabe wird ein zweispaltiges und für größere Breiten ein vierspaltiges Seitenraster verwendet.



Noch ein Tipp zum Schluss: Haben Sie keine Angst vor freien Flächen in Ihrer Gestaltung. Solche Flächen sorgen nicht nur für ein klares, lockeres und professionelles Bild, sondern eignen sich meistens auch dafür, Veränderungen in der Browserbreite in gewissen Grenzen abzufangen.