The Golden Ratio - What it is and How to Use it in Design (2024)

Good design has been up for debate for as long as we’ve been creating. There are endless forums, social media threads, and in-person conversations about what makes for great design, with everyone contributing their own point of view.

That’s the beauty of design, right? Everyone can interpret it differently.

Top Stories

While there will never be a one-size-fits-all approach for design, there is a concrete, mathematical approach that can help us get one step closer to creating amazing design experiences every time: the Golden Ratio.

The Golden Ratio is a mathematical ratio you can find almost anywhere, like nature, architecture, painting, and music. When specifically applied to design specifically, it creates an organic, balanced, and aesthetically pleasing composition.

In this article, we’ll dive into what the Golden Ratio is, how to calculate it, and how to use it in design—including a handy list of tools.

What is the Golden Ratio?

Also known as the Golden Section, Golden Mean, Divine Proportion, or the Greek letter Phi, the Golden Ratio is a special number that approximately equals 1.618. The ratio itself comes from the Fibonacci sequence, a naturally occurring sequence of numbers that can be found everywhere, from the number of leaves on a tree to the shape of a seashell.

The Fibonacci sequence is the sum of the two numbers before it. It goes: 0, 1,1, 2, 3, 5, 8, 13, 21, and so on, to infinity. From this pattern, the Greeks developed the Golden Ratio to better express the difference between any two numbers in the sequence.

How does this relate to design? You can find the Golden Ratio when you divide a line into two parts and the longer part (a) divided by the smaller part (b) is equal to the sum of (a) + (b) divided by (a), which both equal 1.618. This formula can help you when creating shapes, logos, layouts, and more.

You can also take this idea and create a golden rectangle. Take a square and multiple one side by 1.618 to get a new shape: a rectangle with harmonious proportions.

If you lay the square over the rectangle, the relationship between the two shapes will give you the Golden Ratio.

“While there will never be a one-size-fits-all approach for designing, there is a concrete, mathematical approach that can help us get one step closer to creating amazing design experiences every time: the Golden Ratio.”

The Golden Ratio - What it is and How to Use it in Design (1)

If you keep applying the Golden Ratio formula to the new rectangle on the far right, you will end up with an image made up of increasingly smaller squares.

If you draw a spiral over each square, starting in one corner and ending in the opposite one, you’ll create the first curve of the Fibonacci sequence (also known as the Golden Spiral).

Tips

How to use the Golden Ratio in design

Now that the math lesson is over, how can you apply this knowledge to the work you do on a daily basis?

Here are four ways to use the Golden Ratio in design:

1. Typography and defining hierarchy

The Golden Ratio can help you figure out what size font you should use for headers and body copy on a website, landing page, blog post, or even print campaign.

Let’s say your body copy is 12px. If you multiply 12 by 1.618, you’ll get 19.416, meaning a header text size of 19px or 20px would follow the Golden Ratio and balance the 12px body font size.

If you want to figure out how big your body text size should be, you could do the opposite. If your header text is 25px, you can divide it by 1.618 to find the body text (15 or 16 px).

2. Cropping and resizing images

When cropping images, it’s easy to identify white space to cut out. But, how do you make sure the image is still balanced after you resize it? You can use the Golden Spiral as a guide for the image’s composition.

For example, if you overlay the Golden Spiral on an image, you can make sure that the focal point is in the middle of the spiral.

3. Layout

Leveraging the Golden Ratio can help you design a visually appealing UI that draws the user’s attention to what matters the most. For example, a page that highlights a wide block of content on the left with a narrower column on the right can follow the Golden Ratio’s proportions and help you decide where to put the most important content.

Tips
Free icons for product design: The big list

4. Logo development

If you’re designing a new logo and feeling stuck, turn to the Golden Ratio to help you sketch out the proportions and shapes. Many popular logos follow the Golden Ratio, like Twitter, Apple, and Pepsi.

