On the right heading!
So now you should have full control of Sass from the command line. Let's move onto another typography challenge, headings, and sizing them correctly for best results to match the work we did with our body text.
By default, the font-size of headings in most modern browsers is as follows:
- h1 is 2em
- h2 is 1.5em
- h3 is 1.17em
- h4 is 1em
- h5 is 0.83em
- h6 is 0.67em
So you can probably tell that doesn't look quite right. So continuing from our last example where we simply multiplied our font size by a ratio of 1:15 to get what worked best, we need to do something similar. Now that will work fine on our h4, which is 1em (or rem, which is what we are using); however, all the other headings work on a different ratio to each other. Now, I've worked them out already. The good thing is we know how to get our starting value for our h2 regardless of our base font-size. It's always exactly double that. Then we can use the following to calculate the rest of the headings:
- h1...
