Golden ratio formulas
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. Drawing a quarter circle through each square gives the spiral approximation shown above; it is not an exact logarithmic golden spiral. 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
Use the ratio to compare proportions, then check the result with the actual content and screen size. Text length, readability and available space may call for a different split.
