Last week I wrote about the benefits of using modular scales to set typography. This post is about how to create a simple modular scale using Sass.
This article assumes you have Sass installed and a basic understanding of how it works. If this is your first time exploring Sass, you’d be better off visiting the official Sass website to get an overview.
That said, let’s jump into creating our Sass modular scale. The first thing is to set your variables.
Variables allow you to store information to use throughout your stylesheet. We will need a base font size to create our modular scale. Let’s set it at the top of our stylesheet:
Now we need a variable for our scale ratio. I like the perfect fourth ratio which is 3/4=.75:
To create different points along our scale we need to do some math. Luckily Sass does the math for us.
Doing Math in Sass
$s: $font-size*$scale; $r: $font-size; $l: $r/$scale; $xl: $l/$scale; $xxl: $xl/$scale; $xxxl: $xxl/$scale;
By multiplying and dividing by our $scale ratio we are able to create various points along our scale. To understand the above:
- I labeled our base font size as
- I created our (small size)
$sby multiplying our base font size by our scale
- I created larger font sizes (for headings) by dividing the previous size by the scale ratio.
- For example, our
$xxlfont size is created by dividing
$xlby our scale
Hopefully this makes sense. Math is hard, and its not my particular area of expertise, but just to hammer the point home, let’s use some real numbers to illustrate the point.
$s:16*.75=12px; $r: 16; $l: 16/.75=21px; // I’m rounding to the nearest whole number $xl: 21/.75=28px; $xl: 28/.75=37px; $xxl: 37/.75=50px; $xxxl: 50/.75=67px;
Using real numbers you can see the scale we created:
The benefit of doing the math with sass variables like we originially did is that we don’t have to do the math ourselves. All we have to do is define our
We can change these variables to whatever we like and Sass will calculate the ratios and do the math for us. It’s like having a dork do our homework for us without the guilt…i’m kidding.
Using our Variables
So far we’ve set our variables, but we have yet to use these variables in our styles. Using them is simple. Let’s say we are styling our h1.
If that’s too big we can just try another variable from our scale:
We can now play our modular scale like a piano, setting different headings and text along the scale. Like anything in design, you ultimately need to trust your eyes.
I didn’t account for line heights, margins and widths in this example, but you can experiment and make the scale your own.
There are several tools to help you create a modular scale:
While these tools are pretty awesome, I found that creating my own set of variables has helped me better understand my own typographic hierarchy.
Have you started using Sass? What are some essential variables that you set on every project? Please leave any tips, tricks or questions in the comments.