Grundlagen der Raster-Typografie

25.03.14, 9:36

Proportionssystematik für das Corporate Design

Grafik-Design im Bereich Print ist zunächst eine kreative Arbeit, eine, die visuelle Welten kreiert und das Gefühl anspricht. Als es Webdesign noch nicht gab, waren Gestaltungsraster, also wiederkehrende Aufteilungen und Festlegungen von Proportionen für die zu gestaltende Seite Ausdruck einer durchdachten Gestaltung. Mit dem Webdesign hat sich die Herangehensweise zu gestalten verschoben und Raster gehören seitdem zur Grundlage des Tagesgeschäftes.

Typografieraster

Oben: So können Typografieraster beispielsweise aussehen. Links ein Beispiel für ein dreispaltiges Print-Layout-Raster, rechts ein sechsspaltiges. Aus einem Mehrfachen der kleinsten Einheiten ergeben sich Bildgrößen.

Kommunikationsdesign mit langer Geschichte

Grafik-Design heutigen Zuschnitts ist älter als man denkt. Pioniere des Corporate Designs wie Wilhelm Deffke, dem eine Ausstellung und ein Buch gewidmet wurden, wirkten schon nach 1900 an Logoentwicklungen für Unternehmen mit und prägten damit deren Erscheinungsbild. Mit der Intensivierung der Unternehmenskommunikation und dem Aufkommen der Werbung, die ihre erste Blütezeit in den 1920er-Jahren und eine zweite in den 1950er- und 1960er-Jahren hatte, entstand die Notwendigkeit, nicht nur aufmerksamkeitsstarkes und kreatives Grafik-Design zu schaffen, sondern die Ideen zu ordnen und zu systematisieren, damit ein einheitliches Erscheinungsbild mit nachhaltiger Wirkung entstehen konnte.

Proportionen – eine weitere Dimension des Corporate Designs

So entstand als visuelles Regelwerk das Corporate Design, das Schriften, Farben, Einsatz des Logos und von gestalterischen Elementen definiert. Oft wird bei der Beurteilung eines Corporate Designs vergessen, wie wichtig Proportionen sind. Das heißt, welche Bildgrößen und Gestaltungsproportionen das Erscheinungsbild unverwechselbar machen. Dazu gehören auch die Definition von Abständen und Weißflächen.

Deutschland und die Schweiz führend bei Gestaltungs-Raster-Typografie

Ruhige oder dynamische Proportionen, Mehrspaltigkeit, Registerhaltigkeit im Satz und Schriftgrößen werden durch ein sogenanntes Typoraster oder Gestaltungsraster festgelegt. Es legt darüber hinaus fest, wie eine Seite gleichmäßig aufgeteilt wird. Das heißt: Welche Bildgrößen nutze ich als Designer, wie variabel sind diese Bildgrößen und was für eine Spaltigkeit gibt es?
Dabei kann z.B. ein sechsspaltiges Grundraster

  • zwei sehr breite Spalten ergeben,
  • drei schmalere oder
  • sechs sehr schmale.

sechsspaltiges Raster

Oben: Hier sieht man, wie man z.B. ein sechsspaltiges Raster interpretieren kann. Links sind jeweils zwei der der sechs Spalten zu drei Textspalten zusammengefasst, rechts sind zwei breite Textspalten daraus geworden, eine Freispalte und ein Marginalspalten z.B. für kleiner gesetzte Bildunterschriften.

Der Schweizer Typograf und Gestalter Josef Müller-Brockmann hat dazu das Standardwerk „Grid systems in graphic design/Raster Systeme für die visuelle Gestaltung“ (Teufen 1981) verfasst. Es macht aus der Raster-Typografie fast schon eine mathematische Wissenschaft.

Anlegen von typografischen Rastern in Adobe InDesign

Oben: Programme wie Adobe InDesign vereinfachen das Anlegen von typografischen Rastern. Der obere Bereich „Grundlinienraster“ bezieht sich auf ein horizontales Zeilenabstandsraster, an dem man später die Zeilen automatisch ausrichten kann. Unter „Dokumentenraster“ kann man die Parameter für das eigentliche Gestaltungsraster eingeben. Da aber das Gestaltungsraster im Prinzip das Mehrfache des genutzten Zeilenabstandes ist, müssen beide miteinander korrespondieren und sorgfältig für alle denkbaren Einsatzzwecke innerhalb des Editorial-Designs abgestimmt werden.

Beispiele für unterschiedliche Fotogrößen

Oben: Beispiele für unterschiedliche Fotogrößen, die sich aus einem Typografieraster ergeben.

Josef Müller-Brockmann und Otl Aicher, die Päpste der Gestaltungsraster

