Enter a total length to split it into the golden ratio (the longer part ÷ the shorter part = φ).
Or start from one known side:
Two lengths are in the golden ratio when the longer one divided by the shorter equals the whole divided by the longer one. That number is φ (phi) ≈ 1.6180339887. It has unusual properties: 1 ÷ φ = 0.618… and φ² = 2.618…, so φ² = φ + 1.
Designers use it for layouts, typographic scales, logos and photo crops, and it turns up in architecture, art and spiral patterns in nature. Some of the more dramatic claims about it are exaggerated, but it remains a handy, harmonious proportion to work from.
φ = (1 + √5) ÷ 2
Splitting a 100 cm shelf or a 100-unit-wide layout into golden sections:
On a 1,200 px web page, that gives a main column of about 742 px and a sidebar of about 458 px.
In the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, 21, 34…), each number divided by the one before gets closer and closer to φ: 21 ÷ 13 = 1.615, 34 ÷ 21 = 1.619 and so on.
A rectangle whose sides are in the ratio 1 : 1.618. Cut a square off one end and the leftover piece is another golden rectangle. Repeating this traces the well-known golden spiral.
It appears in some places, such as the spiral arrangement of sunflower seeds and pine cones. But many popular claims, such as for the Parthenon or the Mona Lisa, rely on loose measurements. Treat it as a useful design tool rather than a universal law.
Multiply your base font size by 1.618 for each step up: 16 px body → 26 px subheading → 42 px heading. Many designers use gentler ratios like 1.25 or 1.333 for text-heavy pages.