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 ...
Get Mastering Sass now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
