Golden Ratio Calculator

Golden ratio calculator for designers

The golden ratio, φ (phi), is about 1.618: two lengths are in golden proportion when the longer divided by the shorter equals the whole divided by the longer. This golden ratio calculator finds the missing lengths from any one of them — split a 1200 px container into 741.64 px and 458.36 px, or find the other side of a golden rectangle — and shows φ itself to as many as 1,000 decimal places.

Designers can go further: get a two-column CSS grid in golden proportion, a typographic scale built on φ with CSS custom properties ready to paste, the Fibonacci ratios that approach φ, and a phi grid or golden spiral drawn over your own photo to check a composition. The photo never leaves your device.

How to use the Golden Ratio Calculator

1. Choose which length you know — the total, the longer part (a) or the shorter part (b) — and type it, with a unit if you like.
2. Read the other two lengths; change Round to for more or fewer decimals.
3. For a page layout, enter the container width and any gap under Golden layout and copy the CSS.
4. For type, set a base font size and how many steps up and down you want, then copy the CSS variables.
5. To check a photo, drop it on the box at the bottom, choose the phi grid, the golden spiral or both, move the spiral’s centre and press Download PNG.

Golden Ratio Calculator features

The golden ratio formula

If a line is split into a longer part a and a shorter part b so that a ÷ b = (a + b) ÷ a, that ratio is φ = (1 + √5) ÷ 2 = 1.6180339887… It is the positive solution of φ² = φ + 1, which gives it neat properties: 1 ÷ φ = φ − 1 = 0.618… and φ² = 2.618….

So from a total T, the longer part is a = T ÷ φ (61.8% of T) and the shorter part is b = T ÷ φ² (38.2%). From the longer part, b = a ÷ φ; from the shorter part, a = b × φ.

Worked example: a 1200 px page split in golden proportion gives a 741.64 px content column and a 458.36 px sidebar, because 1200 ÷ 1.618034 = 741.64. With a 24 px gap, the remaining 1176 px split into 726.81 px and 449.19 px.

Golden rectangles, spirals and Fibonacci numbers

A golden rectangle has sides in the ratio 1 : 1.618. Cut a square off it and the piece left over is another golden rectangle; keep going, and quarter-circles drawn through the squares trace the golden spiral used in the photo overlay.

Ratios of consecutive Fibonacci numbers — 3/2, 5/3, 8/5, 13/8 and so on — land alternately above and below φ and get closer every step. By 89/55 = 1.61818 the gap is under 0.00015, which is why designers often use Fibonacci numbers such as 8, 13, 21 and 34 as spacing steps.

Using φ in design — and its limits

• Type: a 16 px base times φ gives 25.89 px, 41.89 px and 67.78 px headings — a bold scale that suits posters and landing pages. Text-heavy pages often use a gentler ratio. Convert sizes with the px to rem converter.
• Layout: a 61.8 / 38.2 split balances a content column against a sidebar. Use the fluid fr version so it holds at every width, and stack the columns on phones.
• Photography: phi-grid lines sit at 38.2% and 61.8% of the frame, a little nearer the centre than rule-of-thirds lines at 33.3% and 66.7%. Try both, then crop with the crop image tool or set a frame shape with the aspect ratio calculator.
• Be sceptical of claims that φ hides in famous buildings, paintings or faces: many of those measurements are approximate or chosen after the fact. Treat φ as a useful tool, not a law of beauty.