The importance of modular scale 🤓

Introduction 👋

“Can you reduce the font size a bit” is a request all designers will face at some point in their career but how you deal with the request is another matter. Yes we can reduce the font but it’s important to remember the knock on effect this will have across the design. A good designer will listen and take on board client feedback, a better designer will know how to educate.  

Clear visual hierarchy is critical in this digital age; it’s imperative to get your message across as quickly and concisely as possible. One trick I’ve picked up over the years is the use of a glorious method known as the Modular Scale, this wonderful approach was well articulated by “A List Apart” some time ago:

A modular scale is a sequence of numbers that relate to one another in a meaningful way. Using the golden ratio, for example, we can produce values for a modular scale by multiplying by 1.618 to arrive at the next highest number, or dividing by 1.618 to arrive at the next number down.

Why use it? 🤔

If we use modular scale correctly it helps speed up our design making decisions, it frees up more time to focus on other areas of the design, allowing us to really finesse our work.  It also has a positive impact on our design compositions, layouts, and vertical rhythm. This improves readability to give your work that professional finish clients are looking for.

How to use it 😯

There are a couple of deciding factors to determine what scale you want to roll with. Firstly, we need to be mindful of the rules/laws surrounding accessibility. The BBC describe accessibility as: 

The word used to describe whether a product (for example, a website, mobile site, digital TV interface or application) can be used by people of all abilities and disabilities. For instance, a website is accessible if all people, including disabled and elderly people, can use it.

With this in mind we need to consider font sizes for people with visual impairment, most articles will recommend a font size no smaller than 16px but this may vary depending on the font family you’re working with. 

Secondly, we need to keep in mind the screen size of the viewer.  For example, a scale using the golden ratio will work really well for desktop but won’t have the same impact on mobile. Please avoid using multiple scales for one view port as this defeats the object.

& Finally 😎

I appreciate this is a short and sweet article, but hopefully it makes sense. The question is: Where does it go from here?

If the rules of modular scale feel limiting, it really isn’t. If anything it’s limitless; we have a wide range of scales to choose from, varying base fonts to pick, and this will naturally have an impact on font size options. 

Some scales work better for different device sizes so it won’t be uncommon to see multiple scales residing in one website. However, using multiple scales for one view port defeats the object of modular scale, and I can’t stress this enough. 

So, the next time a client asks you to increase the font size a bit you should always take these comments on board, but now you have solid rationale for your decisions. Remember, this also presents you with an opportunity to educate your clients and better yourself as a designer.

References

A list apart - Meaningful typography

Modular scale tool

Smashing Magazine - Font sizes

BBC - Accessibility