How to use the Golden Ratio Calculator
- Enter a length and pick a unit (px, mm, cm, in, pt, or plain units). It can be a canvas width, a page height, a column, anything you want to divide.
- Say what the number is. Whole splits it into a longer part a and a shorter part b. Longer part treats your number as a and finds b and the whole. Shorter part works upward from b.
- Read and copy. The five boxes show a, b, the whole, your length × φ and your length ÷ φ. Click any box to copy that number, set Decimals for the precision you need, or press Copy values for everything plus the math.
- Use the drawing. The golden rectangle and spiral are drawn from your numbers and labeled with them. Download SVG to drop it into Illustrator, Inkscape, Affinity or Procreate as a guide layer.
- Switch tabs for screen work. Type scale builds font sizes that grow by φ from your base size, and Layout columns splits a container into a content column and a sidebar, with CSS ready to copy.
Where the golden ratio earns its place
Two lengths are in the golden ratio when the whole relates to the longer part exactly as the longer part relates to the shorter: (a + b) ÷ a = a ÷ b. Only one number does that, φ (phi) = (1 + √5) ÷ 2 = 1.6180339887… It has two neat properties you can see in the calculator. Its square is itself plus one (φ² = 2.618…), and its reciprocal is itself minus one (1 ÷ φ = 0.618…). So splitting 1000 gives 618.034 and 381.966, and the smaller piece is exactly 1000 ÷ φ².
In practice φ is useful because it’s unequal without being lopsided. A half-and-half split looks static; a 90/10 split looks accidental. A 62/38 split reads as deliberate, which is why it’s handy for placing a horizon, sizing a mat with a heavier bottom margin, or deciding how much of a poster belongs to the image and how much to the text.
Be skeptical of the grand claims, though. Many famous “golden” buildings and paintings only fit φ after someone chose convenient points to measure, and the nautilus shell, while a genuine logarithmic spiral, doesn’t grow by φ. Treat φ as one good proportion among several, not as a law of beauty.
The spiral works by repetition. Each square in the drawing has a side 1 ÷ φ of the one before it, and every quarter-circle arc connects two corners. After four quarter turns, a full revolution, the spiral has shrunk by φ⁴, about 6.85 times. That steady shrink is what makes it useful as a composition guide: the eye follows it toward the tight end, so that’s where you put the subject.
How common formats compare with φ
Most stock canvases and papers aren’t golden at all. Here is each long side divided by the short side, against 1.618:
| Format | Ratio | Difference from φ |
|---|---|---|
| 8 × 10 in, 16 × 20 in | 1.250 | −22.7% |
| 11 × 14 in | 1.273 | −21.3% |
| 18 × 24 in, 3:4 | 1.333 | −17.6% |
| A-series paper (A4, A3…) | 1.414 | −12.6% |
| 24 × 36 in, 3:2 photo | 1.500 | −7.3% |
| 16:10 screen | 1.600 | −1.1% |
| 5:3 | 1.667 | +3.0% |
| 16:9 video | 1.778 | +9.9% |
The nearest everyday formats are 16:10 and 5:3, and both are Fibonacci ratios: 5:3, 8:5 and 13:8 (1.625) close in on φ as the numbers grow, and by 34:21 the difference is about 0.1%. If you want a truly golden canvas, set the long side and let the calculator give you the other: a 36 in wide panel should be 22.25 in tall.
Worked examples
Margins on an A4 sheet. Enter 210 mm as the whole: the longer part is 129.79 mm and the shorter 80.21 mm. Place a vertical fold, a column edge or the main subject at 129.79 mm from one side.
A blog layout. In Layout columns, a 1200 px container with a 32 px gap gives a 721.9 px content column and a 446.1 px sidebar, which CSS can express simply as grid-template-columns: 1.618fr 1fr.
Headings. From a 16 px base, φ steps give 25.89, 41.89, 67.78 and 109.67 px. That climbs fast; most sites only need two or three steps. For gentler scales such as 1.25 or 1.333, use the Type Scale Generator.
Tips from practice
Use it for one decision, not every one. A layout where every margin, column and font size is golden tends to look mechanical. Pick the one proportion that matters most, usually the main division of the picture plane, and set the rest by eye.
Round to your medium. A painting doesn’t care about 129.787 mm; 130 mm is fine. Set Decimals to 0 or 1 for physical work and keep 2–3 for screen layouts where pixels add up across a grid.
Overlay, then adjust. Import the SVG as a top layer at low opacity, compose underneath it, and hide it before you judge the image. The Composition Overlay Tool lets you lay the golden spiral and other guides directly over a photo of your work.