The
Golden Ratio

November 30, 2021



Most designers have heard about the golden ratio but generally people tend to be hot or cold about it. Either it’s a totally abstract theory or it’s 100% necessary in every design. The goal here is to discuss the ratio, its origins and its place in design. While not every design needs the integration of the golden ratio, using it often leads to balanced design that makes sense to the eye. Just like kerning, once you begin to see the ratio in design it’s hard to unsee.

THE FIBONACCI SEQUENCE

The golden ratio does in fact come from nature, originating from the Fibonacci Sequence. The theory is, if you look at a rose or a sunflower, you’ll notice that each petal is not stacked perfectly on top of each other. Using the ratio to create an angle, which is an irrational number, the petals arrive in a new spot each time, resulting in a more optimized petal sequence to catch light for photosynthesis. The sequence can be found many places in nature.

This is 3 examples of how the fibonacci sequence creates a spiral shape in nature, a hurricane spiral, a coral that swirls in on itself, and a spiky plant that makes a spiral as it goes to the center with the power of an irrational number.
This is 3 examples of how the fibonacci sequence creates a spiral shape in nature, a hurricane spiral, a coral that swirls in on itself, and a spiky plant that makes a spiral as it goes to the center with the power of an irrational number.

The 1:1.618 ratio is what makes this phenomenon possible. An irrational number allows nature to organize itself in the most optimal pattern possible, which also appeals to the human eye.

All right, so how does this all relate to that rectangle with a spiral in it? And how does it apply to design? Well, the Golden Rectangle is a shape divided using the ratio number and fit into itself repeatedly as seen in nature. Eventually someone drew a connection between the rules of nature and design itself through the golden rectangle.

Other names given to the golden ratio over the years: golden section, golden mean, the divine proportion, the golden cut, and the golden number.

This diagram shows the visual relationship of the 1:1.628 ratio, its a square and a rectangle that fit into each other basically.
This diagram shows the visual relationship of the 1:1.628 ratio, its a square and a rectangle that fit into each other basically.
This Diagram shows the previous square and rectangle fitting into each other, this combination visualizes the golden ratio of 1:1.618.
This Diagram shows the previous square and rectangle fitting into each other, this combination visualizes the golden ratio of 1:1.618.

LOGOS

Let’s start with a very abstract relationship between design and the golden ratio. Traditionally, a logo wants to live in the space of a square. However, if you think about creating an actual mark with the ratio in mind, a popular take is to use ratio circles to create a mark that fits in a square.

This is the actual visualization of the golden ratio rectangle with the spiral in it, this is what people typically associate the golden ratio with.
This is the actual visualization of the golden ratio rectangle with the spiral in it, this is what people typically associate the golden ratio with.
A Diagram showing how people take the Golden ratio and create circles out of it to start to make 'golden circle' logos.
A Diagram showing how people take the Golden ratio and create circles out of it to start to make ‘golden circle’ logos.
A Diagram showing the relationship between the twitter logo and the use of golden circles.
A Diagram showing the relationship between the twitter logo and the use of golden circles.

A great example of this is the Twitter logo. Many have challenged themselves to create golden-ratio-only logos and they look great, but it may be more productive to allow yourself to bend the rules a little bit. Obviously if sophistication is the goal, strict use of golden circles isn’t necessary but a good approach could be basing the design on the ratio then going over it with something more illustrative or loose. Overall, the use of the ratio in the space of logos makes sense and works well but it’s not a black and white rule.

LAYOUT

The use of the golden ratio is still loose in layout design but more grounded compared to its application in logo design. The idea is two-fold, one version of using the golden ratio to assist in content layout. Basically the concentration of the content is focused towards the curled part of the spiral. The remaining spiral/rectangles are used as guides for the rest of the content.

A Diagram showing the relationship between the twitter logo and the use of golden circles.
A Diagram showing the relationship between the twitter logo and the use of golden circles.
A diagram showing how the golden rectangle is used to layout a magazine cover, with the main focus being the outline of the cheek in the photography.
A diagram showing how the golden rectangle is used to layout a magazine cover, with the main focus being the outline of the cheek in the photography.

The second version is an alteration of the rule of thirds. Essentially, you would use these guides to concentrate the content with specific intentions in mind.

A Diagram showing the altered rule of thirds skeleton.
A Diagram showing the altered rule of thirds skeleton.
This diagram shows an altered version of the rule of thirds overlaid over a magazine to demonstrate a balanced composition.
This diagram shows an altered version of the rule of thirds overlaid over a magazine to demonstrate a balanced composition.
This diagram shows an altered version of the rule of thirds overlaid over a magazine to demonstrate a balanced composition.
This diagram shows an altered version of the rule of thirds overlaid over a magazine to demonstrate a balanced composition.

While the two applications align well in multiple parts of the examples, it’s important to realize that these rules aren’t set in stone. You can choose to align perfectly with the ratio or use it as more of a guideline.

TYPEFACE SIZING

The relationship between the golden ratio and font sizes is hard to dispute. If you divide your header size (pixels or point size) by 1.618, or multiply body copy size by 1.618 it’s likely you will get a balanced relationship between the header and text sizes. Keep in mind when mixing different font families, this relationship can be null and void since the individual fonts could be built according to totally different sizing standards. This works best within font families but can be used as a good rule of thumb. When landing on font size remember to give yourself freedom to play with a range of sizes when working with multiple font families. Once you see what the relationship looks like with a balanced header and body copy size, you won’t even have to crunch numbers to strike a balance between the two.

A Diagram showing the relationship between typeface sizes and the golden ratio.
A Diagram showing the relationship between typeface sizes and the golden ratio.

IN CONCLUSION

The golden ratio leads the way to a balanced design but is rarely one size fits all. The applications shown here are specific and time-tested, but that should not stop you from experimenting. Get creative with the application of the ratio itself and use it in new ways. This theory has interesting origins and has done a lot for designers, but creation is at its best when you bend the rules just a little.

The golden ratio is a powerful tool, but don’t let it box you in!

Cheers,
Sammy Sosa
J.O. Design Intern

Share Our Blog!