EvoBloggito
The Optimal Line Length Principle Applied to Web Design
Author: Ray Gulick; Published: Jun 16, 2009; Category: CSS, Design/Development; Tags: CSS, Design/Development; 6 Comments
The other day I pointed out some of the differences between web design and print design. It started me thinking about some of the things I learned as a print designer that are also applicable to web design. One of the most useful is the Principle of Optimal Line Length. It states that, for any given font-size of a multiple-line block of type (like a paragraph), there is a range of line lengths and line-heights that most people consider easily readable.
Those 3 attributes—font-size, line-height, line length—are inter-related.* Change one, and you may need to change at least one of the others for most people to consider the text readable. In simple terms it means that, the wider the line length, the greater the line-height must be. Or, the bigger the font, the wider the line length. Or, the greater the line-height, the bigger the font.
Below is an illustration meant to demonstrate the relationships between the 3 attributes. In the top section are 2 blocks of text, each with 13-pixel font-size and 16-pixel line-height. Too my eye (and this is why it’s called a principle, not a rule that has formulas and ratios), the wider lines look too tight and dense. However, with the same font-size and line-height in a much shorter line length, I think it looks very readable.
Below that is a section that includes the same font-sizes (13 pixels) with a line-height of 22 pixels. Further below that section are font samples that also have a line-height of 22 pixels, but a font-size of 18 pixels.
So how does this apply specifically to web design? Because of my awareness of the principle, I always consider the line length as well as the font-size when specifying line-height. Also, I never create "fluid" layouts that expand the width of an area that contains text, because sooner or later, the expanded or contracted line length will make the text unreadable (in my and many other people’s opinions). I love IE7′s (never thought I’d be say I love anything about IE) and Firefox’s "scale-up" feature, because when a viewer wants to make the font bigger, it makes everything bigger (line-height and line length), preserving the optimal line length relationships.
Because it’s a principle rather than a rule, designers have some latitude in which to exercise their judgment. As a web designer concerned with readability, I look for the "sweet spot," in which font-size, line-height, and line length allow people to read multiple-line text blocks comfortably and easily.
*Only 2 of the 3 are actually "attributes" in CSS, and I’ve used the CSS hyphenation for them, which may not be "correct" according to Webster’s Dictionary or your high school English teacher.
You seem to have hit the sweet spot. Reading through your article felt like a breeze.
Beau – Those kinds of studies are a big part of the problem in web design. Engineers need rules about the “best” size, and the “best” font, and the “best” line-height. The problem with rules is understanding when they apply to a given situation and when they don’t. Designers need an understanding of the principles involved in manipulating variables to achieve the desired effect (in this case, better readability). Once the principles are understood, they can be brought to bear in making judgements about things like font-size, line-height, and line length.
A recent study found that the most common line height on popular websites is about 131% (given a base font size of “small”–13px).
Firstly, you samples above use “Lorem Ipsum”. It is good as a filler for testing a website’s appearance, but not good as a reading test. I don’t understand Latin. Something like the “Quick brown fox ….” would be better or something completely random.
A comment about the ability for users to read longer line lengths on the web; I agree, however I do not know the last time I read a paper newspaper. I still remember getting lost in newspapers. I guess on the web, I use the mouse subconsciously to help keep track of the line I’m reading and I don’t tend to use my finger to keep a pointer of the line I’m reading because I’m trying to hold the newspaper.
I have wide screen monitors and have come across wide paragraphs of text. I do find there is a limit and have felt the lines are too long.
I am a programmer and have been using EM based sizing. In fact everything is EM in my style sheets. I will experiment with making a readable css class.
Finally, your actual article above is most comfortable for reading, perfect line height, wide and font size.
One of the problems, I think, is that people want a “rule” they can follow unthinkingly and unerringly (e.g., 75 characters per line). But it’s not that simple. Readability (and therefore efficiency and comprehension) are affected by all three of the text attributes I discussed in the article. I would like to see the data that indicates that, other factors (font-size and line-height) being equal, long line lengths onscreen are somehow more readable than offscreen.
There’s an interesting article over at http://www.viget.com/advance/the-line-length-misconception/, essentially:
It’s become a best practice on the web to keep line lengths below 75 characters, and this has been the source of dissent against movements for things like variable-width (fluid) layouts and the like. But research doesn’t support this claim, at least on the web. Instead, users are able to read significantly longer line lengths on the web, and it actually increases efficiency and comprehension.