Skip to Content

You need to fix your `line-height`

I’ve been doing some diggin into my audience lately, and the most common issue is one relating to design. So because of that, I’m going to start talking a little bit more about design stuff here, but from the point of view of a developer, since that’s what most of you are. Little tips and tricks that can help you improve your designs, whether it’s small tweaks to work you’re doing, or just for your own personal projects.

In this article, we’re looking at line-height. It’s one of the problems that I see plague pretty much every site I see that didn’t have the direct input of a designer, and it has a massive impact on the aesthtic, and more importantly, the readability of a site.

Sometimes it’s a question of someone just not even bothering with it, but more often, it’s a bad use of it once we’re outside the ‘normal’ or body text. So to help you out, we’ll be looking at:

Picking a good line-height

First off, there is no perfect default. Many things influence how you should set your line-height, such as:

That said, the default from the browser is far from ideal. It defaults to a normal value, which seems to [fall to around 1.2].(https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Values).

As a starting point, I usually start at 1.5 or 1.6. As I mentioned, there is no perfect to use as the default. This changes based on the font, and font-size. But it’s a good starting point, and it’s the place where most people make their first mistake. People keep this number way too small.

EDIT: A reader, Facundo Corradini, kindly pointed out over on Twitter, the Web Content Accessibility Guidelines recommend a minimum line-height of 1.5 for your paragraph text, so start there and, if anything, make it a little bigger.

A larger line-height makes things a lot easier to read. See for yourself:

See the Pen line-height example-one by Kevin (@kevinpowell) on CodePen.

A larger line-height takes away from the density of a block of text and just helps to lighten everything up, making it much easier to read.

Don't want to miss an article?

I share the cool little things I run across (like you're reading in this post right now) every Sunday. Sign up below to never miss a post.

    I won't send you spam. Unsubscribe at any time.

    When a large line-height can cause problems

    Large font sizes

    That said, we don’t always want a large line-height. This works for body copy (your regular paragraphs). It starts to cause problems at larger font sizes. See for yourself.

    See the Pen line-height example-two by Kevin (@kevinpowell) on CodePen.

    As you can see, with the example on the left, the line-height of 1.5 is just way too much. The normal on the one on the right looks much better.

    Uppercase text

    Another place that causes issue’s is text that is uppercase. Once again, let’s look at an example.

    See the Pen line-height example-three by Kevin (@kevinpowell) on CodePen.

    Once again, you can see that the one on the right side just looks better. With all caps, we have no decenders (the little bits of letters that stick out the bottom) to fill up any of the space between the lines, and it starts looking like it’s almost double spaced. And if you were to make the font-size bigger (say for a large title) it will simply look terrible.

    TL;DR

    There is more to it than this, but if you’re a dev who’s just looking to clean things up and make your design look a little sharper, this should help push you in the right direction 🙂

    Don't want to miss an article?

    If you never want to miss out on any of my content? Subscribe to my newsletter!

    It's one email every Sunday to keep you up to date with what I've been up to, plus I'll throw in some bonus stuff every now and then that I don't post anywhere else :)

      We won't send you spam. Unsubscribe at any time.