Golden Ratio Calculator — φ = 1.618 Segments, Sequence & Layout

Real-world use cases

• Build a φ-based type scale from a 16px body size

  You want a heading scale that feels proportional rather than hand-picked. Put 16 into the type-scale calculator and read the golden steps: 9.9 / 16 / 25.9 / 41.9 / 67.8px. Round to 10 / 16 / 26 / 42 / 68px, map them to caption / body / h3 / h2 / h1, and you have a five-step scale where every jump is the same φ factor. If 67.8px feels too aggressive for mobile, that's the signal to use a tighter ratio there — fluid sizing is exactly what the css-clamp-fluid-typography-generator handles next.

• Split a 1200px content container into main + sidebar

  A blog layout needs a comfortable main column and a narrower sidebar. Feed 1200 into the layout calculator: long segment 741.6px, short segment 458.4px. Round to a 742 / 458 split (or 740 / 460 to keep round numbers), set your grid columns, and the proportion reads as deliberate instead of "70/30 because that felt fine". For the responsive breakpoints, pair the split with the aspect-ratio-calculator to keep media blocks consistent.

• Size a logo lockup and its clear space

  You have a 240px-wide wordmark and need clear space and an icon that don't fight it. Put 240 in: the short segment 91.6px is a natural width for a paired icon, and the long-to-short relationship gives you a margin (≈ 91px) that matches the mark's internal rhythm. Designers reach for φ here because the eye reads the icon, mark, and whitespace as one family rather than three unrelated sizes.

• Lay out a golden-rectangle poster or card

  Set a card width of 360px in the rectangle calculator and it returns a height of 222.5px (width ÷ φ) for a landscape golden rectangle, or 582.5px (width × φ) for a portrait one. The live SVG shows the inner square and spiral so you can place the focal point on the spiral's eye — a classic composition trick for hero images and print covers.

• Generate a spacing scale for a design system

  Spacing tokens often start as 8 / 16 / 24 / 32 — linear and a bit flat. Drop your base unit (say 8) into the sequence and use the golden steps 8 / 13 / 21 / 34 / 55 instead (these are Fibonacci, the integer face of φ). The result is a scale that grows the way type and layout do, so margins, gaps, and font sizes all share one proportional language. Lock the colors of those tokens with the color-palette-generator and the system reads as a whole.

Common pitfalls

• Confusing 'divide by φ' with 'multiply by φ'. To split a length INTO two pieces that sum to the original, the long piece is value ÷ φ. To get a BIGGER sibling size, multiply by φ. Mixing these up gives a layout that's 1.618× too big or too small — check whether your two outputs add back to the input (they should for a split).

• Using too many decimals in production. φ is irrational, so raw outputs like 741.64px look precise but render to sub-pixel positions the browser rounds anyway. Pick a precision (whole pixels for layout, 0.01rem for type) and round there — chasing the 4th decimal place is false precision.

• Treating φ as a rule instead of a starting point. A φ split can be too extreme for a 320px mobile column (123/197 feels lopsided on a phone). Use it as a first proposal, then adjust toward a tighter ratio when the content or viewport demands it — the calculator gives you the number, not a mandate.

Privacy