What This Calculator Does
The Microapp Golden Ratio Calculator takes one length — the longer side (a), the shorter side (b), or the total (a + b) — and returns the other two so that the proportions sit at φ. φ is 1.618033988749895, the unique positive number that satisfies a / b = (a + b) / a. Designers, photographers, typographers, and architects have been using this proportion for centuries because it produces layouts that read as balanced without being symmetrical.
• If you know
a: b = a / φ, total = a + b = a × (1 + 1/φ) = a × φ• If you know
b: a = b × φ, total = b × (1 + φ)• If you know the
total: a = total / φ, b = total − a = total × (1 − 1/φ)All three are derived from a single equation:
x² = x + 1. φ is the positive root.
Where the Golden Ratio Actually Helps
Three concrete uses earn the proportion its place in a designer's toolkit. Outside these, treating φ as magic is mostly folklore.
Layout grids
A page with a main column and a sidebar reads more comfortably when their widths are at φ rather than 2:1 or 3:1. On a 1200-pixel wrap, that's roughly a 742-pixel main and a 458-pixel side. The 2:1 split (800/400) feels mechanical; the 3:1 split (900/300) crowds the sidebar; the φ split reads natural. The same logic applies vertically — hero image height to body height, header to article.
Typography scales
A modular type scale picks one number — the ratio between adjacent type sizes — and multiplies by it at each step. With φ as the ratio, starting from a 16px base:
| Step | Multiplier | Size (px) | Typical use |
|---|---|---|---|
| −1 | 1 / φ | 9.9 | captions, footnotes |
| 0 (base) | 1 | 16 | body text |
| +1 | φ | 25.9 | h4, lede paragraph |
| +2 | φ² | 41.9 | h3, section title |
| +3 | φ³ | 67.8 | h2, article title |
| +4 | φ⁴ | 109.6 | h1, page hero |
φ is on the dramatic end of common type-scale ratios — the 1:1.618 jump between adjacent steps is large. For dense UI (dashboards, admin panels), a tighter 1.125, 1.2, 1.25, or 1.333 ratio reads better. For editorial layouts (long-form articles, magazines, brochures, hero pages), φ lands.
Photography and composition
The "golden ratio crop" is the photographer's version of the rule of thirds, with the dividing lines at 1/φ ≈ 0.382 and 1 − 1/φ ≈ 0.618 of the frame instead of at 1/3 and 2/3. Place the subject — eyes, horizon, the main element — on one of the inner intersections. The shift from thirds to φ is small (≈5%) but consistent: thirds give a slightly punchier composition, φ gives a slightly calmer one. Crop tools in Lightroom, Capture One, and Affinity Photo all offer both overlays.
The Golden Spiral, Briefly
The famous spiral isn't a property of φ itself — it's what you get when you draw a quarter-circle in each square of a recursively subdivided golden rectangle. Take a golden rectangle. Remove the largest square that fits inside (its side equals the shorter side b). What remains is a smaller golden rectangle, rotated 90°. Repeat. The dashed line in the preview marks the first such subdivision. Draw arcs in each square and the curves connect into the logarithmic spiral that approximates the one in a nautilus shell.
Most "golden spiral in nature" images are loose approximations — real spirals in shells, galaxies, and hurricanes aren't exactly logarithmic and rarely match the golden growth factor. What's accurate: seed-spiral angles in sunflowers, pinecones, and pineapples cluster around 137.5°, which is 360° × (1 − 1/φ). That angle, called the golden angle, packs new growth around the center without two units ever lining up — because φ is the "most irrational" number, never well-approximated by a simple fraction.
What φ Isn't
The Parthenon, the Pyramids, the Mona Lisa, the human face, the Apple logo — most of the "golden ratio appears here!" claims you'll find on Pinterest or in design-101 articles are after-the-fact pattern matching. Measurements don't actually pin to 1.618 in those examples; you can fit any 1.5–1.7 ratio post-hoc and call it golden. The myth grew in the 19th century when mathematician Adolf Zeising started spotting φ everywhere, and it has been over-claimed since.
Two genuine cases survive: plant growth (the golden-angle packing, above) and deliberate use by designers and architects who actually applied it (Le Corbusier's Modulor, some Renaissance-era manuscripts, modern grid systems). The Parthenon and Mona Lisa aren't on that list — the cherry-pick on those was done by 20th-century writers, not by Phidias or Leonardo.
The practical takeaway: treat φ as a useful default proportion, not a universal law. When in doubt about how to split a layout, φ gives a reproducible, balanced answer. It's not magic — it's just a number that doesn't divide cleanly, so it never produces a "boring" symmetrical result.
φ vs. the Other Metallic Ratios
Golden isn't the only proportion in the family. The "metallic ratios" are the positive solutions of x² = nx + 1 for n = 1, 2, 3, …:
| Name | n | Value | Where you'll see it |
|---|---|---|---|
| Golden | 1 | 1.618 | layouts, type scales, photo crops |
| Silver | 2 | 2.414 | octagon geometry, some web headers |
| Bronze | 3 | 3.303 | extreme banner aspect ratios |
For most practical design work, golden is the only metallic ratio that gets used by name. The √2 ratio (1.414) of ISO 216 paper (A4, A3, A5) is sometimes called the "silver ratio" but it's a different number; the property that matters there is that halving a sheet along its long edge produces a sheet of the same aspect ratio.
Quick Reference — Common Golden Rectangles
| Longer side (a) | Shorter side (b) | Total (a + b) |
|---|---|---|
| 100 | 61.80 | 161.80 |
| 200 | 123.61 | 323.61 |
| 500 | 309.02 | 809.02 |
| 1000 | 618.03 | 1618.03 |
| 1200 (page wrap) | 741.64 | 1941.64 |
| 1920 (HD video frame) | 1186.71 | 3106.71 |
Related Tools
For other proportions used in screen design, see the Aspect Ratio Calculator — it handles 16:9, 4:3, 21:9, and any custom width-to-height ratio. For converting design tokens from pixel to rem when building a golden type scale, the Pixel to Rem Converter emits a ready-to-paste CSS variables block. For picking colors that sit at proportional spacings around the wheel, the Color Palette Generator works on similar harmonic principles.