O'Reilly logo

Mastering Sass by Luke Watts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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; } ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required