Using the golden ratio in layout and typography
Practical ways to apply phi to grids, columns, image crops and type sizes, plus the honest limits of the divine proportion.
From a single number to a balanced split
Most golden-ratio work starts with one fixed measurement, such as a container that is 960 pixels wide or a page that is 100 millimetres tall. Feeding that number in as the whole gives you a longer and a shorter segment that many people find naturally pleasing. A common use is a two-column layout where the content column takes the longer 61.8 percent and the sidebar takes the shorter 38.2 percent. Because the tool also works from the longer or shorter piece, you can start from whichever measurement your design already commits to.
Applying phi to type scales
Typographers sometimes size headings by multiplying a base body size by phi. Starting from 16 pixel body text, one step up is roughly 25.9 pixels and a second step is roughly 41.9 pixels, giving a dramatic, editorial rhythm between levels. The golden ratio is one of the larger ratios used for this, so it produces bold contrast that suits posters and long-form articles more than dense dashboards. If you want a gentler progression, a smaller ratio like a major third is easier to fit into tight interfaces.
Cropping images and framing white space
The same proportion helps when deciding where to place a horizon, a subject or a fold in an image. Dividing a frame by the golden ratio gives placement lines that feel less rigid than dead centre and are close cousins of the rule of thirds. Designers also use phi to set margins and white space, letting the breathing room around content echo the proportions inside it. Enter the frame dimension as the whole and the longer segment marks a natural focal line.
The honest limits of the divine proportion
The golden ratio is a useful starting point, not a law of good design. Studies on whether people truly prefer phi over nearby ratios are mixed, and plenty of admired work uses simple ratios like two to three or one to two instead. Treat the numbers this calculator gives you as a first draft that you then adjust by eye, by grid constraints and by content needs. Consistency across a project usually matters more than hitting phi to the fourth decimal.