Imagine you’re designing a new email template from scratch for your company. Where do you start? How will you decide the widths and spacing between the elements of your design? These are questions that most designers face as they start laying their ideas out in Sketch or Photoshop.

Many designers establish a pattern of numbers that feels good to them. In the past, I liked to use the number 12 because it’s easily divisible and you can create a large set of patterns by dividing and adding numbers together (e.g. 6, 12, 18, 24, 30, 36, etc.).

While creating your own set of numbers is not a bad thing, these numbers often have no correlation with other elements in our design, such as the base font-size, grids, or viewport sizes. We have an opportunity here to use numbers that are harmonious with all the elements of our designs, not just the white space between things.

This is where a modular scale can help you define a scale of harmonious numbers that can be easily applied to any element of your design. Modular scale is an idea championed by Tim Brown, the head of typography at Adobe’s Typekit. Tim explains that creating a scale of harmonious numbers is something that’s existed in the typography world for hundreds of years. Early manuscripts and books used similar scales to create a sense of harmony.

Creating a Modular Scale

Creating a modular scale is fairly straightforward, even easier if you use the awesome online tool that Tim created. The first ingredient to our modular scale is to determine your ideal base font size. Each font has a unique look and feel so you’ll want to create a block of text in your preferred design app and get a sense for the size that looks best to you.

The second ingredient is to determine a ratio, a number in which we’ll rely on to create new numbers up and down our scale. There are many harmonious ratios found in nature and music, so you’ll want to experiment and see what works best for the design you’re creating (the perfect fifth, the golden section, major third, etc.).

Above you can see the golden section used to design harmonious sections in a design iteration of the Twitter timeline.

Once you’ve landed on these two numbers, we can start creating our scale. Say for example we determine that 16px is the ideal font size for our paragraphs and the perfect fifth is an ideal ratio (1.5).

Going up

16 * 1.5 = 24
24 * 1.5 = 36
36 * 1.5 = 54

Going Down

16 / 1.5 = 10.667
10.667 / 1.5 = 7.111

You can see how multiplying and dividing the base font-size with the ratio gives us new numbers. When we want to go up, we take the new number and multiply it by the ratio. When we want to go down, we divide. The scale also is not intended to be a direct replacement for a designer’s eye. If you need, you can round up or down within a few pixels without diverging too far from the theory behind our scale.

Now, this is a great start, but a single stranded scale doesn’t always give us the widest range of numbers. This is where you can add in a second ingredient, or number, to the scale to give you greater flexibility. This second number doesn’t have to be based on a font size either–it could be the width of a particular element, or key design feature (image, viewport size, etc).

At SendGrid, we use a combination of 12px and 20px, using the perfect fifth for our ratio. This gives us a wide range of numbers that we can apply to pretty much anything. It looks like this:

6 9 12 13 15 18 20 27 30 40 45 60 90

 

The SendGrid modular scale settings within the Modular Scale calculator.

Our products rely on two font-families, Colfax for headings and numbers, and Proxima Nova for the rest. Applying this scale is pretty easy. For our paragraphs within the product, we use 18px as the font size and 27px as our line-height. Our H1 headings use a 30px font size with a 40px line-height. That covers a small portion of our typography, but what about other design elements?

Our buttons for example use numbers right off the scale. Our standard buttons have 30px of left and right padding and 12px on the top and bottom. Even our grid is based on our scale, columns of 60px with gutters at 30px.

Creating this scale helps create a more harmonious feeling to our design, it resonates better and has a purpose. It also helps provide a guide to our entire design team–no longer are we guessing at how far to space something, as that could vary from designer to designer. Pick a number off the scale and see how it feels.

I encourage anyone who is designing for the web to give this scale a try. Compare a design created with a scale to one without and I’ll bet that the one with the scale just feels better. And, if you don’t feel like doing all the math, our friend Tim has created an online tool to do it for you.



As Sr. Design Technologist, Jason’s focus is on building consistent user interfaces across SendGrid’s products. When he’s not pushing pixels, Jason enjoys riding his Ducati on curvy mountain roads, snowboarding with friends, and visiting local whiskey distilleries.