Goldener Schnitt Rechner & Rechteck

Goldener Schnitt Rechner & Rechteck

Berechnen Sie Maße im Goldenen Schnitt und Proportionen des Goldenen Rechtecks sofort. Längen nach Phi (1,618) teilen, Typografie skalieren und responsive Raster erstellen.

Voreinstellungen
Parameter & Berechnungsanker
px
px
px
Interaktiver Proportionen-Regler
A: 61.80% (890.0px)B: 38.20% (550.0px)Δ 0.000%
Zusammenfassung der MaßeEuclidean Precision Active
Hauptsegment (A)
870.192 px
≈ 54.39 rem
Nebensegment (B)
537.808 px
96 DPI: 870 px
(A + B) / A = A / B = 1.61803399 (φ)
Hauptsegment (A): 870.19px (61.8%)Nebensegment (B): 537.81px (38.2%)
870.2 px
gap
537.8 px
Erweiterte Maße (Basis × φ)
2,329.969 px

1440 px × 1.618034

Fokus-Maße (Basis / φ)
889.969 px

1440 px / 1.618034

Ziel-Container Rückwärts-Rechner100.00% Nutzbare Fläche (Coverage)
Major Column830.6 px
Minor Column513.4 px
Harmonic Gutter196.1 px
Seitenverhältnis- & Verschnitt-AnalyseGolden Standard: 1.618 : 1
16:991.0% Nutzbare Fläche (Coverage)
16:9 Standard Widescreen
16:1098.9% Nutzbare Fläche (Coverage)
16:10 Laptop & Pro Display
4:382.4% Nutzbare Fläche (Coverage)
4:3 Classic TV & Tablet
1:161.8% Nutzbare Fläche (Coverage)
1:1 Square Feed / Album
21:969.3% Nutzbare Fläche (Coverage)
21:9 UltraWide Cinema
3:292.7% Nutzbare Fläche (Coverage)
3:2 35mm DSLR Photography
Hauptsegment (A)870.19 px
Nebensegment (B)537.81 px
Phi-Verhältnis (φ)1.61803399
Technische Referenz & Architektur-Leitfaden

Goldener Schnitt Rechner & Proportionen — Referenzhandbuch

Berechnen Sie Maße des Goldenen Schnitts und Proportionen Goldener Rechtecke in Echtzeit. Teilen Sie Strecken nach Phi (1,618), skalieren Sie Typografie und erstellen Sie responsive Gestaltungsraster.

Goldener Schnitt Rechner & Proportionen — Referenzhandbuch — Client-seitige In-Memory-Architektur und Datenfluss
Goldener Schnitt Rechner & Proportionen — Referenzhandbuch — Client-seitige In-Memory-Architektur und Datenfluss

Wichtige Parameter & Einstellungen

Gesamtlänge / Gesamtmaß (A + B)Lineares Maß (px / mm / in)

Die zusammenhängende Gesamtlänge, die nach Euklids stetiger Teilung gemäß der Formel (A + B) / A = A / B = φ im Goldenen Schnitt geteilt wird. Typische Abmessungen reichen im UI- und Webdesign von 320px bis 3840px für Bildschirme sowie von 100mm bis 1000mm für Drucklayouts.

Standard: 1440 px
Major des Goldenen Schnitts (Segment A)Primärer Abschnitt (61,803 %)

Der größere geometrische Teilabschnitt (Major), der exakt (√5 - 1) / 2 ≈ 61,80339887 % der Gesamtlänge ausmacht. Im digitalen Editorial Design und in der Web-Ergonomie dominiert Segment A die primäre visuelle Hierarchie für Inhaltsbereiche, Hero-Sektionen und tragende Layoutblöcke.

Standard: 889.97 px
Minor des Goldenen Schnitts (Segment B)Sekundärer Abschnitt (38,197 %)

Der komplementäre harmonische Teilabschnitt (Minor), berechnet aus Gesamtlänge minus Segment A, entsprechend exakt (3 - √5) / 2 ≈ 38,19660113 % der Gesamtstrecke. Dient als ideale Seitenleiste (Sidebar), sekundäre Metadaten-Spalte, Navigation Drawer oder ausgleichender Weißraum.

Standard: 550.03 px
Proportionskonstante Phi (φ)Irrationale mathematische Konstante

Die eindeutige positive Lösung der quadratischen Gleichung x² - x - 1 = 0, algebraisch definiert als (1 + √5) / 2 ≈ 1,618033988749895. Sie bestimmt selbstähnliches logarithmisches Wachstum, den Grenzwert der Fibonacci-Folge (lim n→∞ F(n+1)/F(n)) und sich selbst reproduzierende Goldene Rechtecke.

Standard: 1.6180339887
Typografische BasisschriftgrößeRoot-Em-Skalierung (px / pt)

Die fundamentale Fließtextgröße (typischerweise 16px für barrierefreies Webdesign oder 10–12pt im Printbereich), von der aus modulare Skalenintervalle mit φ (oder φ^(1/2) ≈ 1,272 für kompakte Bildschirmtypografie) multipliziert oder dividiert werden, um harmonische Überschriftenhierarchien aufzubauen.