Neben Müller-Brockmann (1914-1996) hat sich vor allem Otl Aicher (1922-1991) bezüglich Rastertypografie einen Namen gemacht. Seine sehr rational konstruierten Gestaltungsraster für Kunden wie Erco (Beleuchtung/Lichtanlagen) oder Bulthauptküchen machten Schule. Interessant ist, dass beide aktiv tätige Designer waren – und als solche auch sehr renommiert -, dass beide zugleich aber auch sehr theoretisch arbeiteten. Dabei war Müller-Brockmann bei seiner Raster-Typografie allein formalen Aspekten verhaftet, während Aicher die Form aus dem Inhalt ableitete. Legendär sind seine Workshops und Corporate-Identity-Maßnahmen, mit denen er zunächst die Unternehmensidentität des Kunden herausarbeitete, um sie dann in ein Erscheinungsbild zu transferieren. Andere berühmte Designer wie Olaf Leu oder Anton Stankowski arbeiteten viel weniger theoretisch-öffentlichkeitswirksam an den Gestaltungsrastern.

Doppelseite aus dem Buch „typographie“

Oben: Hier zu sehen eine Doppelseite aus dem Buch „typographie“ des deutschen Gestalters Otl Aicher. Man sieht hier, dass er sein typografisches Raster nicht nur für Abbildungen nutzt, sondern auch für Freiräume, bei denen sich das Auge ausruhen kann. Ein sechsspaltiges Grundraster ermöglicht ihm auf der linken Seite drei Abbildungen über jeweils zwei Spalten laufen zu lassen und die große Abbildung auf der rechten Seite über drei Spalten. Das Buch ist übrigens in der Schrift „Rotis“ gesetzt, die ebenfalls von Aicher entwickelt worden war.

Lebensdauer von Corporate Design hat sich verkürzt

Inzwischen hat der Stellenwert langfristig angelegter Design-Programme nachgelassen, weil die Änderungszyklen in der visuellen Kommunikation immer kürzer geworden sind. Sprich: Ein Erscheinungsbild hat heutzutage nicht mehr so lange Bestand und wird fortwährend verändert, um immer wieder neue Aufmerksamkeitswerte zu schaffen.

Gestaltungsraster in der Webtypografie ein Standard

Viel wesentlicher ist aber, dass in vergangenen Zeiten das Corporate Design, das für Print-Medien geschaffen wurde, das visuelle Leitsystem war. Mit Aufkommen und Erstarken der audiovisuellen Medien wie den Webseiten hat sich auch bezüglich der Design-Systematik und ihrer Gestaltungsraster einiges verändert. Da das Screendesign technisch bedingt viel mehr mit Reglementierungen einhergeht und man in früheren Zeiten sowieso in Form von Tabellenfeldern gestaltet hatte, war das Typoraster vor allem bezogen auf Bildgrößen ein Muss.

Modulargrid

Oben: Modulargrid erlaubt es mit wenigen Einstellungen sehr schnell ein detailliertes Raster für die Webseitenerstellung zu generieren, das man z.B. als Photoshop-Muster abspeichern und in Photoshop aufrufen kann. Dazu ist es nur wichtig, dass die Photoshopdatei, die mit dem Muster gefüllt wird, exakt die gleiche Größe wie die hier erzeugte Datei hat.

Variable Grid System

Oben: Das Variable Grid System basiert auf dem Webseiten-Baukasten 960 Grid System und ermöglicht es, das Gestaltungsraster als CSS-Datei downzuloaden. 960 Pixel Breite haben sich als ein gängiges Maß im Webdesign etabliert.

Mustervorlagen im 960-Grid-System

Oben: Das 960-Grid-System bietet neben Programmiercode auch eine Fülle an Mustervorlagen für alle gebräuchlichen Grafik-Programme zum kostenlosen Download an.

Gestaltungsraster kontra freies Gestalten

Im Webdesign haben technologische Gründe dazu geführt, dass Gestaltungsraster gebräuchlich sind. Im Print-Design stand immer schon die Fraktion der eher freien, intuitiven Gestalter denen gegenüber, die planvoll und systematisch an die Gestaltung herangingen und z.B. Fotogrößen und die Platzierung von Gestaltungselementen nicht dem Zufall überlassen wollten. In der Auseinandersetzung mit den Typorastern, bei denen die Tücke oft im Detail liegt, kann man viel über die verborgenen Strukturen und Wirkungen von Editorial Design lernen. Gestaltungsraster bleiben ja für den Leser unsichtbar, wohl aber wirkt eine Rastergestaltung unterbewusst. Typoraster falsch angewendet, lassen ein Medium langweilig und nichtssagend erscheinen. Intelligent angewendet transportieren sie das Unverwechselbare des Erscheinungsbildes mit hohem Wiedererkennungswert.

Kommentar hinzufügen

Mit der Nutzung dieses Formulars erklärst du dich mit der Speicherung und Verarbeitung deiner Daten durch diese Website einverstanden.