Designer Kazi Mohammed Erfan even challenged himself to create 25 new logos entirely based on the Golden Ratio. The result? Simple, balanced, and beautiful icons.

Photo credit: Kazi Mohammed Erfan

Tools to help you use the Golden Ratio

You don’t need to break out the pencil and paper to calculate the Golden Ratio — there are a number of apps that can do it for you.

Here are five tools to help you use the Golden Ratio in your designs:

  • Golden Ratio Calculator: Calculate the shorter side, longer side, and combined length of the two sides to figure out the Golden Ratio.
  • goldenRATIO: Created for designers and developers, this app gives you an easy way to design websites, interfaces, layouts, and more according to the Golden Ratio. It includes a built-in calculator with visual feedback and features to store screen position and settings, so you don’t have to rearrange the Golden Ratio for every task.
  • Golden Ratio Typography Calculator: Discover the perfect typography for your website by entering your font size and width. You can optimize based on font size, line height, width, and characters per line.
  • PhiMatrix: This Golden Ratio design and analysis software comes customizable grids and templates that you can overlay on any image. It can be used for design and composition, product design, logo development, and more.
  • Golden Ratio Sketch resource: Download a free Sketch file of the Golden Spiral to help with image and layout composition.

Getting started with the Golden Ratio

Once you know what to look for, you’ll start noticing the Golden Ratio everywhere. (Don’t believe us? Look at your hands. Even your fingers follow the Golden Ratio.) The human eye is used to seeing this magical number and we subconsciously react positively to it.

As designers, we can use this number to our advantage. Even small tweaks to the way you crop an image or develop a layout can dramatically improve how your users interact with your design.

Watch it now.
The Golden Ratio - What it is and How to Use it in Design (2024)

FAQs

The Golden Ratio - What it is and How to Use it in Design? ›

Consider the Golden Ratio a useful guideline for determining dimensions of the layout. One very simple way to apply the Golden Ratio is to set your dimensions to 1:1.618.> For example, take your typical 960-pixel width layout and divide it by 1.618. You'll get 594, which will be the height of the layout.

How do you use the golden ratio in design? ›

How is the ratio used in design? Think of a rectangle, with a short side of length 1. To calculate the most aesthetically pleasing rectangle, you simply multiply the length of the short side by the golden ratio approximation of 1.618. So, the long side, in this instance, would have a length of 1.618.

What is the golden ratio and how is it used? ›

The Golden Ratio is a number that's (kind of) equal to 1.618, just like pi is approximately equal to 3.14, but not exactly. 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.

What is the golden ratio and how do artist use it? ›

With a proportion equal to x²=x+1, the golden ratio in art creates a balanced relationship that the mind's eye loves. More precisely, it is about obtaining a precise ratio between the different parts of a work, an image, or an object. The value of this number is 1.61803398874989482045.

How is the golden ratio used in fashion design? ›

The Golden ratio has been widely applied in art, architecture, and design for centuries due to its aesthetically pleasing and harmonious properties. In fashion, the golden mean or golden ratio is used to achieve balanced and visually appealing proportions in clothing and accessories.

How do you use golden ratio in images? ›

In photography, the golden ratio can be used to create balanced and aesthetically pleasing compositions. This is achieved by dividing the frame into thirds, both horizontally and vertically, and placing the subject or key elements of the image at the intersection points of the lines.

Why is the golden ratio so pleasing? ›

Golden ratio enthusiasts argue that the golden ratio is aesthetically pleasing because it's common in the natural world. The proportions of nautilus shells and human bodies are examples of the golden ratio in nature, but these tend to vary greatly from one individual to the next.

How to use golden ratio in real life? ›

Here are a few ways you can use it in your everyday life:- Use it as a guide when creating visual compositions, whether you're designing a website or arranging a vase of flowers. The golden ratio is said to be aesthetically pleasing, so following its proportions can help create an attractive design.

