The Golden Ratio: The Ultimate Guide to Understanding and Using It

The golden ratio is a proportion of about 1.618 to 1, written as the Greek letter phi, and designers use it to size layouts, type, and photo crops. Designers everywhere should know about it, because it gives a design one constant step to scale by.

The golden ratio goes by several other names, too:

• Divine Proportion
• Golden Mean
• Golden Section
• Phi (Greek letter)

Studies on whether people prefer the ratio are mixed, so treat it as a proportion to start from rather than as a rule.

The Math Behind The Golden Ratio

I’m going to explain the golden ratio’s math as plainly as possible, without the details you don’t need. If you can keep up with the math, great. But if you can’t, that’s okay – you’ll still be able to use the concept in your designs.

The Golden Rectangle

A golden rectangle is a rectangle that leaves a smaller rectangle with the same proportions when you cut a square off it. The sides of the square are equal to the shortest length of the rectangle:

Source: Wikipedia

The golden ratio is exactly (1 + the square root of 5) divided by 2, which is about 1.6180339887. It is irrational, so its decimals never end or repeat, in the same way pi is about 3.14 but never exactly 3.14.

You take a line and divide it into two parts – a long part (a) and a short part (b). The entire length (a + b) divided by (a) is equal to (a) divided by (b). And both of those numbers equal 1.618. Multiplying or dividing any dimension by 1.618 scales an element up or down by one constant step.

Back To The Golden Rectangle, Because It’s So Much Easier To Understand

When you place a square inside the rectangle, it creates another, smaller rectangle. Ignore the black lines and look at the red and green boxes:

The red square has four sides equal in length, and that length is equal to the shortest length of the rectangle. By sectioning off that square, you automatically create another, smaller rectangle (outlined in green). Together, they create a complete golden ratio layout and a base for the golden spiral.

You can also make a new golden rectangle out of the smaller rectangle, like this one I’ve outlined in blue:

The same shape repeats without end, and a traditional diagram draws eight of the rectangles:

And here’s the smallest golden rectangle, #8:

If you start in the bottom left and make an arc to connect the far side of each square-and-small-rectangle cross section, you’ll get the golden spiral.

The Fibonacci Sequence

The Fibonacci sequence is pretty simple to understand: you start with zero and 1, then get the next number by adding up the two numbers before it. 0 plus 1 is 1, then 1 plus 1 is 2, and so on. The first few numbers in the sequence are 0, 1, 1, 2, 3, 5, 8, 13, 21, 34.

Each Fibonacci number divided by the one before it gets closer to 1.618, and it never equals it:

If you use those numbers to create squares with those widths, you can create a close approximation of the golden spiral:

The Golden Circles

Sometimes, you’ll see circles drawn in the squares instead of or in addition to the spiral. If you draw perfect circles in the boxes of the golden ratio overlay, they’ll have the 1:1.618 ratio with one adjacent circle.

Source: Limelight Department

The Golden Ratio In Nature

Nature uses the golden angle more than it uses the ratio itself. The golden angle is about 137.5 degrees, which is 360 degrees divided by phi squared, and a plant such as a sunflower places each new seed at that angle from the last, which packs the seeds into spirals.

Photo by Bogomil Mihaylov on Unsplash

Spirals turn up in plants in many forms, and rose petals overlap in one:

Source: Photo by Annie Spratt on Unsplash

The nautilus shell is a spiral too, but measured shells grow by a ratio of about 1.3, not 1.618.

The Golden Ratio In Art And Design

Designers have worked with the ratio on purpose for centuries. Luca Pacioli published De Divina Proportione in 1509, with illustrations by Leonardo da Vinci. Salvador Dalí painted The Sacrament of the Last Supper on a canvas of 267 by 166.7 centimeters, a ratio of 1.602. Le Corbusier built the Modulor, a measuring system around a 183 centimeter figure, on two series of golden ratio steps, one of which runs 27, 43, 70, 113, 183, and 296 centimeters.

Sometimes the golden ratio is super easy to recognize:

Source: staceysdetailinginc.com

Sometimes you go, “I have no idea what you’re talking about… oh wait. Now I see it. I think.”

Source: Marketing Insiders

A Commonly-Referenced Example: The Parthenon

Source: Creative Bloq

At first, you might see this and go, “That just looks symmetrical to me. How does what I’m looking at fit into that golden rectangle spiral thing?”

The golden ratio isn’t about how each part of a design fits completely and only into the specific sections. If that was the point, the right side of the Parthenon would be one big block and the left side would be sectioned into smaller blocks.

Instead, the ratio is used to create harmony and proportion, and that can be interpreted in a few different ways.

While the golden ratio is grounded in math, it can be adapted in creative ways. In the case of the Parthenon, the golden ratio is said to determine the height and placement of design components, though that claim is disputed. Plus, there are a number of ways to lay golden ratio diagrams over it:

