Academy Xi Blog

The golden ratio in design

By Academy Xi

Share on facebook
Share on linkedin
Share on twitter
What is the golden ratio

From foliage to architecture, this ancient mathematical ratio is evident across all forms of natural and human-made design. Discover how the golden ratio supports satisfying aesthetics and ways you can apply it to your work.

What is the golden ratio and why is it important?

Also known as the golden mean, golden number, golden section, divine proportion or the Greek letter ‘Phi’, the golden ratio is a mathematical visual aid that enables designers to create balanced works that are aesthetically pleasing for the viewer.

The ratio is 1:0.62. It is used to divide lines and rectangles, which can result in visually satisfying creative compositions. Some artists use the ratio 3:5, which isn’t the exact golden ratio, but is near enough and often applied in paintings. Some artists don’t intentionally use the ratio, yet find their work meets it naturally. 

Why is it important? When applied or experienced in any design, whether it be architecture, painting, sculpture, nature or music – the golden ratio results in an enjoyable experience for those who engage with it. This is important if we want a design to appeal to a viewer and evoke a reaction.

Stunning examples of the golden ratio in art are ‘Starry Night’ by Vincent Van Gough and ‘The Great Wave off Kanagawa’ by Katsushika Hokusai. With Hokusai’s waves, each grows in size, following the ratio. Van Gough’s masterpiece embraces the spiral within the night sky in the background of the work. 

How to use the golden ratio in graphic design

The golden ratio enables the golden spiral and golden rectangle – two of the most frequently used approaches.

  • The golden spiral
    To help define balance within a design, the golden spiral can be used. The Fibonacci sequence creates this spiral, which grows by a factor of the golden ratio. Generally the golden spiral appears as so. A beautiful example in nature of the golden spiral are sea shells.
  • The golden rectangle
    When a rectangle can be separated by a line to create a square and another smaller rectangle, as shown below, ABCD is known as a golden rectangle. The width of AB being less than the length of BC and point E on AD and point F on BC creates a square (BFEA).

    the golden rectangle                                                                     (image source)

The design of the Notre Dame in Paris notably has several golden rectangles within its key proportions, as do many paintings from the Renaissance. As with the golden spiral, this ratio or layout approach creates harmony with design elements and is also commonly used with website and app interface design.

What to use the golden ratio for in Graphic Design

✔️Typography and defining hierarchy
Selecting typography styles, sizes and formats for online or print design can be supported by applying a touch of science, by way of the ratio. 

First up, let’s look at the typography hierarchy. 

Establish the font size for your body or paragraphs. In this example we will say 16pt size. We then multiply 16 by 1.618 (the golden ratio) to find the appropriate header font size, which comes to 25.888 (so round it to 26pt).

If you’re using a 30pt font for your headings, then divide this by 1.618 to select your body text, so 18.54, or 19pt to round it up to a whole number.

✔️ Cropping and resizing images
If you’re using Photoshop, you will have the option to select ‘crop’ and before doing so, apply overlay options, which include the golden ratio, or golden spiral. You can then align the image with these guidelines and crop or resize with confidence.

✔️ In logo design
Either the golden rectangle or golden spiral can be helpfully applied to your logo design to support balanced proportions for each element. As long as the length to width ratio hits 1:1:618, you’ll be onto a winner.

✔️For layouts
By overlaying the golden spiral onto your design canvas (either digital or hardcopy) you can ensure the focal point of your work is in balance. Alongside the spiral, the golden rectangle can be applied to position any other elements. The rectangles can be sized according to what would best suit each element within the overall layout – for example individual text boxes or buttons on a website interface.

Software to help you use the golden ratio

If you want visitors to your website (or those you are designing for) to hang around longer and pay attention, it pays to get the ratios right with your designs. Bookmark these tools for your kit.

  • Golden Ratio Typography Calculator

This handy tool is particularly useful if you’re a website designer and really need to get your typography sizing right. Begin by entering your font size and width, then get optimising font sizes, line heights and widths and nail your characters per line for assured typography choices.

  • Golden Ratio Sketch Resource

Free, open source resources exist for designers to ensure that their layouts are ticking the ratio boxes, whether designing for online or print. The ratio templates can be overlaid onto  anything from your wireframes for website and app interfaces, to icon or logo designs, through to illustrations or device mockups.

How to start a career in Graphic Design

Want to learn more about all things Graphic Design? At Academy Xi, we offer flexible study options in Graphic Design that will suit your lifestyle and training needs, providing you with the perfect foundation for your future as a Graphic Designer. 

Whether you’re looking to upskill or entirely transform your career path, we have industry-approved training to provide you with the practical skills and experience needed.

Are you after a career change? Take a look at our Transform courses:

Are you upskilling? Our Elevate courses are for you:

If you have any questions, our experienced team is here to discuss your training options. Speak to a course advisor and take the first steps in your Graphic Design journey.