Increase Your Line Height and Improve RPM and Readability

I know what you’re thinking. Another post about optimizing the words and spacing in your content after our novel on why you should increase font size?

Yes. Line Height is worth its own article.

Another oft-overlooked aspect of CSS and website design, line height can have a big impact on your site’s readability, user experience and monetization.

It also goes hand-in-hand with font size since you’ll need to make sure your line height matches your new font size if you made that adjustment.

This is crucial, as increasing font size alone — without taking into account line height — can potentially backfire and hurt your user experience.

What is Line Height?

Line height is what it sounds like: the spacing between lines of text on your site. Much like font size, in CSS, line height can be measured in multiple units such as px, em, etc.

But in this case, the preferred method of setting line height ISN’T with all of those complex units. The preferred way in CSS to set a line height is simply a number, e.g.:

body {   line-height : 1.6; }

What is the 1.6 we set in this example? That figure multiplies your font size to determine your line height. If you chose 18px (like our last guide recommended) as a safe minimum, this will multiply 18px by 1.6 — the equivalent of setting line height to 28.8px.

Does that mean 28.8px between each line of text? No. That would look ridiculous. The total line height is now 28.8px, or roughly 10px of spacing below the text. It’s adding a 60% buffer.

We know 28.8 sounds like a random number, but by using relative numbers like that, rather than exact measurements, you avoid ending up with overlapping text, or text that’s so tight together it’s tough to read, in the event that you change font size without adjusting line height.

So please, always use this formula to get a number relative to the font size.

So where should I set my line height?

The default setting is a line height of 1.2, but we think that’s way too low and that text is going to be squished and hard to read if you go that route.

Again, we look to Google’s Material Style Guide for the answer.

Google runs a 1.5 line height for its body there, or 16px font size and a line-height of 24px.

That’s a great safe minimum to start with if you’re optimizing for readability and user experience, which will ultimately help optimize your site for SEO as well.

Trellis, our WordPress theme optimized for site speed and SEO, defaults to a 29.25px line height.

Line Height and RPM

Similar to how font size impacts RPM, line height is going to do the same. Text that’s easier to read will mean happier users more engaged with content and ads, thus driving up your RPM.

Also, because our in-content logic follows CBA standards, increased line height means increased content, and therefore, the chance to run more ad units without disrupting user experience.

So should you go above 1.5? You certainly could. The text you’re reading today is a font size of 18px and a line-height of 1.6. The key takeaway is that you should look at 1.5 as the minimum.

How do I set line height?

Unlike font size, where you can likely make the adjustment in your theme settings, you’re going to need to edit your stylesheet, or CSS, in order to make this adjustment.

If you combine the code from our post last week (see link in the very first paragraph above if you missed that), it will look like this:

body {   font-size : 18px;   line-height : 1.6; }

That should put you in a pretty great position for both a higher RPM and better user experience.