Rastersysteme: Der Grundstein für ansprechendes und strukturiertes Design

Manche Gestaltungsregeln besitzen eine universelle Gültigkeit. Unabhängig vom Medium geben sie unserem Design einen Rahmen und helfen uns Bild und Schrift sinnvoll zu strukturieren. Das Raster stellt als grundlegendes Hilfsmittel eine Konstante dar, die wir in Webseiten, Zeitungen, Apps oder Plakatwerbung universell wiederfinden.

Josef Müller-Brockmann hat mit "Raster Systeme für die visuelle Gestaltung" bereits in den frühen 1980er Jahren ein Buch veröffentlicht, das sich mit dem korrekten Setzen eines Rasters auseinandersetzt. Während der Fokus hier noch bei Druckerzeugnissen lag, ist es erstaunlich, wie viele der Regeln auch in den neuen Medien Verwendung finden.

Auch wenn responsiv anpassbare Designelemente nicht die gleiche strenge Umsetzung mancher Regeln zulassen, wie sie Müller-Brockmann für gedruckte Medien vorgibt, ist es doch immer wichtig, die zugrunde liegenden Regeln zu verstehen, bevor wir sie an unsere Bedürfnisse anpassen können.

Das typografische Raster

Das Raster unterteilt eine Fläche gitterförmig in kleinere Felder. Es gibt unserem Text Form und ermöglicht eine ästhetische Verwendung von Fotografien, Illustrationen und Farbe.

Die Höhe der Felder richten wir an der gewählten Anzahl von Textzeilen aus, die Breite der Felder entspricht der Breite unserer gewünschten Spalte. In der Regel wird laut Josef Müller-Brockmann mit 7-10 Wörtern je Spalte kalkuliert. Da unsere kleinsten Abbildungen genau einem Feld entsprechen, müssen wir auch diesen Faktor in die Bestimmung unserer Spaltenbreite einbeziehen.

Zwischen die Felder werden Zwischenräume platziert, die die Verwendung verschiedener Designelemente vereinfachen. Sie werden als Weißraum zwischen Bildern verwendet und ermöglichen die Platzierung einer Legende unter der Abbildung. Der vertikale Abstand zwischen Feldern beträgt 1,2 oder mehr Textzeilen.

Zeilendurchschuss

Ein gut gewählter Zeilendurchschuss trägt zu einem offenen und leichten Schriftbild bei. Ein optimaler vertikaler Abstand von Zeile zu Zeile bietet dem Auge Orientierung und verbessert den Leserhythmus. Das Gelesene wird so leichter aufgenommen und im Gedächtnis gespeichert.

Setzen wir den Abstand zu eng, werden die obere und untere Zeile optisch mitgelesen, was das Auge ablenkt und zu Ermüdung führt. Umgekehrt trennt ein zu großer Abstand Zeilen optisch und erschwert es mühelos zur nächsten Zeile zu wechseln.

Wie auch bei der Spaltenbreite beziehen sich diese Regeln laut Josef Müller-Brockmann hauptsächlich auf längere Texte. Kürzere Elemente, die eher visuellen oder werbenden Charakter haben, können durchaus nach primär ästhetischen Gesichtspunkten gestaltet werden.

Interessant wird die Gestaltung des Rasters, wenn Satzbilder mit mehreren Schriftgrößen in Einklang gebracht werden müssen. Um ein einheitliches Bild zu erhalten, müssen wir bestimmen, bei welcher Zeilenanzahl alle Schriftgrößen in Einklang sind:

Im gezeigten Beispiel arbeiten wir mit den Schriftgrößen 10pt, 7pt und 15pt, der gewählte Zeilendurchschuss beträgt 2pt, 1pt und 3pt. Damit kommen wir auf Zeilenabstände von 12pt, 8pt und 18pt. Eine kurze Berechnung ergibt ein kleinstes gemeinsames Vielfaches von 72pt.

Wie wir in der Darstellung sehen, gleichen sich die Zeilen aus Sicht der linken 10pt-Spalte tatsächlich nach jeder sechsten Zeile an, was genau den ermittelten 72pt entspricht. Wir wissen für unser Layout also, dass wir in Schriftgröße 10pt ein einheitliches Bild erhalten, wenn unsere Zeilenanzahl ein Vielfaches von 6 darstellt. Lässt sich die Zeilenanzahl nicht frei wählen, können wir den Zeilendurchschuss entsprechend anpassen, um ein einheitliches Bild zu erhalten.