What is the golden ratio of God? ›

This ratio - 1.618 - is an approximation of its true value of [1+√5)/2]. This ratio has served mankind in three ways: it provides beauty, function, and reveals how wise, good, and powerful the Creator is.

How do I find my golden ratio for my face? ›

First, the length and width of the face are measured. Once this is done, the length is divided by the width. The ideal result is considered the Golden Ratio which should equal 1.6. This means a beautiful person's face is about 1 ½ times longer than it is wide.

How is the golden mean used in architecture? ›

The golden section can be found in the proportions of many iconic buildings throughout the world. The Parthenon in Greece, for example, uses the golden ratio to define the proportion of the temple's height to the length of its base. Other structures in Ancient Greece also made use of the golden ratio.

Does the Mona Lisa use the golden ratio? ›

A famous example of the application of the golden ratio is Mona (Figure 4, [6]) Lisa. "Mona Lisa's face is a perfect golden rectangle, according to the ratio of the width of her forehead compared to the length from the top of her head to her chin." ...

What is the golden ratio in beauty? ›

The Golden Ratio, a ratio of 1:1.618 is found in the proportions of the Egyptian pyramids, the nautilus shell, beautiful faces and the ideal body. Our eyes are attracted to objects with this ratio and find them visually appealing.

How to use the golden ratio in design? ›

Consider the Golden Ratio a useful guideline for determining dimensions of the layout. One very simple way to apply the Golden Ratio is to set your dimensions to 1:1.618.> For example, take your typical 960-pixel width layout and divide it by 1.618. You'll get 594, which will be the height of the layout.

What is the golden ratio often used for in design? ›

Use the golden ratio as a guideline for your work to make sure things are nicely spaced out and well composed. With a convention like the rule of thirds or golden ratio, you can create variation and blank space that pleases the eye and makes content easy to comprehend.

What is the golden ratio and what is it used for? ›

The golden ratio has been used to analyze the proportions of natural objects and artificial systems such as financial markets, in some cases based on dubious fits to data. The golden ratio appears in some patterns in nature, including the spiral arrangement of leaves and other parts of vegetation.

What is the use of golden ratio in interior design? ›

In interior design, the golden ratio is 1:1.618 – the most pleasing ratio for objects and their aesthetics. Designers apply this ratio when choosing the layout of a room.

How to use the Fibonacci sequence in design? ›

How To Use It. If you look at the Fibonacci Sequence and consider them as possible section, margin and font sizing it should be clear that it can structure your entire design. The smaller range of the sequence (8, 13, 21, 34, 55) is perfect to decide margins, line heights and font sizes.

How do you use golden ratio in landscape design? ›

Another way to get there is to simply multiply each side by the golden ratio. 5 x 1.618 = 8.09, and 8 x 1.618 = 12.94, so your short side should be roughly 5 feet, your long side should be roughly 8 feet, and short side plus long side should equal roughly 13.

How to use golden ratio in typography? ›

The Golden Ratio in typography

Multiplying the font size with Φ results in a line height that's balanced according to the Golden Ratio. So, for a font size of 16 px, the line height would be calculated like this: 16Φ = 16 × 1.618 = 25.888 (rounded to 26 px).

Top Articles
Latest Posts
Recommended Articles
Article information

Author: Dan Stracke

Last Updated:

Views: 5674

Rating: 4.2 / 5 (63 voted)

Reviews: 86% of readers found this page helpful

Author information

Name: Dan Stracke

Birthday: 1992-08-25

Address: 2253 Brown Springs, East Alla, OH 38634-0309

Phone: +398735162064

Job: Investor Government Associate

Hobby: Shopping, LARPing, Scrapbooking, Surfing, Slacklining, Dance, Glassblowing

Introduction: My name is Dan Stracke, I am a homely, gleaming, glamorous, inquisitive, homely, gorgeous, light person who loves writing and wants to share my knowledge and understanding with you.