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; } h2 { font-size: 1.5rem; line-height: 1.17rem } h3 { font-size: 1.17rem; line-height: 1rem; } // ...and so on ...