Aufbau des Rasters

Bevor wir mit der Konstruktion des Rasters beginnen können, sollten wir uns bewusst machen, welche Aufgaben unser Satzspiegel erfüllen muss. Insbesondere sollten wir Platz für Illustrationen einplanen, eine geeignete Schriftgröße kalkulieren und in Abhängigkeit davon die entsprechende Spaltenbreite und Kolonnenzahl bestimmen. (Abbildung links)

Danach sollte nach Josef Müller-Brockmann der Text eingefügt werden. Wir erkennen schnell, dass ein passgenaues Raster immer mit dem Textlayout in Einklang gebracht werden muss. Ein gutes Mittel ist die bereits angesprochene Anpassung des Zeilendurchschusses. Die exakte Höhe des Rasters müssen wir eventuell noch leicht anpassen, wenn wir den Durchschuss festgelegt haben:

Die erste Zeile des Texts muss bündig mit der oberen Begrenzung des Rasterfelds beginnen, die letzte Zeile steht auf der unteren Begrenzungslinie. Die genaue Höhe lässt sich recht einfach mathematisch ermitteln. In unserem Beispiel nutzen wir einen Text mit 38 Zeilen. Haben wir uns für eine Schriftgröße von 8pt und einen Zeilendurchschuss von 2pt entschieden, ergibt sich ein Zeilenabstand von 10pt. Das ergibt rechnerisch eine Höhe von 38 x 10pt = 380pt. Nun müssen wir noch beachten, dass die letzte Zeile auf der Begrenzungslinie steht, also keinen Durchschuss benötigt. Wir kommen also auf eine Rasterhöhe von 380pt - 2pt = 378pt.

Da wir in unserem Beispiel mit drei Rasterfeldern je Satzspalte arbeiten, müssen wir den Zwischenraum ermitteln. Wir wählen die Größe des Raums, den eine Textzeile einnehmen würde, auch Leerzeile genannt. Natürlich ist auch ein Zwischenraum von zwei oder mehr Zeilen denkbar. Wir erhalten die Höhe der Leerzeile, indem wir den ermittelten Zeilenabstand betrachten: 10pt. Da die letzte Zeile des vorangegangenen Felds auf der unteren Begrenzungslinie steht, also keinen Zeilendurchschuss beinhaltet, müssen wir diesen Durchschuss hier hinzuaddieren. Wir erhalten eine Höhe der Leerzeile von 10pt + 2pt = 12pt. (Abbildung mittig)

Wenden wir das ermittelte Raster auf unser Layout an, sehen wir, dass wir in der linken Spalte drei Textfelder zur Verfügung haben. In der rechten Spalte ergeben sich 3 Felder für Illustrationen, die in Größe und Position perfekt die linken Spalten spiegeln. Jedes Feld entspricht exakt 12 Zeilen Text. Durch die gewählten Leerzeilen erhalten die Illustrationen ausreichend Weißraum.

Auch die Verwendung einer Überschrift in anderer Schriftgröße ist dank des Rasters problemlos möglich. Aufgrund unserer Berechnungen wissen wir, dass eine Überschrift in 16pt bei einem Zeilenabstand von 10pt genau zwei Zeilen einnimmt, wenn wir einen Zeilendurchschuss von 4pt wählen. (Abbildung rechts)

Fazit

Ein gut gewähltes Raster erleichtert die visuelle Gestaltung. Es gibt Form und ermöglicht einen logischen Aufbau von Text und Bild, was die Aufnahme von Informationen erleichtert. Auch wenn der Aufbau eines Rasters erst einmal abschreckend wirken mag, ist ein gutes Raster nahezu beliebig oft wiederverwertbar.

Es kann flexibel an neue Bedürfnisse angepasst werden und spart damit langfristig Zeit und somit auch Kosten. Dazu ergibt sich ein eindeutiger Wiedererkennungswert, da wir unseren Erzeugnissen eine Einheitlichkeit verleihen, die ohne Raster nur schwer zu erzielen wäre.