Goldener Schnitt und Gestaltungsraster im Layout

Der Goldene Schnitt ist ein Teilungsverhältnis von etwa 1,618 zu 1. Teilt man eine Fläche danach, entsteht ein großer Bereich mit rund 62 Prozent und ein kleiner mit rund 38 Prozent. Im Webdesign dient er als Ausgangspunkt für Spaltenbreiten, Bildformate und Schriftgrößen. Im Alltag noch nützlicher ist ein Gestaltungsraster, das allen Elementen feste Spalten, Abstände und Ränder vorgibt.

Beide Werkzeuge haben dasselbe Ziel: Ordnung, die man spürt, ohne sie zu sehen. Wie Proportionen mit Hierarchie, Kontrast und Konsistenz zusammenwirken, beschreiben die Grundlagen guter Gestaltung.

Was der Goldene Schnitt genau ist

Eine Strecke ist im Goldenen Schnitt geteilt, wenn sich der längere Abschnitt zum kürzeren so verhält wie die ganze Strecke zum längeren Abschnitt. Das Verhältnis wird mit dem griechischen Buchstaben φ (Phi) bezeichnet und beträgt etwa 1,618. Eng verwandt ist die Fibonacci-Folge 1, 1, 2, 3, 5, 8, 13, 21 und so weiter, in der jede Zahl die Summe der beiden vorherigen ist. Das Verhältnis zweier aufeinanderfolgender Zahlen nähert sich immer mehr φ an.

Was belegt ist und was nicht

Um den Goldenen Schnitt ranken sich viele Behauptungen: Er stecke in den Pyramiden, im Parthenon, in Gemälden der Renaissance oder im menschlichen Gesicht, und Menschen empfänden ihn grundsätzlich als besonders schön. Vieles davon hält einer genauen Prüfung nicht stand. Wer lange genug misst, findet in fast jedem Objekt irgendeine Strecke, die ungefähr 1,6 mal so lang ist wie eine andere.

Für die Gestaltung ist das kein Grund, ihn zu verwerfen. Er ist ein ausgewogenes Verhältnis, weder symmetrisch noch extrem, und er hilft, Größen nicht willkürlich zu wählen. Sein eigentlicher Wert liegt in der Konsequenz: Ein Layout wirkt ruhig, wenn seine Proportionen aus einem einzigen Prinzip abgeleitet sind, egal ob dieses Prinzip φ, 3 zu 2 oder 4 zu 3 heißt.

Den Goldenen Schnitt im Layout einsetzen

Spaltenbreiten

Bei einer Inhaltsbreite von 1.100 Pixeln ergibt der Goldene Schnitt eine Hauptspalte von rund 680 und eine Seitenleiste von rund 420 Pixeln. Abstände zwischen den Spalten ziehen Sie vorher ab. In CSS lässt sich das direkt als Verhältnis schreiben:

.layout {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 2rem;
}

Bildformate

Ein Bild im Format 1,618 zu 1 liegt zwischen den verbreiteten Formaten 3 zu 2 und 16 zu 9. Mit aspect-ratio: 1.618; erhalten Bildcontainer dieses Format und reservieren gleichzeitig den Platz, bevor das Bild geladen ist. Welche Pixelmaße für Bilder sinnvoll sind, zeigt Bildgrößen für Websites.

Schriftgrößen

Eine typografische Skala multipliziert die Grundschrift mit einem festen Faktor. Mit φ wird aus 16 Pixeln Fließtext eine Zwischenüberschrift von rund 26 und eine Hauptüberschrift von rund 42 Pixeln. Für textreiche Seiten sind diese Sprünge oft zu groß. Viele Gestalter nutzen deshalb kleinere Faktoren wie 1,25 oder 1,333, die mehr Abstufungen erlauben. Mehr zur Größenwahl steht im Ratgeber Typografie im Web.

Andere Proportionen im Vergleich

Das DIN-Format hat eine praktische Besonderheit: Halbiert man ein Blatt, bleibt das Seitenverhältnis gleich. Deshalb passt ein A4-Layout ohne Verzerrung auf A5 oder A3. Hinweise zu Formaten im Druck finden Sie im Ratgeber Grafikdesign für Print.

Gestaltungsraster: Das Werkzeug für den Alltag

Ein Gestaltungsraster teilt die Fläche in Spalten mit festen Zwischenräumen und Rändern. Texte, Bilder und Bedienelemente beginnen und enden an diesen Linien. Raster stammen aus der Buch- und Zeitungsgestaltung und wurden besonders im sogenannten Schweizer Stil der Nachkriegszeit systematisch ausgearbeitet. Im Webdesign sind sie heute Standard.

Ein Raster besteht aus vier Elementen:

1. Spalten: die Flächen, in denen Inhalte stehen.
2. Spaltenabstände (Gutter): der feste Abstand zwischen zwei Spalten.
3. Ränder: der Abstand zwischen äußerster Spalte und Bildschirmkante.
4. Maximale Breite: die Breite, ab der das Raster nicht weiter wächst, sondern zentriert wird.

Übliche Raster je Bildschirm

Diese Werte sind verbreitete Ausgangspunkte, keine Vorschrift. Wichtig ist, dass Gutter und Ränder zu Ihrer Abstandsskala passen. Wie eine solche Skala aufgebaut ist, beschreibt der Artikel Weißraum im Webdesign.

Raster in CSS umsetzen

Mit CSS Grid lässt sich ein Zwölf-Spalten-Raster in wenigen Zeilen anlegen:

.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
.inhalt { grid-column: span 8; }
.seitenleiste { grid-column: span 4; }

Acht zu vier Spalten entspricht einem Verhältnis von 2 zu 1, sieben zu fünf liegt mit 1,4 nahe am DIN-Format. Ein exakter Goldener Schnitt ergibt sich in einem Zwölf-Spalten-Raster nicht, er läge bei etwa 7,4 zu 4,6 Spalten. Wer ihn genau will, nutzt besser die fr-Schreibweise aus dem ersten Beispiel. Auf kleinen Bildschirmen stapeln sich die Bereiche per Media Query oder Container Query untereinander, wie im Ratgeber Responsive Design beschrieben.

Grundlinienraster

Neben dem Spaltenraster gibt es das Grundlinienraster: Alle Textzeilen stehen auf einem gemeinsamen vertikalen Takt, etwa einem Vielfachen von 8 Pixeln. Im Druck ist das Standard, damit Zeilen auf Vorder- und Rückseite übereinanderliegen. Im Web ist ein strenges Grundlinienraster aufwendig und bricht leicht, sobald Nutzer die Schriftgröße ändern. Praktikabel ist ein weicher Ansatz: Zeilenhöhen und Abstände aus derselben Grundeinheit ableiten.

Proportionen im Bildausschnitt

Auch innerhalb eines Bildes helfen Teilungslinien. Wer das Hauptmotiv nicht in die Mitte setzt, sondern auf eine der Linien bei etwa einem Drittel oder im Goldenen Schnitt, erzeugt mehr Spannung. Für Websites hat das einen praktischen Nebeneffekt: Liegt das Motiv in einem Hero-Bild links, bleibt rechts Raum für Überschrift und Button, oder umgekehrt.

Beim responsiven Zuschnitt ist Vorsicht geboten. Ein breites Bild, das auf dem Smartphone mittig beschnitten wird, verliert ein seitlich platziertes Motiv womöglich ganz. Mit der CSS-Eigenschaft object-position legen Sie fest, welcher Bildbereich beim Beschneiden sichtbar bleibt. Alternativ liefern Sie für kleine Bildschirme einen eigenen Ausschnitt aus. Was in den ersten sichtbaren Bereich gehört, beschreibt der Artikel Above the Fold.

Typische Fehler

• Raster nur im Entwurf: Das Designprogramm zeigt ein sauberes Raster, im Code werden aber eigene Breiten und Abstände gesetzt.
• Zu viele Ausnahmen: Einzelne Elemente, die bewusst aus dem Raster ausbrechen, setzen Akzente. Wenn jedes zweite Element ausbricht, gibt es kein Raster mehr.
• Starre Pixelwerte: Raster mit festen Pixelbreiten passen nicht zu allen Bildschirmen. Relative Einheiten wie fr, rem und Prozent machen es flexibel.
• Goldener Schnitt als Dogma: Wenn das Verhältnis die Lesbarkeit verschlechtert, etwa weil eine Textspalte zu breit wird, hat die Lesbarkeit Vorrang. Für Fließtext gelten etwa 60 bis 80 Zeichen pro Zeile als angenehm.

Kurz-Checkliste

• Ein Proportionsprinzip gewählt und überall angewendet
• Spalten, Gutter, Ränder und maximale Breite je Bildschirmgröße festgelegt
• Gutter und Ränder passen zur Abstandsskala
• Raster in CSS Grid umgesetzt, nicht nur im Entwurf vorhanden
• Textspalten auf gut lesbare Zeilenlänge begrenzt
• Ausnahmen vom Raster bewusst und sparsam gesetzt

Raster und Proportionen machen ein Layout nicht automatisch gut, aber sie nehmen viele Einzelentscheidungen ab. So bleibt mehr Aufmerksamkeit für Inhalt, Hierarchie und die Frage, was Besucher auf der Seite wirklich brauchen.