Golden Ratio Layout Calculator
Split a width by the golden ratio, the rule of thirds and other classical proportions, and see the modular scale each produces for type and spacing.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
The golden ratio is a useful constraint, not a law of beauty
The claim that 1.618 appears throughout nature and art, and that people find it inherently pleasing, is largely a nineteenth century invention repeated ever since. Controlled studies find no reliable preference for it over other proportions, and the famous examples in the Parthenon and Renaissance painting mostly involve choosing where to draw the rectangle. What it does provide is a consistent ratio to divide by, and consistency is what makes a layout look considered.
Any consistent ratio works
The reason proportional systems help is that they replace dozens of independent decisions with one. Whether the ratio is 1.618, 1.5, 1.414 or the 4:3 of a musical fourth matters far less than using the same one throughout. The square root of 2 has a practical advantage the golden ratio does not: it is the ISO paper ratio, so halving an A4 sheet gives an A5 of identical proportion, which is why it is the standard for print.
Round to the grid, then check
A ratio produces values like 61.8 percent and 23.6 pixels, which have to be rounded to something the layout can use. After rounding, the relationship the ratio was chosen for is approximate rather than exact, and at small sizes the rounding dominates: a 4 pixel step and a 5 pixel step in a scale that wanted 4.6 are visibly different. Choosing a base size where the rounded steps land on useful numbers matters more than the ratio itself.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Is the golden ratio really more pleasing?
Controlled studies find no reliable preference for it over other proportions. The claim is largely a nineteenth century invention, and the famous historical examples mostly depend on choosing where to draw the rectangle.
Then why use a ratio at all?
Because it replaces dozens of independent size decisions with one, and that consistency is what makes a layout look considered. The specific number matters far less than using the same one throughout.
Which ratio should I choose?
The square root of 2 has a practical argument: it is the ISO paper ratio, so halving a sheet preserves the proportion. 1.5 and 1.25 give gentler scales that produce more usable intermediate sizes than 1.618, which grows quickly.
Why do my rounded values break the ratio?
Because a ratio produces fractional values that have to be rounded to something usable. At small sizes the rounding dominates the ratio, so pick a base size where the rounded steps land on numbers your grid can use.
Does this apply to type as well as layout?
Yes, and type usually needs a gentler ratio. 1.618 between consecutive text sizes leaves large gaps with nothing usable in between, which is why most type scales use something between 1.125 and 1.333.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Enter a total width to see how each classical proportion divides it.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.