What is a Modular Scale?
A modular scale helps create typographic rhythm. Font sizes, line heights and margins are used to create proportional relationships.
Why use a Modular Scale?
A modular scale increases readability and legibility. This makes your content easier to understand.
A modular scale also helps balance white-space and typographic texture. This makes your site look nice. If the web is 95% typography, a modular scale is one of your best ways to make a good first impression.
How to use a modular scale
A modular scale is based off proportionate relationships. To start, you need to pick your proportions. You can use multiple proportions in your scale, but I usually just stick with one for simplicity’s sake.
Here are some common proportions used when creating a typographic scale:
- 2:3 (perfect fifth)
- 3:4 (perfect fourth)
- 1:1.618 (golden section)
- 3:5 (major sixth)
There are many other proportions you can use, but keep it simple. By getting to know a few scales well, you will become quicker when experimenting with typography in CSS.
By getting to know a few scales well, you will become quicker when experimenting with typography in CSS.
I often use the 3:4 (perfect fourth) scale. Time to dust off your middle school calculator and do some math.
- 3/4 = .75
- 16px is our base font size for now
- 16/.75 = 21px (rounded)
- 21/.75 = 28px
- 28/.75 = 37px
- Keep dividing the result by the proportion (.75)
- If you need to go backward, multiply by .75 (16 x .75 = 12)
With some basic division and multiplication we have a nice looking modular scale:
9px, 12px, 16px, 21px, 28px, 37px, 50px, 67px
I love this scale, but 16px is not always the right starting point for a project. Also some fonts will look better at certain sizes.
You will have to do math again based off your ideal starting point. Luckily for you, Tim Brown has created a tool that does the math for you. You can also read his article if you want to learn more about how to create more meaningful typography.
Use your scale to set measurements
Use your scale to set font-sizes. This particular scale gives you some nice ranges to experiment with. 50px may be a good size for your h1 headings. 12px could work well as small text in the footer.
What about line height? 21px will probably be too tight. Often multiplying your body font-size by 1.4 or 1.5 will give you a good amount of line height, but it depends on the font, the content and your eyes.
Trust your eyes
Mathematical measurements can be very helpful, but ultimately you need to trust your eyes. One of the universal principles of design is that optical measurements are more visually accurate than mathematical measurements.
If no measurement in your scale works for the space between a heading and a paragraph, adjust it as necessary. A modular scale won’t guarantee good design. Rather it’s a tool to help you set type and give your design a head start.
Using the Scale Responsively
I’ve used pixels in this post, but these days many sites are using ems and rems to set type. Ems and Rems work better for responsive design, but I find when designing in the browser, it’s easier to work with pixels and then transfer to ems for final production ready code.
You can also use the modular scale to adjust text at different breakpoints. A level 2 heading on a desktop may be set at 28px, but at a smaller mobile breakpoint, 28px may appear too large. Therefore, you can adjust to 21px or another measurement in the scale.
You can also use the modular scale to adjust text at different breakpoints.
A modular scale can help bring clarity and professional impact to your content. It can also help web designers who are designing in the browser using HTML and CSS.
Get to know a scale well. Stick with it. This will help bring meaning to your words and the space between.
Are you using a modular scale for your typography? How do you ensure your text is easy to read on all browsers and devices? Any tools, tips or questions are welcomed in the comments!