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

Charlie |

3 December, 2008 |

7 Comments |

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

tape If 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.

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 145%. (It may be different if you’re reading this in an RSS reader, I don’t know.) I chose 145% over 140% on purpose and for a couple reasons.

First, my body text uses a serif font called Georgia. 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!

Filed in: Design & Inspiration |

If you enjoyed this post, get FREE email updates

Charfish Newsletter Subscribe to the Charfish Design Newsletter and get more design-related goodness than you can shake a stick at!

No Spam. We won't sell, trade, or "accidentally lose" your email.

7 Comments

Kelly said:
3 December, 2008

Charlie,

Geeking out on graphic design “rules” makes me do happy dances. If everyone else would geek out on graphic design, I could do happy dances everywhere I go on the web. For now, I’ll just stare at your lovely, spare pages, sigh contentedly, and wish others would learn a little from your wise counsel.

And Stumble. This series is shaping up to be a very fine primer!

Regards,

Kelly

Charlie said:
3 December, 2008

Kelly -

Damn, girl, you can write! That’s a fine fine comment, that. Anyone who uses the word “spare” without it referring to a tire is a friend of mine.

And I’m really happy you like this series so far. I see a lot of stuff on the web that bugs me, but I can’t just go around complaining about it all. So…I guess this series is a more productive way of whining like a big baby.

Kelly said:
4 December, 2008

Charlie,

LOL. My whole blog is my more productive way of whining like a big baby. Oops, my secret’s out…

David said:
4 January, 2009

Charlie,

I love the white space on your site – it allows for movement and openness of thought.

I have a question. Why do websites look so much better on Ubuntu and on Macbooks compared to Windows. I can read Wikipedia for hours on Ubuntu, but I just want to leave as soon as possible when I visit Wikipedia on a Windows PC.

David

Charlie said:
5 January, 2009

David -

I appreciate you noticing the white space! I went and had a look at your site and it’s got whitespace aplenty as well. Very nice.

The PC/Mac question…ah, yes. I feel like being really cheeky about this, but that’ll open a whole new can of worms. In short, there are lots of reasons really for browser disparity. It could be browser issues, such as IE5 & IE6 inherently sucking. Could also be items within the “Tools” or “Preferences” menus of your favorite browser, some of which effect how text is displayed. Etc.

I’m sure that doesn’t help much. Neither will my concise summation: Mac is the only way to go.

Wilfred Joseph said:
26 January, 2009

I think I have to have my site redesigned. Would you give me your opinion on it. I get lots of traffic but not a high conversion rate. I have optimized it well i think. Can you look at it and let me know.

Beau said:
2 July, 2009