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.