Golden Ratio Calculator
Divide a length at φ, get the type scale and the golden rectangle, and read why the ratio is useful without being the law of beauty it is sold as.
φ 1.618034
1 / φ 0.618034
Your whole 960px
Whole 960px
Longer part 593.313px
Shorter part 366.687px
Longer ÷ shorter 1.618034
Whole ÷ longer 1.618034
A golden rectangle
Width 960px
Height 593.313px
aspect-ratio 1.618034 / 1
Type scale on φ, from 16px
-2 6.111px (0.382rem)
-1 9.889px (0.618rem)
base 16px (1rem)
+1 25.889px (1.618rem)
+2 41.889px (2.618rem)
+3 67.777px (4.2361rem)
+4 109.666px (6.8541rem)
Fibonacci closes in on φ
8 / 5 1.6
34 / 21 1.619048
144 / 89 1.617978
610 / 377 1.618037
Dividing 960px at the golden ratio gives 593.313px and 366.687px. The
property that makes it the golden ratio is that both divisions come to
the same number: the whole over the longer part is 1.618034, and the
longer over the shorter is 1.618034. No other ratio does that.
That self-similarity is the real argument for using it. A scale built on
φ looks the same at every zoom level, because each step stands in the
same relation to its neighbours as the pair above it.
The folklore is another matter. The Parthenon, the Mona Lisa and the
nautilus shell do not measure to 1.618 without choosing the measurement
to fit, and the preference experiments found people liking a broad band
of rectangles rather than one. Use φ because the scale is coherent, not
because it is supposed to be objectively beautiful.
The practical catch is that 1.618 is a big step. From 16px the next size
up is 25.889px and the one after is 41.889px, so a page has a heading, a
subheading and body text with nothing usable in between. If a scale
feels too coarse, the ratio is the reason, and 1.25 or 1.333 gives you
more room.
Fibonacci ratios converge on φ, so the numbers designers reach for out
of habit, 8, 13, 21, 34, are golden-ish and each pair is a little off.
They are also all whole numbers, which for spacing on a pixel grid is
worth more than the third decimal place of the ratio.
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
φ is 1.6180339887…, and it has exactly one property worth building on: it is the only ratio where the whole is to the larger part as the larger part is to the smaller. Divide 960 at φ and you get 593.313 and 366.687, and both divisions come out at 1.618034.
That self-similarity is real and it makes a coherent scale. The rest of what gets said about the golden ratio, the Parthenon, the Mona Lisa, the nautilus shell, does not survive measurement, and this page says so rather than repeating it.
How to use
- Put in a length, and say whether it is the whole or one of the two parts.
- Read the division, the golden rectangle and the type scale.
- Use the scale if you want φ-based type, and read the last note before you commit to it.
Example
960px divided at the golden ratio, with a 16px base for the scale:
φ 1.618034
1 / φ 0.618034
Your whole 960px
Whole 960px
Longer part 593.313px
Shorter part 366.687px
Longer ÷ shorter 1.618034
Whole ÷ longer 1.618034
A golden rectangle
Width 960px
Height 593.313px
aspect-ratio 1.618034 / 1
Type scale on φ, from 16px
-2 6.111px (0.382rem)
-1 9.889px (0.618rem)
base 16px (1rem)
+1 25.889px (1.618rem)
+2 41.889px (2.618rem)
+3 67.777px (4.2361rem)
+4 109.666px (6.8541rem)
Fibonacci closes in on φ
8 / 5 1.6
34 / 21 1.619048
144 / 89 1.617978
610 / 377 1.618037Look at the scale before you use it. From 16px the next size is 25.9px and the one after is 41.9px. There is nothing between body text and a large heading, and the step down lands at 9.9px, which is too small for anything a reader has to read.
Pitfalls
φ is a coarse ratio for type. 1.618 per step gives you three or four usable sizes on a page. If your scale feels like it is missing a size, it is, and 1.25 or 1.333 will give you the room. Use φ where you want obvious hierarchy and few levels.
The famous examples do not measure up. The Parthenon fits a golden rectangle only if you choose which parts of it to measure. The Mona Lisa’s proportions depend on where you decide her face starts. The nautilus is a logarithmic spiral with a growth rate that is not φ. None of that makes the ratio useless; it makes the marketing untrue.
The preference research is weaker than it is quoted as being. Studies asking people to pick a favourite rectangle find preferences spread across a wide band, and results shift with how the question is asked. There is no experimental case for 1.618 being uniquely pleasing.
Fibonacci is golden-ish, not golden. 8/5 is 1.6, 34/21 is 1.619, 144/89 is 1.61798. Each pair alternates above and below φ and closes in. For spacing, the whole numbers are usually worth more than the exact ratio, because they land on the pixel grid.
A golden rectangle is not a golden ratio layout. Dividing a page at φ once is a proportion; dividing every element at φ is a pattern, and it stops being interesting about three levels in.
Rounding accumulates. A five-step scale computed by multiplying a rounded value each time drifts from one computed with powers. This tool uses powers of φ from the base, which is the version that stays consistent.
Compatibility
Arithmetic in the browser: nothing is uploaded and nothing is stored. The share link carries the figures.
φ is computed as (1 + √5) / 2 in double precision, which is exact to about fifteen significant figures, far past what any layout can use. The identities φ² = φ + 1 and 1/φ = φ − 1 both hold in the output, which is a decent check that the arithmetic is doing what the definition says.
The aspect-ratio line is a CSS property value you can paste directly; it has been
in every current browser since 2021 and it replaces the old padding-top box trick.