Free Golden Ratio (φ) Calculator
Calculate divine proportions, generate custom typography hierarchies, and divide layout segments using the constant of φ
Golden Ratio (φ) Calculator
Golden Ratio Results
Golden Ratio Visualization
Quick Calculations:
The Golden Ratio (φ) in Modern Design
The Golden Ratio — mathematically represented by the Greek letter phi (φ) and approximately equal to 1.61803398875 — is a unique mathematical proportion. Throughout history, artists, architects, and designers have utilized this constant to create compositions that feel organically balanced and visually harmonious.
The Mathematical Breakdown of Phi (φ)
The Golden Ratio occurs when a line is divided into two segments such that the ratio of the whole line (a + b) to the longer segment (b) is exactly equal to the ratio of the longer segment to the shorter segment (a):
(a + b) ÷ b = b ÷ a = φ ≈ 1.61803398875
It is the positive solution to the quadratic equation **$x^2 = x + 1$**, represented exactly by:
Reciprocal Conjugate (1 ÷ φ) = φ - 1 ≈ 0.61803398875
Mathematical Proportions Reference Table
Core mathematical variations of the Golden Ratio and their exact properties:
| Mathematical Form | Equation | Numerical Value | Design Application |
|---|---|---|---|
| Primary Ratio (φ) | (1 + √5) ÷ 2 | 1.6180339887 | Main scaling factor for layouts & fonts |
| Conjugate (1/φ) | φ - 1 | 0.6180339887 | Dividing layout columns (61.8% / 38.2%) |
| Square (φ²) | φ + 1 | 2.6180339887 | Deep typographic jumps (Body to Page Titles) |
| Square Root (√φ) | √φ | 1.2720196495 | Subtle proportion scale updates |
Golden Ratio Applications in Web UI
📐 Proportional Columns
Divide a 1000px content width into a main content area of 618px and a sidebar of 382px (a perfect 61.8% to 38.2% layout layout grid).
✍️ Typoscales
Scale font weights beautifully. If the body is 16px, subsequent sizes are: 26px (H3), 42px (H2), and 68px (H1).
CSS Implementation Example
Define golden scales in your root custom variables using relative CSS units:
--phi: 1.618;
--font-base: 1rem;
--font-lg: calc(var(--font-base) * var(--phi)); /* 1.618rem */
--font-xl: calc(var(--font-lg) * var(--phi)); /* 2.618rem */
--sidebar-width: 38.2%;
--content-width: 61.8%;
}
