Heading line heights

Next, we need to take control of the line height of our headings. They too look disproportionate when we switch between the font families. The good thing with this, however, is we've already done the groundwork. Our base-heading-sizes-calc() function will allow us to easily solve this problem. However, again we need to figure out the appropriate formula.

One way of setting the line height would be to simply use the font size of the next heading. For example, when we're using our sans font family:

h1 {font-size: 2rems;} 
h2 {font-size: 1.5rem;} 
h3 {font-size: 1.17rem;} 
// ...and so on 

Well, it just so works out that line heights based on the next headings font-size look about right.

h1 { font-size: 2rems; line-height: 1.5rem; } ...

Get Mastering Sass now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.