Standard: 16 px
Rasterabstände & Innenabstände (Gutters & Padding)Räumlicher Abstand (px / rem)

Der Zwischenabstand (Gutter) zwischen Inhaltsspalten im Goldenen Schnitt. Abstände proportional zum Minor-Segment (z. B. 16px, 24px oder 32px aus Fibonacci-Schritten) verhindern visuelle Überladung und bewahren das wahrnehmungspsychologische 61,8/38,2-Verhältnis im CSS-Subgrid- oder Flexbox-Layout.

Standard: 32 px

Profi-Tipps & Best Practices

Strikte modulare 1,618-Schriftskalierung sprengt Überschriften auf Mobilgeräten

Wird eine barrierefreie Fließtextgröße von 16px mit dem vollen Faktor Phi (1,618) multipliziert, ergeben sich H3 mit 25,9px, H2 mit 41,9px und H1 mit 67,8px. Was auf 1440px+-Monitoren imposant wirkt, führt auf 375px-Smartphones zu unschönen Umbrüchen und Trennungsfehlern. Führende Design-Systeme (wie Apples Human Interface Guidelines und Google Material Design) nutzen für mobile Viewports das halbe Goldene Verhältnis (φ^(1/2) ≈ 1,272) oder die Große Terz (1,250) und reservieren den vollen Multiplikator 1,618 für Desktop-Displays.

Phi-Raster (1:0,618:1) übertrifft die Drittel-Regel (1:1:1) beim Sehkomfort

Die in der Fotografie verbreitete Drittel-Regel (Rule of Thirds) teilt Bildflächen gleichmäßig bei 33,3 % und 66,7 % auf, wodurch Schnittpunkte und Rasterlinien oft zu nah an den Bildrändern liegen. Das Phi-Raster des Goldenen Schnitts teilt den Raum hingegen bei 38,2 % und 61,8 %. Dadurch rücken die visuellen Schwerpunkte um 5 % näher an das Bildzentrum heran. Das sorgt für einen natürlicheren optischen Ankerpunkt und vermeidet störenden toten Raum an den Bildrändern bei Porträts und architektonischen Kompositionen.

Subpixel-Rundungsfehler brechen Spaltenlayouts in CSS-Flexbox

Berechnungen mit Dezimalpixeln (wie 889,967px und 550,033px in einem 1440px-Container) werden von Browser-Rendering-Engines (Blink, WebKit, Gecko) unterschiedlich gerundet. Wenn in Flexbox- oder Mehrspaltenlayouts beide Spalten um je 0,5px aufgerundet werden (890px + 551px = 1441px), wird die Seitenleiste ungewollt in die nächste Zeile umgebrochen. Setzen Sie stattdessen auf CSS flex: 1 1 0 mit Prozentangaben wie width: 61.8034% und calc(100% - 61.8034% - var(--gutter)) kombiniert mit box-sizing: border-box, um pixelperfektes Hardware-Rendering sicherzustellen.

DIN EN ISO 216 (DIN A4 / A3) nutzt das Lichtenberg-Verhältnis (1:1,414), nicht den Goldenen Schnitt

Ein häufiger Anfängerfehler im Printdesign ist der Versuch, Standard-DIN-Formate in ein Goldenes Rechteck zu zwängen. Papierformate nach DIN EN ISO 216 (ursprünglich DIN 476) basieren auf dem Lichtenberg-Verhältnis (1:√2 ≈ 1:1,4142), bei dem eine Halbierung des Bogens stets das identische Seitenverhältnis wahrt. Ein echtes Goldenes Rechteck mit einer A4-Breite von 210mm erfordert eine Höhe von 339,8mm (42,8mm höher als die standardmäßigen 297mm von DIN A4). Wenden Sie den Goldenen Schnitt auf DIN A4 daher auf innere Satzspiegel und Ränder an, anstatt das Papierformat physisch zu beschneiden.

Häufige Fehlerquellen & Fehlerbehebung

⚠️Subpixel-Layout-Überlauf und unerwünschter Spaltenumbruch in responsivem CSS

Wenn Spaltenbreiten mit festen Dezimalpixelwerten definiert werden (z. B. width: 889.97px), führen kumulative Rundungsfehler auf hochauflösenden Displays (Retina mit 2x/3x DPR) zum Überschreiten der Containerbreite, wodurch die zweite Spalte nach unten rutscht. Beheben Sie dies durch CSS-Prozentwerte (flex-basis: 61.8034% und flex-basis: calc(38.1966% - var(--gutter))) in Kombination mit min-width: 0 und overflow-wrap: break-word auf den übergeordneten Flex-Containern.

⚠️Ausrichtung der Goldenen Spirale widerspricht dem westlichen Lesefluss (F-Muster)

