Use the free Golden Ratio Layout Calculator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
What the golden ratio is
The golden ratio is the number 1.618, often written with the Greek letter phi. It comes from a simple idea: divide a line so that the ratio of the whole line to the longer part equals the ratio of the longer part to the shorter part. That proportion appears in nature, in classical architecture, and in art, and designers have used it for centuries as a shortcut to layouts that feel balanced without looking rigidly symmetrical.
The Golden Ratio Layout Calculator above applies that idea to practical design. Enter a total width, and it splits it into a main column and a side column in golden proportion. Enter a base font size, and it builds a type scale going up and down by the same ratio. The visual preview shows the two columns side by side, so you can judge the balance before using the numbers.
How to size columns with the golden ratio
Take a page 1200 pixels wide. Dividing by 1.618 gives a main column of about 742 pixels and a side column of about 458 pixels. The main column is clearly dominant, which suits an article with a sidebar, a product image with details beside it, or a dashboard with a main panel and a secondary panel. The side column is still wide enough for navigation, related links or a summary box.
The same division works at any size. A poster 900 pixels wide splits into about 556 and 344. A card 600 pixels wide splits into about 371 and 229. The proportion stays constant, so a design system built on the golden ratio feels coherent across page types, because every split follows the same rule.
Check the ratio in the output: main divided by side should read 1.618. If it does not, the numbers were rounded or mistyped. Small rounding differences of a pixel or two do not matter visually, but a ratio of 1.5 or 1.7 is a different proportion and will feel different.
How to build a type scale
Type scales work the same way. Start with a body size, commonly 16 pixels for web text. Multiply by 1.618 for a heading size of about 26 pixels, and multiply again for a display size of about 42 pixels. Divide by 1.618 for captions and small labels, about 10 pixels. Each step relates to its neighbours by the same ratio, so the hierarchy feels orderly: headings clearly outrank body text, and captions clearly sit below it, without any step jumping too far.
Do not use every step on every page. A simple page needs body, heading and caption sizes. A rich editorial page can use the full scale. The calculator shows the whole scale so you can pick the steps your design needs, not so you must use them all.
Where the golden ratio helps, and where it does not
The golden ratio helps most with two-part layouts and type hierarchies, where one element should dominate and the other support. It helps less with grids of equal items, such as photo galleries, where equal columns are the point. It also does not replace judgement: if a golden-ratio sidebar is too narrow for its actual content, widen it. A proportion is a starting point, not a law, and content needs always outrank a formula.
Be honest about the mystique too. Some claims about the golden ratio in nature and beauty are exaggerated. Its value in design is practical, not magical: it gives you a repeatable, defensible way to choose sizes instead of guessing, and the results tend to look balanced because the ratio avoids both equal halves and extreme splits.
Frequently asked questions
Is 1.618 exact? The true value is irrational and continues forever, but 1.618 is precise enough for any screen or print layout. Rounding to whole pixels absorbs the difference.
Can I use the golden ratio for image sizes? Yes. A 1200 by 742 image follows the ratio, and cropping photos to golden proportions gives a consistent, calm feel across a gallery.
What if my layout has three columns? Apply the ratio twice: split the total into main and rest, then split the rest again. That gives three columns in descending golden proportion.
Pingback: Calculadora de Proporción Áurea - Diseños Equilibrados 1.618