Golden Ratio Calculator

About the Golden Ratio Calculator

A length is cut in the golden ratio when the whole is to the longer part as the longer part is to the shorter — Euclid’s “extreme and mean ratio”. Both ratios are then φ = (1 + √5) ÷ 2 ≈ 1.6180339887. Type any one of the three lengths — the whole (a + b), the longer part (a) or the shorter part (b) — in px, rem, mm, cm, inches or no unit, and the calculator gives the other two at once: 960 px splits into 593.31 + 366.69 px, and a 16 px base extends to 25.89 px.

Around that answer it builds what designers use φ for: the golden scale (your length times and divided by φ, step by step), a page split into a main column and a sidebar with a gap, golden type sizes with line heights, and the golden rectangle cut into squares with its quarter-circle spiral, drawn on the page and exported as an SVG at your length and unit. Without a pass you see a free preview: a watermarked rectangle and the first rows of each table, with the golden parts and every other figure hidden.

Common uses

• Proportioning a page into a content column and a sidebar.
• Sizing headings, line heights and spacing from one body size.
• Drawing golden rectangles and spirals for logos, posters and photo compositions.
• Checking a measurement against the golden ratio in art, architecture or a class.

The formula

If the whole is a + b and the longer part is a, the golden ratio asks (a + b) ÷ a = a ÷ b. Calling that ratio φ gives φ = 1 + 1 ÷ φ, so φ² = φ + 1 and φ = (1 + √5) ÷ 2 = 1.6180339887… (OEIS A001622). From there:

• from the whole: a = whole ÷ φ (61.8 %) and b = whole ÷ φ² (38.2 %);
• from the longer part: whole = a × φ and b = a ÷ φ;
• from the shorter part: a = b × φ and whole = b × φ².

The definition is Euclid’s (Elements, Book VI, Definition 3): a line is cut in extreme and mean ratio when the whole is to the greater segment as the greater is to the less.

The golden rectangle and spiral

A golden rectangle has sides a + b and a. Cut a square of side a off one end and what is left is again a golden rectangle, turned a quarter; repeat, and the squares spiral inward. A quarter circle in each square joins into the familiar golden spiral. That drawing is made of circle arcs; the true logarithmic golden spiral, which grows by φ every quarter turn, runs very close to it but is not the same curve.

Golden layouts

Split a width by φ and the larger column takes 61.8 % of it, the smaller 38.2 %. With a gap between them, the gap comes off first and the rest is divided, so the two columns stay in the golden ratio. In CSS, grid-template-columns: 1.618fr 1fr gives the same split; the page gives exact sizes for fixed layouts and design files.

Golden typography

Multiplying a body size by φ for each step gives a type scale with the golden ratio (16, 25.89, 41.89, 67.78 px); dividing gives smaller text (9.89 px). A line height of φ times the size (about 1.618) is a common choice for body text in wider columns; headings are usually set tighter, so they get 1.2 here. For more steps, fluid sizes and exports, use the Type Scale Generator with the golden ratio.

Fibonacci numbers

The ratio of neighbouring Fibonacci numbers (1, 1, 2, 3, 5, 8, 13, 21, 34 …) gets closer to φ the further you go: 8 ÷ 5 = 1.6, 13 ÷ 8 = 1.625, 21 ÷ 13 = 1.6154, 34 ÷ 21 = 1.6190. That is why grids of 5, 8 and 13 units, or 34 and 21, read as golden.

Limitations

• Lengths are rounded to the decimals you choose for display; the sums use the full values.
• The spiral is drawn with quarter circles, the usual construction; it is close to, but not exactly, the logarithmic golden spiral.
• φ is one proportion among many: use it where it suits the design, not as a rule.
• In the free preview you see a watermarked rectangle and the first rows of each table; the golden parts, the other figures, the SVG and copying unlock with a pass.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.