7 Reasons Why You Should Use Modular Scale

Modular scale has been around since the time of the ancient Greeks in architecture and design and can be an incredibly helpful tool to leverage for front-end developers.

If you’re a front-end developer or typography junkie like me, you’ll recognize that typography is usually the part you can’t glaze over, since it’s the area of the design that is most critical to UX and usability. Legibility and scale have to be responsively monitored. Modular scale is a philosophy (and tool) that will help typography, and maybe even layout, in a number of different ways.

Here’s 7 reasons why you need to start using it if you’re not already:

It gives you peace of mind

The whole point of modular scale is it’s supposed to be natural, and create a sense of harmony in a design. Proportions within modular scales are all around us in nature from the spacing of the branches on trees to the joints on our fingers. It’s been used in architecture, paintings and even music - see Golden Ratio.

Modular scale is well documented on the web

Modular scale has been used on the web as far back as 2011. Experts such as Tim Brown, Type Manager for Adobe Typekit and creator of Modular Scale and Web Font Specimen, wrote an extensive article on modular scale being put to work on the web.

It’s quicker and easier

Once you’ve picked a ratio, you’re left with only a set number of scale options to pick from. And instead of specifying specific em or px values, you’re effectively picking from a set range. If you adhere to this system it’s actually liberating when you think in terms of scale and responsiveness, and not specific values from a Photoshop file. You’ll find it’s much quicker and therefore easier in that respect.

It’s now a Sass library

To tie in with the last point, the vanilla CSS method would take longer since you would need to use an online calculator and then copy and paste the em values throughout your CSS. With this Sass mixin by Scott Kellum, it’s now incredibly easy and fast to integrate.

Simply set up your base value and ratio in your settings partial:

$ms-base: 1em;
$ms-ratio: $golden;

Then apply it to font size and even padding or margin:

font-size: ms(2); // two up the modular scale
margin-top: ms(5); // five up the modular scale

Ratios can be custom tailored to the design

Not every design is going to accommodate the Golden Ratio, and there are generally better and safer options that feel right for the web such as Fourth or Minor Third. But if you’re using the Sass library mentioned above, you can easily switch between ratios even after your typography has been styled.

It forces you to use rem or em units

While pixels are certainly still valid, em has for a long time been considered the better approach, since the relativity works really well for responsiveness. Usually the base font size will be set to 1em, and the scale will work off of that.

It’s more fun

Styling with custom values and trying to match your Photoshop file can be mundane. But taking those values with a pinch of salt and adjusting with the naked eye will give the front-end developer some creative license, and probably better perspective overall especially when it comes to responsiveness.

By Christian Miller  |  Follow me on Twitter