Liegt das dichte Zentrum der Goldenen Spirale in der unteren rechten Ecke, entsteht visuelle Reibung: Eye-Tracking-Studien belegen, dass Nutzer in westlichen Schriftsystemen Bildschirme im F-Muster von oben links nach unten rechts scannen. Richten Sie die Goldene Spirale so aus, dass ihr weiter äußerer Bogen über die Navigation oben links und das primäre Nutzenversprechen (Value Proposition) führt und sich zum Call-to-Action-Button (CTA) oder der Leitgrafik unten rechts hin verdichtet.

⚠️Abweichung zwischen direkter Phi-Multiplikation und Näherungswerten der Fibonacci-Folge

Die Berechnung goldener Proportionen anhand kleiner Fibonacci-Zahlen (z. B. 3/2 = 1,500 oder 5/3 = 1,667) verursacht maßliche Abweichungen von bis zu 7,3 % gegenüber dem echten Phi (1,618034). Das Verhältnis aufeinanderfolgender Fibonacci-Zahlen nähert sich erst ab 89/55 (1,61818) auf 0,1 % Genauigkeit an. Berechnen Sie Koordinaten für strukturelle Layouts und digitale UI-Design-Systeme daher stets mit der exakten irrationalen Konstante φ = (1 + √5)/2 anstelle früher ganzzahliger Näherungen.

Häufig gestellte Fragen (FAQ)

Wie berechnet man den Goldenen Schnitt zwischen zwei Zahlen?▼

Um den Goldenen Schnitt zweier Strecken zu berechnen, teilt man die größere Zahl (A) durch die kleinere Zahl (B); das Ergebnis muss 1,618034 ergeben. Ebenso muss die Gesamtlänge (A + B) geteilt durch die größere Zahl (A) exakt 1,618034 betragen. Mathematisch gilt: (A + B) / A = A / B = φ = (1 + √5) / 2 ≈ 1,6180339887. Beispiel: Beträgt das größere Segment 100px, ist das kleinere Segment 100 / 1,618034 ≈ 61,8px lang und die Gesamtstrecke misst 161,8px.

Wie teilt man eine Breite oder Höhe nach dem Goldenen Schnitt auf?▼

Um ein Gesamtmaß (z. B. eine Containerbreite) im Goldenen Schnitt zu teilen, multiplizieren Sie den Gesamtwert mit 0,618034 für den größeren Major-Abschnitt (A = Gesamt × 0,618034) und mit 0,381966 für den kleineren Minor-Abschnitt (B = Gesamt × 0,381966). Beispiel: Die Teilung eines Web-Containers von 1200px ergibt einen Hauptinhaltsbereich von 741,64px und eine Seitenleiste von 458,36px (741,64 + 458,36 = 1200px).

Was ist der Unterschied zwischen dem Goldenen Schnitt und der Drittel-Regel?▼

Der Goldene Schnitt (Phi-Raster) teilt Flächen im Verhältnis 1 : 0,618 : 1 auf (38,2 % / 23,6 % / 38,2 %), während die Drittel-Regel (Rule of Thirds) den Raum in drei identische Abschnitte im Verhältnis 1 : 1 : 1 gliedert (33,33 % / 33,33 % / 33,33 %). Die Drittel-Regel ist eine vereinfachte Praxiskonstruktion für Kamerasucher, während der Goldene Schnitt visuelle Fokus-Schnittpunkte um 5 % näher zur Bildmitte verlagert und so ausgewogenere Kompositionen mit weniger ungenutztem Leerraum erzeugt.

Welche Maße ergeben sich nach dem Goldenen Schnitt für Bildschirme mit 1920x1080 und 1440px?▼

Bei einer Gesamtbreite von 1920px ergibt die horizontale Teilung im Goldenen Schnitt 1186,62px für den Hauptbereich und 733,38px für die Seitenleiste. Auf einem 1440px-Desktop-Bildschirm beträgt die Aufteilung 889,97px (61,8 %) zu 550,03px (38,2 %). Bei einer Bildschirmhöhe von 1080px erzeugt die vertikale Teilung einen 667,48px hohen Hero-Banner und einen 412,52px hohen Sekundärbereich. Ein echtes Goldenes Rechteck mit einer Höhe von 1080px benötigt eine Breite von 1747,48px (1080 × 1,618034), was rund 9 % schmaler als das Standard-16:9-Breitbildformat (1920px) ist.

Wie berechnet man eine typografische Skala mit dem Goldenen Schnitt?▼

Für eine modulare Schriftskalierung im Goldenen Schnitt geht man von einer Basis-Fließtextgröße aus (z. B. 16px) und multipliziert diese mit φ (1,618) für aufsteigende Überschriftengrößen oder dividiert durch φ für kleinere Bildunterschriften: Body = 16px, H3 = 16 × 1,618 ≈ 26px, H2 = 26 × 1,618 ≈ 42px und H1 = 42 × 1,618 ≈ 68px. Für kompakte mobile Benutzeroberflächen, auf denen ein Faktor von 1,618 Überschriften zu stark vergrößert, verwenden Typografen die Quadratwurzel aus Phi (√φ ≈ 1,272), was zu Body = 16px, H3 = 20px, H2 = 26px und H1 = 33px führt.

Verwandte Tools & Hilfsprogramme

Alle Tools →