Modular typography scale with Sass
The first thing is to set some variables, as it's almost always the same step for every Sass project:
$font-size:16px; $scale:.75;
I personally like the fourth ratio, so I'll use it here as an example. As you'll see, it will be easy for you to change it to your preferred one.
We'll now do some math – or better than that, we're going to let Sass do the math for us:
$s: $font-size*$scale; $r: $font-size; $l: $r/$scale; $xl: $l/$scale; $xxl: $xl/$scale; $xxxl: $xxl/$scale;
I personally labeled the base font as Regular, you can name it as you please – and the following sizes are made by simple multiplication/division for our scale factor.
Using the 16px base we're going to obtain the following values:
12, 16, 21, 28, 37, 50, 67
Yes, the H1, for example, is too big – but it doesn't really matter right now, you'll be able to change it in a heartbeat.
Now, how can you use it?
Simple enough, you just have to do one simple declaration – or more, based on the number...