1440 px × 1.618034
1440 px / 1.618034
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.
1440 px × 1.618034
1440 px / 1.618034
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
Erstellen Sie erhabene, vertiefte und flache Soft-UI-Schatten mit dem Neumorphismus-Generator. Kopieren Sie sauberen CSS-, Tailwind- und SCSS-Code mit optischer Lichtfeld-Vorschau in Echtzeit.
Harmonische Farbschemata und Paletten direkt berechnen. Komplementäre, analoge, triadische und Split-Paletten mit WCAG-Kontrastprüfung in Echtzeit und CSS-Export erstellen.
Modernen CSS-Glassmorphism- & Milchglas-Code mit Live-Reglern für backdrop-filter, Unschärfe, Deckkraft und Schatten erzeugen. Reines HTML & CSS sofort kopieren.
Bilder online ohne Qualitätsverlust komprimieren. JPG-, PNG- und WebP-Dateien direkt im Browser verkleinern – ohne Server-Uploads, mit Ziel-KB-Solver und ZIP-Batch-Export.
Alle Datenverarbeitungen, Konvertierungen und Berechnungen erfolgen ausschließlich im Webbrowser ohne Serverübertragungen.
Erstellen Sie natürliche, fotorealistische CSS-Schatten mit optischer Tiefenwirkung, Inset-Prägungen und exportieren Sie Tailwind-, CSS- und React-Code.