Source: Archinect

Source: Esther Sugihto on Medium

Source: GoldenNumber.net

The Golden Ratio And Website Design

Whether you’re into math or your head’s about to explode, the golden ratio is a bit easier to understand in terms of design. You’ve done the heavy lifting. Now it’s time to take the basic overlay and make your web components balanced.

The Golden Ratio And Layout

Set a layout’s width and height to 1:1.618 to get a golden rectangle, for example 1,000 pixels wide by 618 pixels tall. Split the main content area the same way to get a main column and a narrower sidebar: a 960 pixel layout divides into columns of 593 and 367 pixels, a 1200 pixel layout into 742 and 458, and a 1440 pixel layout into 890 and 550.

Calculator Soup has a helpful golden ratio calculator where you can set any term (A, B or A + B) to find the correct golden ratio values.

A layout grid with a 61.8 percent column and a 38.2 percent column gives you the same split in a design tool, and it keeps elements aligned to that split, so the layout avoids clutter. A fixed ratio does not survive a narrow screen, though: when the columns stack on a phone, the split no longer applies, and the stacked order takes over.

The Golden Ratio In Divi 5

Divi 5’s Flexbox rows include a 3/5 and 2/5 column template, a 60/40 split that is a practical version of the golden ratio, since the exact split is closer to 61.8/38.2. Our guide to mastering the golden ratio in design shows how to set up golden ratio proportions with Divi 5’s Design Variables so every page shares them.

The Golden Ratio And Typography

Multiplying a base font size by 1.618 gives the next size up in a type scale: a 16 pixel base gives 26, 42, and 68 pixels. Dividing works the other way. A 32 pixel headline divided by 1.618 gives about 20 pixels for a sub-headline or body text. A line height of 1.5 to 1.618 times the font size is common for body text.

The Golden Ratio And Spacing

The golden ratio can help you determine where to place elements of your design, the proportions to use and where to leave negative space. Here’s a simple example, and you can almost see the golden ratio overlay without even having to put it on top:

Source: Digiarts 2011

This is the same design with the golden spiral applied in Photoshop:

Again, the golden ratio is grounded in math, but applied to a design, it’s not perfect. That design isn’t created on a golden rectangle, so the golden spiral is out of normal proportions. However, you can see how it can guide a designer to choose where to put the largest element of the design, as well as the smallest elements and negative space.

The Golden Ratio And Content

When you think about the golden ratio’s layout and spacing together, you can start deciding where to place content on your website.

Let’s look at the National Geographic website with Canva’s golden ratio overlay on it:

Older version of the Nat Geo site

The layout is split so that content lines up along the spiral’s center line. To the left, there’s a large block of content. To the right, the content becomes denser and there’s a lot more negative space. Toward the center curlicue of the spiral, you’ll see a second National Geographic logo – there’s no better way to drive home branding than to place it where the eye naturally goes.

Here’s a great example of how the golden spiral can lead your eye through a design, even past its main component. This is useful if you have a lot of content to squeeze onto one page. You’ll also notice that even with such a packed and detailed design, there’s still negative space in there.

Source: Design by Helms Workshop. Example from Canva.

Honorable Mention: The Golden Ratio And Images

The golden ratio is also used in photography composition. Instead of creating a golden spiral, the phi grid divides a frame like the rule of thirds, with its lines at 38.2 and 61.8 percent of the width and height, so the sections measure about 38, 24, and 38 percent. Its lines sit closer to the center than the rule of thirds lines.

Place the main subject on a phi grid intersection, or at the tight center of a golden spiral, to draw the viewer’s eye through the image. The goal is to put a subject or main part of a subject on one of the intersecting lines – the subject shouldn’t be centered, and some blocks should be left empty (in most cases, at least – macro photography and close-up portraits will fill almost all of the frame). By doing this, you create a more interesting portrait than if the subject were centered.

Source: Canva

A much simpler and more accessible way to follow this rule is to use the rule of thirds grid, which you probably have on your phone’s built-in camera or your DSLR.

Here’s a picture I took of my cousin’s son. I’ve laid the rule of thirds grid over it to show you where the subject does, and does not, fill the frame.

Also, look how the golden spiral almost-perfectly wraps around the subject:

The rule of thirds grid has sections of equal size, and the phi grid does not, but the two sit so close together, and thirds is so much easier, that this is what photographers commonly use when composing or editing a photo.

Wrapping Up

The golden ratio can be used as-is or adapted to your purposes and tweaked for size – math may have hard-and-fast rules, but creativity doesn’t. While you can use the golden ratio from the get-go to guide your design, you can also use it after you’ve started designing to make tweaks and improvements. The goal is to have the ratio guide you, not to force-fit a design into it.

Ready to play with your website layout even more? Follow our guide to building a golden ratio hero section with Divi 5’s Flexbox.