What is the ideal line height

for readability

[annej]

I've been reading about the importance of adding line height to improve the readability of my site.

Are there any studies about what the best height would be?

[pageoneresults]

Reading Online Text: A Comparison of Four White Space Layouts
[psychology.wichita.edu...]

It's from 2004 but I believe it still applies today and beyond.

Here is the previous WebmasterWorld topic posted by tedster...

Usability: line height means even more than I thought
[webmasterworld.com...]

[annej]

Interesting though it doesn't give specific information on just how high a line height is ideal. Any thoughts?

For now I've made it 135% and it does seem easier on the eyes. But I want to be sure I make it enough for optimum viewing but not so much is seems odd or awkward.

[pageoneresults]

Interesting though it doesn't give specific information on just how high a line height is ideal. Any thoughts?

Sure! I like white space. I'm going to tend to lean towards more line-height than the norm. Not so much so that it breaks readability but just enough to where it provides what I feel is a pleasant reading experience for the eyes.

Personally, I don't think line height should be to a point where things look double spaced or even 1.5 spaced.

I've seen many designs that fail miserably in this area. It's rampant out there and it all comes down to how much information one can stuff on a page before it becomes a readability nightmare.

Line height should also vary based on font size. It should not be fixed across the board. It needs to be fluid. I've seen fixed line height on relative font sizing and it wasn't a pretty site (pun intended). :)

[sonjay]

I always use extra line-height in every site -- usually around 140%, but sometimes as much as 150 or 160%. I've actually had compliments from people on how nice the text looks! They're so used to all the sites that use the default line-height, which is insufficient (IMO), they think I'm doing something really special to the text to make it so readable.

[Clark]

Don't use percentages. Use unitless line-heights [meyerweb.com].

[sonjay]

Clark, that article does a good job of explaining the difference between using, say, line-height:1em vs line-height 1.

But is there any real difference between line-height:1 and line-height:100%? Seems to me it would work out pretty much the same way.

[Clark]

Read the comments [meyerweb.com] too.
Percentages share the same problem as ems do.
1.5em and 150% have the same effect [meyerweb.com]...they pass on the computed value of line-height to any descendant element.

[sonjay]

Oh, I hadn't looked at the comments previously (obviously). That sure is news to me. I'm glad you pointed that out.

And now that I think about it, I've sometimes had to declare line-height for elements that I didn't think should need it -- they were probably inheriting the "computed" line-height from a parent element.

I love learning new things. I hate learning that I've been doing something the wrong way for all these years! ;)

[Clark]

That meyer really knows his stuff. I guess you look at the whole thing differently when you've had to code a browser to standards :)

[camp185]

Mine is set to 1.5em. You might want to consider the amount of reading on your site. Slightly smaller height might make for less scrolling which is a good thing.

[DrDoc]

I, too, set the line-height to 1.5 and have had great success with it. It generally works best if the text is a tad larger to begin with. Too small and the thin lines turn to an illegible mess where paragraphs don't stand out as separated.

[D_Blackwell]

Sure! I like white space. I'm going to tend to lean towards more line-height than the norm. Not so much so that it breaks readability but just enough to where it provides what I feel is a pleasant reading experience for the eyes.

Personally, I don't think line height should be to a point where things look double spaced or even 1.5 spaced.

I want enough line-height to give optimum readability; agree that anything over 1 1/2 leading probably has negative effect.

I vary it according to font-size being used, which is even more important to me because people hate text that they can't read. I'll design at 1.2em to 1.3em. Sure, users can increase the size of the font display (if they know how), but even a +1 bump will blow up the design of many sites. Even with a larger than typical font-size, I like for the design to stand up to at least one zoom bump before breaking layout. 'Standard' font-size, which is too small IMO on most sites, needs to be able to withstand several bumps or I'm probably gone. Screen resolutions are getting higher and higher, so the problem is getting worse for a lot of sites that nobody can read anymore:))