(Last updated on March 18th, 2021)
Are you familiar with the Golden Ratio? Do you use it in your graphic design work? If the answer to both is no, read on to learn more about what the Golden Ratio is and how you use it in graphic design.
The Golden Ratio is a mathematical ratio found both in nature and the human-made world of how certain things are designed. It has also seemed to be around for quite some time, considering its usage.
Such marvels as The Pyramids of Giza and Da Vinci’s painting of The Last Supper have used this same technique. These historical figures have used the rule to balance their work, whether it’s stability in structures or spacing in the artwork.
Since its inception, the Golden Ratio has followed designers into the digital age. It’s now easier than ever to implement such a rule when working on everything from wireframes to branding. The ratio is so incredibly versatile it can be used in just about any project.
What is Golden Ratio?
So what is the Golden Ratio? Well, the exact number for the ratio is 1:1.618033987 and is better known as Phi in Greek. What that translates to is a difference in length of about 161.80px for every 100px. This ratio can be applied to both the spacing of two shapes or the creation of one.
The calculation formula essentially looks something like this: A/B = (A+B)/A = 1.6180033987. Of course, that number is often rounded up in appropriate scenarios. The rounded ratio could be 1.618 or 1.62, depending on how precise your measurements need to be.
The mathematician Fibonacci also played a role in making the Golden Ratio seem more whole with a sequence named after him. The Fibonacci sequence works by declaring each number in a sequence to be the sum of the two that preceded it.
So if your sequence starts with 1, you’d next go to 1. Then the next number would equal 1+1. Then 1+2 for the following number. Then 2+3. This sequencing continues until you have a sequence that should look like this: 1,1,2,3,5,8.
The pattern that takes shape as the Fibonacci sequence is formed ultimately results in the most graphically representative model of the Golden Ratio: the golden spiral.
Even if you’ve never heard of the Golden Ratio, chances are you’ve run across this spiral design at some point if you work within graphic design.
The golden spiral is one of the most common representations of the Golden Ratio as it offers a visual guide as to how such spacing occurs. It can act as both a visual representation of using such space and as a guide for aspects of design. Think of it as a curly ruler of sorts.
But one of the most exciting aspects of the Golden Ratio is that it’s not just a development of humanity for construction and art matters. It is also an aspect that can be found within nature as well. This aspect mainly has to do with the commonality of the spiral shape.
Think of how many times you see a spiral within nature, creatures, landscapes, and elements. You can see the ratio in just about everything, from the tiniest curvature of a snail’s shell to the massive circling of winds within a hurricane.
You just can’t get away from this type of formula when considering how easily it can integrate into the graphic design profession. You can even see it in something as familiar as the 8.5×11 portrait format that reflects the equation.
All of this relation to nature and ancient works is astounding, but how can the Golden Ratio be applied to designs today? Even with all the advancements in graphic design technology, the Ratio can still use.
Let’s take website development as an example. Let’s say you’re trying to design a website with the main text’s main content area and a sidebar for navigation. The Golden Ratio can help us figure out how big the sidebar should be concerning the content area.
The entire content area in this scenario would be a width of 900px. With this in mind, we can calculate how big the main content area and sidebar will be with the equation of 900px / 1.618. The answer for our main content width would then be 556px.
With our main content width figured out, we simply apply the Golden Ratio to this new number to find the width of our sidebar. So our equation of 556px / 1.618 will result in an answer of 343px. It’s that simple.
The Golden Ratio can also be used within this same scenario to calculate the height of the content areas. The days of scrolling sidebars and navigation are so 1990s, making it all the more important in web design to keep your sidebars free of extra scrolling, be they fixed-positioned or otherwise.
Through this aspect, we can see how easily the Golden Ratio can fit into the evolving nature of the design. Through either multiplication or division, you can use this equation to implement a more user-friendly strategy of perfectly spaced columns.
Of course, this equation won’t give us the complete answer, as anyone involved in web development will tell you there are margins, padding, and formatting to consider when making these measurements. But the Golden Ratio should give you a good idea of how to start the basic construction of a website.
It doesn’t just stop with the main content and sidebar either. With some other equations, we can get a good idea of how the different aspects of the header, footer, navigation, and other containers on a website will be sized accordingly.
Another area where the Golden Ratio can be quite helpful is in the development of posters. When posters communicate information, theirs often a certain sense of formatting within the text that makes it appealing. The Golden Ratio has a hand in this aspect.
In this case, it’s not so much that the Golden Ratio determines the artistic spacing but the typography itself. Take a look at most posters, and you’ll notice there’s a difference in font sizes and spacing. The ratio can be used in determining just how that font will appear.
You can use the information on both the width of your poster and your font size to determine how it will appear on the poster. This can be used to calculate the more effective line-height and what sizes below or above you should use next.
If you want an easy way to test this out, there’s an online calculator that utilizes the Golden Ratio for typography. The Golden Ratio Typography (GRT) Calculator works by plugging in the font type, font size, and content width to determine how to proceed with everything else font-wise.
The calculations of this are most beneficial for website design as well when it can be handy in figuring out subheadings and responsiveness. It’s a useful equation for both web designers and web developers when handling the stylesheet of a website.
But the Golden Ratio need not be bound to only the technology of website construction and typographical issues. It can also be a vital component in more creative aspects of illustrations, making the spiral seem more like a guide and less like complicated math.
Notice how certain logos seem to wrap around and lead the eye around the text or force the eye to read a pattern. You can see this happen in the Pepsi logo’s latest iteration, the way the white swoop within the circle appears titled now.
The sizing of where the swoop is at its largest is an aspect of the Golden Ratio at work. Notice how it only bulges to a certain degree that reflects the border-spacing. The total size of the circle itself determines how big the border and how big the swoop.
Coupled with the 36-degree placement of the inner swoop’s bulge, we can see how Pepsi’s new design follows the Golden Ratio better than the previous logo. While the other logo was reasonably straightforward with an even wave, the new method leads the eye to follow a spiral better.
The Golden Ratio can easily be seen in several logos as they’re built to be simplistic enough to read. You can easily see how the ratio applies to such other examples as Apple and Twitter’s logos when considering their shape and white space.
In terms of layout, we can see how this ratio works best in movie posters. Most movie posters are meant to lead the eye and focus our attention on specific elements and text. For this reason, the Golden Ratio is handy when communicating a lot of information at once.
Take a look at the poster for Return of the Jedi. A lot is going on in this poster. We have multiple characters in the background and foreground and text, both big and small, to communicate the title and credits.
But notice how the eye is led to the critical points of the poster. We get the title in big letters, sure, but we also get the main characters positioned center-right and in the brightest hues. You can see the spiral start to form the way everything wraps around them.
Not all movie posters strictly follow this rule, as some become quite experimental. But most posters generally aim to present critical information, both visually and typographically, while not crowding the screen with the smaller credits.
Posters are a perfect example of how the Golden Ratio can be used for every aspect of two-dimensional composition. When organizing combinations of shapes, colors, images, landscapes, and text, having a solid grasp of spacing can be a crucial aspect of making your postable digestible to the eyes.
You can try it out for yourself to see just how well this formula fits. Find a Golden Ratio overlay and trying placing it over your favorite posters. Notice the placement of everything in that poster and how effectively it communicates such a design’s intention.
If we go further into how the Golden Ratio applies to artwork, it can be a useful image composition tool. This doesn’t have to be as technical or mathematical as previous examples of design. It can be as simple as just overlaying a spiral to see where your illustration will go.
The spiral can be useful in determining a focal point for your artwork. The next time you’re working on a landscape, try placing the Golden Ratio spiral over your work and see where it rests for your crucial point of focus. How does everything around it look? Is there a flow?
Using the spiral can be quite a tool in determining the placement and details of your artwork. It can be used as literally as tracing out a swirling coffee cup or as technically as planning out order and color concepts.
Though the ratio and spiral grid can seem relatively rigid, there’s an absolute harmony that can be accomplished by using it in your artwork.
Don’t think of it so much as a roadmap as it is a way to lead the eye in your work. The spiral can be an easy way to pinpoint the central subject while finding an appropriate placement for other elements.
What’s most remarkable is that many artists may already be using the Golden Ratio without realizing they’re doing it. There’s a school of thought that the spiral is more of a subconscious effort by designers, and it’s applied whether you know it or not.
So if you’re a graphic designer and haven’t been using the Golden Ratio prior, maybe take a look back on your previous work. Try applying the Ratio math or spiral to your artwork. Do you see any relation to the flow and focus? You may be surprised at what you discover.
At any rate, it’s beneficial to be aware of the Golden Ratio in your graphic design work to understand not just why it works but how it can make designs naturally appealing. It may just be a useful tool you never knew you’d been using all along.
Useful Tools and Tips
So if you haven’t been using the Golden Ratio before, you be asking just how you can better incorporate it into your designs. Well, there are several ways to do this, but the thing to remember is the ratio number of 1.618 for your more precise graphic design projects.
There are also plenty of tools you can use to help you bring the ratio into your work. For the more traditional artists, there are Golden Ratio calipers that can make drawing a lot easier to adhere to such measurements.
In terms of digital graphic design, we’ve already mentioned the usefulness of the Golden Ratio Typography Calculator. But there’s also the Phiculator for MacOS, which works rather well at keeping together the Fibonacci sequence.
The Phiculator is relatively easy to use and will save quite a bit of time. Rather than guessing which number comes wherein the Fibonacci sequence, you can simply type in that number, and it’ll automatically be found where it is in how it applies to the Golden Ratio.
You can see how the Golden Ratio can apply by drawing it out. Start by drawing a 1-inch square. On one side of the square, draw a dot right in the center of that line. From that dot, draw a line to a corner on the opposite end.
Now all you have to do is draw that same line to extend horizontally on the bottom. Essentially, push the line down clockwise. If you’re not making the square in a digital program where this is easier, use a circular tracing instrument to find the correct path.
With this drawing, you can extend the shape to form a complete rectangle with the Golden Rule on each side’s length. Notice each side’s measurements that contribute to creating the equation of extending a square into a rectangle.
There’s also no shortage of tutorials and videos online to figure how to bring the Golden Ratio into your graphic design projects. Check out the following tutorials and videos on the subject below:
- How to design a logo with golden Ratio | Adobe Illustrator Tutorial: YouTube user Mohamed Achraf provides a video tutorial on creating the Golden Ratio spiral in Illustrator and utilizing it to create a unique logo with a combination of both the equation and shapes.
- The Secret to Good Art! / The Golden Ratio / A Life Changer!: YouTube channel Monet Cafe’ with Artist Susan Jenkins takes a look at the more profound wonders of the Golden Ratio that can be found within our organic world, spanning from paintings to plants to paintings. You can also see how the Fibonacci sequence applies to our bodies as well, a product of repetition ingrained within our DNA.
- Art lesson- How to use the Golden Section for Character Design: Illustrator Stephen Silver demonstrates the importance of using the Golden Ratio to design cartoon characters. Using some essential measuring tools, he shows how to craft compelling and exaggerated characters that follow this rule.
- The Secret to Good Art! / The Golden Ratio / A Life Changer!: Andrew Tischler breaks out the chalkboard and measurement instruments to focus on how it is just as important in art as it is essential.
- How to Create a Golden Ratio Grid in Photoshop, Illustrator, or InDesign: For those who use the Adobe Creative Suite, Adobe itself provides a helpful guide on how to bring the Golden Ratio into your creative work for Photoshop, Illustrator, and InDesign.
- How to Use the Golden Ratio in Photography Composition: The website Expert Photography delves into how to use the Golden Ratio for the production and post-production of taking photographs.
There are plenty of other resources out there for this subject. Chances are, you can probably think of some different ways to use this ratio and sequence now that you’re aware of its many workings. It’s all about how you look at the world and how you perceive it through such divisions of space and repeating sequences.
The Golden Ratio has so many fascinating applications that it should become an essential aspect of any graphic designer’s arsenal. It’s useful not only for spacing your many visual assets into an orderly but also for determining color and general construction.
Understanding the rule need not be a complicated endeavor despite some math being involved. This especially true since the only key number memorize is 1.618 when it comes to making your calculations. The math may get tricky, but the foundational formula is quite simple.
What’s most important about the Golden Ratio is recognizing its pattern present all around us. It’s one of those aspects that always seems present but may be hard to articulate for those who have never heard of the ratio.
Recognizing its presence can help better explain what makes some designs and patterns so appealing. With enough tinkering and imagination, graphic designers can find themselves quickly applying the Golden Ratio to all aspects of their work.
Whether it’s bringing order to a design or finding the right balance of white space, there’s no limit to just how far this theory can go in the realm of photography, illustration, and so much more.
Mark McPherson has been working as a video editor and content writer for over ten years. His background started in animation and video editing before shifting into the realm of web development. He also branched out into content writing for various online publications. Mark is an expert in video editing, content writing, and 2D/3D animation.