Modular scale is one of those things in web development that you can get away with not doing, but when you do use it, you will notice the overall improvement to your website. It's not anything specific, but the overall feel of the site that is improved. Magically.;)
So what is it?
DEFINITION: A modular scale is a scale of measurements based on ratios derived from harmonic intervals or the golden ratio.
In layman's terms this means that the numbers of the scale are related to one another in an artistic-design-awesome way, and when you use them for things like line length, column widths, line heights, and pretty much anything in your website that requires a measurement, you pass on this design awesomeness – versus picking random unrelated numbers. In other words you are making a design informed decision!
What does a modular scale look like?
Here's a modular scale I used on a past project:
Check it out.
How do you create one?
To create this I used a Modular Scale tool. The tool requests two variables, a route number and a ratio. You can use multiple numbers for both. Here is what I input into it to generate my scale:
- The projects base font size of 16 pixels
- The logo font size of 30 pixels
- The Golden ratio – I decided to go with a classic base ratio
Modular skills is a subject worth researching. I think it makes a huge difference in your design, as a whole harmonious creation. And doesn't that sound good? If you're interested in learning more, take a look at the following resources:
Now what I do with my scale?
Once created, use only the numbers defined in the scale for measurements throughout your application, like font sizes, margins, padding, column widths, etc.. When I first discovered this tool I went through the project I was working on and converted every single number to a number in the scale. Every single number!
Having said that, before applying your scale to your project its important to keep this in mind:
Modular scales are a tool, they’re not magic. They’re not going to work for every measurement, and that’s okay. Math is no substitute for an experienced designer’s eye, but it can provide both hints and constraints for decision making. Consider the scale’s numbers educated suggestions. Round them if you like (22.162 becomes 22). Combine them (3.56 + 16 = 19.56). Or as we saw me do here, break from the scale entirely.
- More Meaningful Typography by Tim Brown
A better way to implement them...
Since I first discovered modular scales and went nuts adding its measurements to my project, some great tools have been created that make implementing modular scales so much easier:
But, if you want to do it all manually, I recommend including a reference to the scale somewhere in your sass files like this:
/* Modular Scale
// 16 @ 1:1.618 - base font size
// 30 @ 1:1.618 - logo font size
Want to know when the next article is published? Subscribe here. Thanks for reading!