The use of scales to aid composition originally surfaced in music ^[1] , they’re used to add structure and harmony to sound instead of just a series of incoherent noises. In typography they are used to create visual harmony and consistency throughout written documents.

Before reading any further, if you haven’t already watched Tim Brown’s video from Build 2010, or read his article on more perfect typography^[2]. I highly recommend that you do since the topics are heavily related and it will help make more sense of using modular scales.

What is a Modular Scale?

“A modular scale, like a musical scale, is a prearranged set of harmonious proportions.”

—Robert Bringhurst, The Elements of Typographic Style

As Robert Bringhurst states, a modular scale is a set of prearranged harmonious proportions. These proportions are achieved by dividing or multiplying with a ratio, which will be explained later.

Why use a scale?

If you take this approach and start with type as Tim discussed in his video, it is possible to create a solid and visually harmonious foundation for any design. You’ll also have a selection of predefined measurements that compliment each other mathematically and can be used to create a clear visual harmony in your content.

How to Use a Modular Scale

To create a modular scale you need to first pick a number relevant to your design, the ideal font size of your chosen font is a great number to use. You then multiply or divide it by a ratio of your choice, for example a perfect fifth at 1.5 or the famous golden ratio at 1.618.

Fortunately for us we don’t need to manually multiply and divide all our numbers, we can just use Modular Scale a website that does the multiplications for us.

As explained in Tim’s video which was recommended at the start of this article, find a typeface that suits your content and then find a size at which it looks nice and crisp whilst displaying body content. This should be your ideal text size. I chose 21 for mine because I think my text looks particularly nice at that size.

Next, find an important number, this can be the size at which you think your header looks best, the ideal width of your measure, the width of your images, it could even be an ideal text size for display on mobile devices. I chose 617 because that’s the ideal length of my measure in pixels.

You can then multiply and divide each number by your chosen ratio to give you a double stranded scale. Using two values to create your scale is great because the values from one often fill in the gaps of the other. I chose to use the perfect fifth scale and you can see the scale that I ended up with.

Implementing The Scale

As Tim states, the modular scale is a tool, it is meant simply to aid and there is no substitute for the designers eye. I set my line height to 1.4em, which is not on the scale but it’s a size that I felt suited the text best.

It’s important to ensure that you are working from the correct base value when using a modular scale. CSS resets can alter your values if you are not careful so double check that there isn’t a font-size value set elsewhere in your CSS file that could override your own settings.

The modular scale works particularly well with the content out approach, this gives precedence to your content which is your most important assent on any website or document and it is the approach that I use nearly every time.

Footnotes

1. [1]12/12/2006, 24 ways: Compose to a Vertical Rhythm [24 ways: web design and development articles and tutorials for advent], [online]. Available: http://24ways.org/2006/compose-to-a-vertical-rhythm/ [06/08/2013].
2. [2]Tim Brown, 03/05/2011, More Meaningful Typography · An A List Apart Article [A List Apart: For People Who Make Websites], [online]. Available: http://alistapart.com/article/more-meaningful-typography [06/08/2013].