Usability: line height means even more than I thought

[tedster]

The Usability labs at Wichita State have published a new study showing that line-height - or leading in printers' terminology - is even more important than I thought.

I've long felt that a little additional line-height was a secret weapon for improving site stickiness. But this study shows a 3X improvement in online reading comprehension with an optimium line-height. Wow! Line height becomes a must-have.

Another surprise for me in this study was that reading speed is apparently better without margins. However, comprehension suffers, so margin-less pages would only offer a real advantage for searching/scanning.

Check it out:
[psychology.wichita.edu...]

[BlobFisk]

Another fantastic article from one of my favourite sources of Usability news!

[Hester]

A shame many sites just dump text on you without considering the line-height. I suspect many amateur designers haven't heard of it, just setting the font size. It can make a big difference, especially with Verdana.

Don't forget spacing between characters as well!

[sonjay]

The preference and reading ease for a little extra leading didn't surprise me at all -- but I was surprised that the study found reading speed to be slightly faster when the text had no margins! Although comprehension was lower with that same block of text.

Just a guess, but it wouldn't surprise me if the study participants just raced through the margin-less text to get through it -- resulting in faster reading but lower comprehension. I know that I have more trouble with text that has no margins. I either skip it, or if I have to read it I tend to skim it much more quickly.

[ergophobe]

I think sonjay must be right. The text they read the fastest was impossible!

Tedster, you say it's more important than you thought, but when you look at the samples with sub-optimal leading didn't you think "YUCK!"? In other words, even though you didn't "know" it was important, didn't you "feel" it before you read the study?

Maybe my eyes are just getting old...

Tom

[tedster]

I've known leading was important since I used to create print pieces - but I was surprised by the 300% difference on screen.

It's been a long time since I let line-height go to default on any page I create.

[g1smd]

I have closed the browser window without reading the page many times on seeing that it had close packed text, or no paragraph breaks, or poor layout.

Brain said it wasn't worth the effort to struggle with it.

[Fischerlaender]

I discoverd the importance of the line-height attribute when designing a new web site. My first version was very clear and - as I thought - easy-to-read. Then I compared it to some other well designed sites out there and there was a very big difference. Some of them looked like my page - but where a lot friendlier to the eye. Of course I looked at their CSS code and found out that line-height was what made the difference.

Now, I start to use line-height in any new page I'm designing.

[claus]

So, if i want to use their advice, how much is 5 millimeters in pixels or ems?

---

Added: I found a conversion rate for mm-to-pixels:

1 mm = 2.83464567 pixels

So, five mm's is around 14 pixels.

The ems are relative, so just ignore that part of the question, as specifying a flexible font size and a fixed line height does not go well together ;)

---

Added2: That's, btw, a flaw in the study as reported on that page. Saying 5mm's is nice, but they don't tell how large the font size was, so it's really of no use to me, as 5mm is something with a 12px font and something else with a 9px font.

They really should have expressed it in relative terms, eg. "single", "double" or ems.

Also, they use a Serif font for their testing purposes and that font family does not generally work on screen, although it does on paper.

[henry0]

Also, they use a Serif font for their testing purposes and that font family does not generally work on screen, although it does on paper

Claus,
2 or 3 month ago we had on WebmasterWorld another article in the same topic range about Serif and Sans demonstrating that what works in newspaper is the reverse of what facilitates reading on web (I might be wrong although I remember reading it, the content I am not sure!)

[tedster]

Physical measures such as mm do not convert easily to pixels - because the "size" of one pixel varies with user's screen resolution setting and physical monitor size.

One study we discussed about font families is here:
[webmasterworld.com...]

I can report that when I changed the line-height from 1.1em to 1.2em on one information-based website, we saw an increase of just under 1 page view per unique.

[directrix]

"I can report that when I changed the line-height from 1.1em to 1.2em on one information-based website, we saw an increase of just under 1 page view per unique."

I've heard the browser default varies, but isn't it usually around 1.3em?

I've had conflicting results applying line-height. If I do it longhand, as in body{line-height:150%;}, it's ignored. If I add it as a shorthand property, after the font size, as body{font:100%/150% Times,serif;}, it works fine! Have you ever seen this?

Do you recommend adding line-height to the body element? Are there any drawbacks to using line-height? (I seem to recall NN4 made an awful hash of it, rendering images out of place, for example. But I don't care about NN4 anymore.) Do you normally specify different line-heights for different elements: e.g. div,p,ul,ol -- or do you tend to keep them all the same?

[Purple Martin]

Thanks Tedster, I'd been wondering how to make some black-on-orange text more readable because there was not quite enough contrast for my liking, and increasing the line-height has worked wonders.

I've heard the browser default varies, but isn't it usually around 1.3em?

On the page I was just working with, default line-height appeared to be 1.3em using Firefox 0.9. It looked much nicer when I set it to 1.5em.

[tedster]

Sorry folks, I mis-remembered and mis-reported there. I was using a fixed size layout and we increased the line-height by 2px.