Blog

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

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!

FREE UPDATES!

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

Charlie

Charlie Pabst is a guitar-weilding designer, a sharp-shooting writer, and a tell-it-like-it-is ever-kid. He is also not afraid of hyphens.

He is the founder of Charfish Design and Ignite Living.

You can read more about him here. And you should definitely follow him on Twitter.

18 Responses to “How proper line height will improve the look and stickiness of your site”

  1. 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

    Reply
  2. Charlie

    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.

    Reply
  3. Charlie,

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

    Reply
  4. 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

    Reply
  5. Charlie

    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.

    Reply
  6. 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.

    Reply
  7. Anna

    Hello Charlie,

    I just started a job training as a webdesigner and I think your “Better Website Series” helped me a lot during my first few months. Thank you very much!

    Reply
  8. @Anna

    That’s awesome! I’m so glad to hear that this has helped you out. And you reminded me that I actually need to finish up this series after all this time.

    Take care and best of luck!

    Reply
  9. Hello Charlie,

    Perhaps you have time for advice. I found your blog by googling my problem: too little line-height.

    After a recent obligatory migration from one host to another the line-height of various logs of mine are okay, but others are not. The line-height is ALWAYS okay as long as I’m typing (or pasting) the article. But, as soon as I’ve published it, then it either remains right, or goes wrong: LESS than 100% line-height! I’ve tried to get my problem solved by ‘Support’ but they keep beating around the bush, as if they don’t understand me.

    I like the appeal of your blog, you practice what you preach!

    Reply
  10. @ Michael –

    Thanks for the question. That’s an interesting problem. It would be hard for me to troubleshoot that without having a peek at your code, but maybe I can help.

    First off, CSS. If you don’t have a CSS rule that specifically caters to your content column and/or paragraphs, the text is going to do somewhat random things. For example: a paragraph within a content column would be styled somewhat like this (your mileage may differ):

    #contentColumn p {
    line-height: 140%;
    }

    That’s going to style all paragraphs within the content column with that 140% line height. So one obvious problem would be if that CSS rule isn’t there at all.

    Another potential issue could be if, when you’re pasting in your content, it’s not actually wrapping that content in paragraph tags at all. Even if the CSS rule above was in your stylesheet, if there are no paragraphs to style, it’ll break again. In which case you’ll have to put the paragraph tags in there.

    You could very easily have both problems at the same time, so you’ll have to do some investigating. I know from personal experience that when I paste a piece of writing in my blog software (WordPress) it does super odd things. Line heights get funky, some paragraphs don’t actually appear to be paragraphs anymore, and sometimes a sentence will actually be broken right in the middle. Invariably, when I paste in raw content, I end up editing it for a while to get it just right.

    Hope that helps. If not, feel free to use my contact page and get in touch. You can buy an hour of my time and I can check out what’s going on first hand.

    Cheers!

    Charlie

    Reply
  11. Charlie, thanks very much for your swift advice! I am such a oomputer dummy though, that I had to look up what CSS stands for: Cascading Style Sheets. But I didn’t understand what it meant, or only sort of.

    Fortunately the weblog support (finally!) looked into my problem and repaired all my articles (logs), and gave them all the same height. So it’s solved now (free service for the kind of simple weblog I have).

    Then a few hours later it suddenly dawned on me what the CSS that you had mentioned, had to do with the problem: I had been switching the height of the letters from normal, to sometimes very small (when it concerned a link). So THAT must have messed up the overall line-height. Oh my, I feel somewhat less than a dummy now! Thanks, teacher.

    I’ll save your website address in case I want to make the whole thing LOOK BETTER (unless, of course, you ask an outrageous hour rate ;-) !). I only recently started this weblog, so for the time being I just have to ‘fill her up’ first.

    All the best,
    Michael

    Reply
  12. I’m in the process of creating my portfolio site, and I read the first three parts of this series…but I can’t find the rest! I tried searching, and clicked the ‘next post’ link a few times, all to no avail. Is the rest of the series up anywhere?

    PS. The ‘next post’ link was very hard to find – I didn’t see it till I came down here to comment.

    Reply
  13. Hi, Kendra…

    Yeah, you caught me in the middle of an overall redesign. We’ll be relaunching the site soon and then continuing the series. And thanks for the tip on the “Next Post” link. I’ll make that more obvious too in the next iteration :)

    Cheers!

    Reply
  14. It would be really great if there were links to all 10 parts of this article at the end, or at least a link to the next one! Now I have to search for them.

    Reply
  15. Loved your article. It wasn’t stale reading at all. It was more like I was in the room with you explaining everything. Would you be able to take a quick look at my site? I am really struggling with my line height, font style and font size. I really want a good look, but have to have something that’s easy to read as well. Hoping you can help. Thanks http://www.redwhiteandbulldogs.com

    Reply
    • Hey, Dan!

      Thanks for writing in, and I’m glad you liked the article!

      Just checked out your site and it’s a good start for sure. I personally would increase the line height a little bit on your site. Maybe 10% or so. It’s not bad as is, but it is wee bit cramped in my opinion. I like to add a little space, but not so much that you can’t discern where the paragraph breaks are. In your case, the space between paragraphs is pretty good, so you won’t have to worry about that.

      One other thing I noticed – that has nothing to with line height but a lot to do with readability – is the image placement. This is by no means a hard and fast rule, but I always like to put images on the right, with text wrapping them on the left. This benefits the way your readers read (at least in left-to-right countries) by always keeping the beginning of each new line in the same alignment.

      Hope that helps! Enjoyed looking at your site this morning :)

      Cheers!

      Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

FREE UPDATES!

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

POWERED BY: WordPressBluehostAweber