Understanding the golden ratio
The golden ratio, written φ (phi), is about 1.618. Two lengths are in the golden ratio when the longer one divided by the shorter one equals the whole divided by the longer one: a ÷ b = (a + b) ÷ a = φ. Its exact value is (1 + √5) ÷ 2.
How the calculator works
Type any one of the three values and the other two follow from these relationships:
- From the total:
a = total ÷ 1.618andb = total ÷ 2.618(because φ² = φ + 1 ≈ 2.618). - From the long side:
b = a ÷ 1.618andtotal = a × 1.618. - From the short side:
a = b × 1.618andtotal = b × 2.618.
For example, splitting a 1000px wide layout gives a 618px main column and a 382px sidebar.
The golden rectangle and spiral
A golden rectangle has sides in the ratio φ:1. Cut a square off one end and what remains is another, smaller golden rectangle, and you can keep going forever. Drawing a quarter circle through each square gives the golden spiral shown above. The ratio is closely tied to the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13…): divide any term by the one before it and the result gets closer to φ the further along you go.
Using it in design
- Layout: split a page or card into a and b for a content area and sidebar.
- Spacing: use the golden sequence as a set of margins and paddings that relate to each other.
- Typography: multiply a base font size by φ to get heading sizes. A full φ scale grows quickly (16, 26, 42, 68px), which suits posters and bold landing pages. The √φ option gives smaller steps that work better for text-heavy interfaces.
A note on the claims
The golden ratio does show up in some plant growth patterns, such as the spacing of seeds in a sunflower head. Many popular claims are overstated, though: there is little evidence that the Parthenon or the Mona Lisa were designed around it, and studies haven't found that people reliably prefer golden rectangles over similar proportions. Treat it as a useful, consistent proportion rather than a guarantee of beauty.
