Golden Ratio Calculator

Two lengths are in the golden ratio when the whole divided by the longer part equals the longer part divided by the shorter one. The value of that ratio, called phi, is about 1.618. Designers use it as a starting point for splitting a layout into a main area and a sidebar, for sizing nested elements and for choosing steps in a type scale. This calculator does the division in any direction, shows the pieces and draws the classic construction.

The definition

If a line of length 1000 is cut so that the whole to the longer part equals the longer part to the shorter part, the longer part is 1000 ÷ 1.618 = 618.034 and the shorter part is 1000 − 618.034 = 381.966. Dividing 618.034 by 381.966 gives 1.618034, the same ratio as 1000 to 618.034. That self-similarity is what makes the proportion special. Exactly, phi is (1 + √5) ÷ 2, an irrational number that never repeats, which is why the page shows the rounded value to six decimals.

A worked example

Press Sample for a whole length of 1000. The page shows the longer part as 618.034 and the shorter as 381.966, with shares of 61.8% and 38.2%. The two-column CSS it writes is grid-template-columns: 618.03fr 381.97fr;, and a coloured bar below the numbers shows the split. Switch to “Longer part” and enter 960: the whole becomes 1553.313 and the shorter part 593.313. Switch to “Shorter part” and enter 100: the longer part is 161.803 and the whole is 261.803.

The golden rectangle and spiral

A rectangle with sides in the ratio 1 : 1.618 has a special property. Cut the largest possible square from it and the rectangle left over has the same ratio again. Repeat on each remainder and you get a series of squares, each smaller than the last, which the page draws. A quarter circle through each square, joined end to end, makes the spiral. The picture uses eight squares in a box 1000 units wide; the arcs meet at the corners of the squares and each is a quarter of a circle with the square’s side as the radius.

Fibonacci numbers

The list 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144 starts with two ones and adds the last two numbers each time. Divide each number by the one before it and the results, 2, 1.5, 1.667, 1.6, 1.625, 1.615, 1.619 and so on, close in on 1.618. For 144 ÷ 89 the page shows 1.61798. This is why Fibonacci sizes, such as 8, 13, 21 and 34, are a convenient way to choose spacing that roughly follows the golden ratio with whole numbers.

Using it in layout

A 1000 pixel content area splits into about 618 and 382 pixels. A 960 pixel page splits into 593 and 367. With a base text size of 16 pixels one step up the ratio gives 25.9 pixels. These are starting points: round to values that fit your grid, check that content fits and compare against alternatives, because many successful layouts use simpler ratios such as 2:1 or 3:2.

Edge cases

Lengths can be in any unit; the ratio does not care. Very small values, below 0.001, are not accepted. The page shows three decimals, so for printed work check rounding. The CSS output uses fr units, which divide the available space in proportion, so the columns keep the ratio at any container width.

Limits

The calculator is arithmetic and a drawing. It does not claim that the ratio is aesthetically superior, and it does not analyse existing designs. Everything runs in your browser.

Related tools

• Type Scale Calculator can use 1.618 as a ratio for sizes.
• Aspect Ratio Calculator works with other common shapes.
• CSS Grid Generator turns the fr columns into a layout.
• Flexbox Generator lays out a split with flex grow.