Der Goldene Schnitt begegnet dir überall: in der Architektur, in Logos, in der Aufteilung von Webseiten und sogar in der Natur. Hinter dem schön klingenden Namen steckt ein simples Zahlenverhältnis, das viele Menschen als besonders harmonisch empfinden. In diesem Ratgeber erfährst du, was genau dahintersteckt, wie die Formel funktioniert und wie du das Verhältnis konkret im Design einsetzt.
Was ist der Goldene Schnitt?
Der Goldene Schnitt teilt eine Strecke so, dass sich der größere Teil zum kleineren Teil genau so verhält wie die gesamte Strecke zum größeren Teil. Klingt sperrig, läuft aber immer auf dieselbe Zahl hinaus: Phi (φ) ≈ 1,618. Diese Zahl ist irrational, das heißt sie hat unendlich viele Nachkommastellen ohne Periode.
Konkret heißt das: Hast du eine Linie von 100 Pixeln und teilst sie nach dem Goldenen Schnitt, entstehen ein langer Abschnitt von etwa 61,8 Pixeln und ein kurzer von 38,2 Pixeln. Das Verhältnis 61,8 zu 38,2 entspricht ungefähr 1,618 – dem berühmten Phi.
Die Formel hinter Phi
Mathematisch ergibt sich der Goldene Schnitt aus der Gleichung a/b = (a+b)/a. Löst man diese Gleichung, erhält man φ = (1 + √5) / 2 = 1,6180339887… Für die Praxis genügt fast immer der gerundete Wert 1,618.
Praktisch rechnest du in zwei Richtungen: Um aus einem Wert den größeren Anteil zu finden, multiplizierst du mit 0,618. Um den nächstgrößeren harmonischen Wert zu finden, multiplizierst du mit 1,618. Mit dem Golden Ratio Rechner bekommst du beide Teile sofort, ohne selbst rechnen zu müssen – du gibst einfach eine Gesamtlänge ein und erhältst den langen und den kurzen Abschnitt.
Verbindung zur Fibonacci-Folge
Eng verwandt mit dem Goldenen Schnitt ist die Fibonacci-Folge (1, 1, 2, 3, 5, 8, 13, 21, 34, …), bei der jede Zahl die Summe der beiden vorherigen ist. Teilst du eine Fibonacci-Zahl durch ihren Vorgänger, näherst du dich immer weiter an 1,618 an: 21/13 = 1,615, 34/21 = 1,619. Deshalb wirken auch Größenstufen, die auf Fibonacci basieren, oft so ausgewogen.
Der Goldene Schnitt im Webdesign
Im Layout lässt sich der Goldene Schnitt nutzen, um die Aufteilung zwischen Hauptinhalt und Seitenleiste festzulegen. Bei einer Inhaltsbreite von 960 Pixeln ergäben sich rund 593 Pixel für den Hauptbereich und 367 Pixel für die Sidebar. Diese Aufteilung wirkt natürlicher als eine simple Halbierung oder ein willkürliches Verhältnis.
- Layout-Spalten: Hauptinhalt zu Seitenleiste im Verhältnis 1,618 zu 1.
- Bildkomposition: wichtige Elemente entlang der goldenen Linien platzieren statt mittig.
- Whitespace: Abstände nach dem Verhältnis staffeln, damit Größensprünge harmonisch wirken.
- Logos: Kreise und Rechtecke nach Phi proportionieren für ein ausgewogenes Markenzeichen.
Typografie und Schriftgrößen
Besonders elegant ist der Goldene Schnitt bei der Typografie. Nimmst du eine Grundschriftgröße von 16 Pixeln und multiplizierst sie mit 1,618, erhältst du eine Überschriftgröße von rund 26 Pixeln. Die nächste Stufe wären 42 Pixel. So entsteht eine harmonische typografische Skala. Wer eine ganze Größenleiter aufbauen will, kombiniert den Goldenen Schnitt gut mit einer durchdachten Zeilenhöhen-Berechnung, damit Schriftgröße und Zeilenabstand zueinander passen.
Sollte man sich sklavisch daran halten?
Der Goldene Schnitt ist ein nützliches Werkzeug, aber kein Naturgesetz für gutes Design. Viele großartige Layouts verstoßen bewusst gegen das Verhältnis, und nicht jede 1,618-Aufteilung sieht automatisch gut aus. Betrachte den Goldenen Schnitt als sinnvollen Ausgangspunkt: Wenn du unsicher bist, wie du zwei Bereiche proportionieren sollst, liefert er einen erprobten Startwert, den du dann nach Gefühl feinjustierst.
Weitere praktische Helfer für Layout, Farbe und Code findest du in unserer Übersicht aller Webtools. Mit dem Golden Ratio Rechner probierst du verschiedene Ausgangswerte einfach durch und findest die Proportionen, die für dein Projekt am besten passen.