Goldener-Schnitt-Rechner

Goldenen Schnitt berechnen: größere und kleinere Seite, Gesamtlänge und Skala nach 1,618 – mit Vorschau und CSS-Grid-Code.

Der Goldene-Schnitt-Rechner teilt eine Strecke im Verhältnis 1 zu 1,618. Du gibst die Gesamtlänge, die größere oder die kleinere Seite ein und erhältst die beiden anderen Werte. Dazu kommen eine Skala aus Vielfachen von 1,618 für Schriftgrößen oder Abstände, eine Vorschau mit ineinander liegenden Quadraten und fertiger Code für ein Zweispalten-Layout.

Wert

Der Wert ist die

Einheit

Größere Seite (Major)

741.64px

61.8 %

Kleinere Seite (Minor)

458.36px

38.2 %

Gesamtlänge

1200px

Skala aus Vielfachen von 1,618

Stufe	Faktor	Wert
φ^-3	0.236	283.28px
φ^-2	0.382	458.36px
φ^-1	0.618	741.64px
φ⁰	1	1200px
φ¹	1.618	1941.64px
φ²	2.618	3141.64px
φ³	4.236	5083.28px
φ⁴	6.854	8224.92px
φ⁵	11.09	13308.2px

Zweispalten-Layout im Goldenen Schnitt

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

Was ist der Goldene Schnitt im Design?

Der Goldene Schnitt teilt eine Strecke so, dass sich das Ganze zum größeren Teil verhält wie der größere zum kleineren. Der Wert liegt bei 1,618 (Phi). In Layout, Typografie und Logo-Design dient er als Orientierung für harmonische Proportionen.

Typische Anwendungen

Spaltenbreiten: Inhalt und Seitenleiste im Verhältnis 61,8 zu 38,2.
Schriftgrößen: Überschrift und Fließtext im Faktor 1,618.
Abstände: Innen- und Außenabstand von Karten und Sektionen.
Bildausschnitte und Logo-Proportionen.

So gehst du vor

Wert eingeben und die Rolle des Werts wählen.
Teilstrecken übernehmen oder die Skala für Größen nutzen.
Layout-Code kopieren.

Beispiel

Ein Container ist 1200 px breit. Der Hauptbereich bekommt 742 px, die Seitenleiste 458 px. In CSS schreibst du dafür grid-template-columns: 1.618fr 1fr. Eine ganze Typografie-Skala mit anderem Verhältnis erzeugt der Typografie-Skala-Generator, passende Seitenverhältnisse findest du im Seitenverhältnis-Rechner.

Häufige Fragen

Was ist der Goldene Schnitt?

Eine Teilung, bei der sich die ganze Strecke zur größeren Teilstrecke verhält wie die größere zur kleineren. Das Verhältnis beträgt etwa 1,618 zu 1 und wird mit dem griechischen Buchstaben Phi bezeichnet.

Wie teile ich eine Breite nach dem Goldenen Schnitt?

Teile die Gesamtbreite durch 1,618 für den größeren Teil. Bei 1200 px sind das etwa 742 px, der Rest von 458 px ist der kleinere Teil. Das entspricht rund 61,8 zu 38,2 Prozent.

Muss ich den Goldenen Schnitt im Design verwenden?

Nein. Er ist eine Orientierung, kein Gesetz. Viele Layouts wirken ausgewogen, wenn Haupt- und Nebenbereich ungefähr in diesem Verhältnis stehen, aber Inhalte und Lesbarkeit haben Vorrang.

Wie nutze ich den Goldenen Schnitt für Schriftgrößen?

Multipliziere die Basisgröße mehrfach mit 1,618. Aus 16 px werden 25,9 px, 41,9 px und so weiter. Das ergibt große Sprünge. Für feinere Skalen eignet sich der Typografie-Skala-Generator mit kleineren Verhältnissen.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.