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:
- How to pick a good, default
line-heightfor your site
- Situatons where you need to move away from your default
Picking a good
First off, there is no perfect default. Many things influence how you should set your
line-height, such as:
- the font that you are using
- the size of the font
- the length of the line
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.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.
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.
A quick interuption in this article, which continues below. If you're enjoying this read, please consider signing up for my newsletter!
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
1.5 is just way too much. The
normal on the one on the right looks much better.
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.
- Body text (your normal paragraph text) should have a
line-heightof 1.4–1.6, give or take.
- Different fonts mean different
- Changes in
- Really big fonts should have a tight
uppercasetext should have a tighter
line-heightthan the body
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 🙂