How proper line height will improve the look and stickiness of your site

How proper line height will improve the look and stickiness of your site

written by Charlie Pabst

This is Part 2 of the 10 Ways to Make Your Website Look Better series.

tapeIf content, as they say, is king, then the readability of that content must be a close second. After all, it doesn’t matter how good your content is if it can’t or won’t be read.

So here you are. You’ve written the blog post to end all blog posts. Or the sales letter that will surely make you six-figures over night. You post it online, sit back to watch the readers flood in, and KAZAAM! Nothing. No sales, no reader comments, no bump in subscribers, nothing.

You look at your site to troubleshoot it. It looks good. The text size is big enough to be read. The content is great; no typos. You already fixed the problems of having chartreuse, mauve and bile colored fonts all in the same paragraph. It all looks good.

But…there is something, isn’t there? Something a bit funky is catching your eye, and you may not quite be able to put your finger on it.

What’s the culprit? Very possibly it’s line height.

Okay, so that intro was a bit dramatic. I don’t know if line height alone is going to destroy your site and create a zero-sales situation. But it is going to wreck your site’s legibility. And if your site can’t be read comfortably, then, yeah. You’re going to lose readers and money.

100% on the line height test means you fail

If you go into your site’s style sheets and search for “line-height” you may not find it. This isn’t a good sign, as it means your text is defaulting to 100% line height.

I know, 100% sounds good, right? “Hey, Mom! I got 100% on my tests! And I still have 100% of my body parts!”

Well, I assure you, if your line height is 100%, you get a big F on this test. In fact, you’ll probably get suspended from school when the dean finds the 101 Surefire Ways to Have Lousy Typography on Your Site book you have hidden in your locker.

Default, 100% line height sounds good and like it must be right. But in this case, it means that you’re settling for some odd standard that was probably set a gazillion years ago by some guy who carved out stone tablets.

Standard default line height on the web looks awful. It’s cramped, constipated, blocky and doesn’t breathe.

Want proof? Here’s what all the text on this site would look like if I’d left it at default.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pede magna, porta non, tincidunt vel, ultricies non, nisl. Ut porttitor enim quis lacus. In risus. Proin at tortor ac ligula malesuada varius. Praesent ipsum erat, iaculis quis, condimentum vitae, placerat quis, tortor. Proin sagittis lobortis massa.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pede magna, porta non, tincidunt vel, ultricies non, nisl. Ut porttitor enim quis lacus. In risus. Proin at tortor ac ligula malesuada varius. Praesent ipsum erat, iaculis quis, condimentum vitae, placerat quis, tortor. Proin sagittis lobortis massa.

Yuck, right?

So what is a good line height?

So now we come to the solution portion of the post, where we discuss how much line height we really need. Too little line height, as we’ve seen, is not a good thing. But too much of it is also a bad thing.

You want enough space between lines so that your text isn’t cramped, but not so much space that each sentence looks like its own new paragraph.

A good rule of thumb is to set the line-height of your web copy to 140% or so.

The text you’re reading right now is at 1.6em, or 160%. (It may be different if you’re reading this in an RSS reader.) I chose this size on purpose.

First, my body text uses a serif font. Serifs inherently make the letters seem slightly bigger, tighter and more busy. Sans-serif fonts aren’t quite as busy visually, so you may not need quite as much line height.

Second, Charfish is a spacious site. I wanted even the text to breathe well and have plenty of white space, which suits the somewhat minimal design. The eye isn’t confused here by closely-packed sentences or dangly letters that run into the lines below. It just works. And that’s what proper web design is all about.

And speaking of proper web design, we’ve still got eight more posts coming up in this Better Website Series. Subscribe now and you won’t miss a single one of them!