The golden ratio, written φ and pronounced “fi” (like the Greek letter), is approximately 1.618. It appears in enough design advice that it shows up as a layout heuristic: split a column by the golden ratio, size your sidebar by the golden ratio, make your card thumbnails golden rectangles. This tool does the arithmetic so you don’t have to.
Enter any one of the three values — total length, long segment, or short segment — and the calculator fills in the other two. A visual bar shows the split so you can see at a glance whether a given number looks right for your layout.
The formula
The golden ratio is defined as the positive solution to $x^2 = x + 1$, which works out to:
Its defining geometric property is that when a length is split into a long part $a$ and a short part $b$ (with $a > b$), the ratio of the long part to the short part equals the ratio of the whole to the long part:
From that single identity you can derive everything else. If you know the total length $T$:
If you know the long segment $a$:
And if you know the short segment $b$:
The tool applies whichever of these three formulas matches your input.
Example: splitting a content column
You have a 960 pixel content column and you want to split it into a main area and a sidebar using the golden ratio. Enter 960 as the total, read off the results: the main area is about 593 pixels, the sidebar about 367. Round to clean numbers — say 600 and 360 — and you are close enough for layout work. The 40-pixel fudge is invisible on any normal screen, and you have nicer numbers to reason about.
If you work the other way — you know the sidebar should be 320 pixels and you want to find the matching main area — enter 320 as the short segment. The long comes out to 518, the total to 838. If 838 fits your grid, you are done. If not, pick a rounder number for the total and re-split.
Example: a golden rectangle
A rectangle is “golden” when its long side divided by its short side equals φ. Want a 1200 pixel wide golden rectangle? Enter 1200 as the long segment and read off the short: 741.6 pixels. Round to 742 and you have a golden rectangle. For tall portrait-orientation golden rectangles, swap the roles — enter 1200 as the long, then use that 742 as the width and 1200 as the height of a portrait image.
Golden rectangles have a curious self-similar property: if you cut a square from one end of a golden rectangle, the rectangle that remains is also golden. Repeat the cut and you get the classic inward-spiralling illustration you have probably seen in a design textbook. It is a nice demonstration but rarely load-bearing in practical design work.
Rule of thirds vs golden ratio
The rule of thirds — common in photography — splits a frame at 1/3 (33.3%) and 2/3 (66.7%). The golden ratio splits at approximately 38.2% and 61.8%. The two are close enough that in casual use they are often interchangeable. The rule of thirds is a little more asymmetric in the other direction and a lot easier to eyeball, which is why photographers prefer it; the golden ratio is slightly more centrally balanced and appears more often in print and web design where the exact numbers are easier to dial in.
If you are composing a photograph, use the rule of thirds. If you are proportioning a grid for a web page, either is fine, but the golden ratio gives you nicer-feeling numbers when you combine it with typical column widths.
Practical notes
- Don’t over-apply it. The golden ratio is a tool, not a commandment. It looks fine when used once or twice in a layout; it looks contrived when every element is nested inside a golden split of the parent.
- Round freely. The visual difference between a 61.8% split and a 60% split is invisible at any realistic size. Snap to whatever grid your design system uses.
- Not all claims hold up. The golden ratio is often invoked with pseudo-mathematical reverence — the Parthenon, sunflower spirals, the Mona Lisa. Most of these stories don’t survive scrutiny. It’s still a useful layout tool, but you don’t have to believe it is sacred.
- For typography, use the golden ratio typography calculator — it uses a $\sqrt{\varphi}$ step between heading levels instead of full φ, which is the version that actually works at web sizes.
What this tool does not do
It only splits a single length. For more elaborate golden-ratio work — spiral generation, nested golden rectangles, Fibonacci sequences — you want a dedicated geometry tool. This calculator handles the one question most designers actually need answered: given this total, what are the two golden-ratio segments?