Why line length matters (Typography 101)

During my daily reading I ran across this piece over on the Rails blog discussing how a large political blog is considering three web languages/frameworks for redoing their site.

The comments within are fairly interesting for what they are, but this thread in particular caught my attention.

The age-old debate

Every UI job I’ve taken always runs into this discussion. Regardless of the setting there’s always some programmer or marketing type who thinks that proficiency in their field leads them to be an expert in yours as well.

If you’re not familiar with it, it goes something like this…

“Why can’t we make the text just run the entire length of the page? I don’t like scrolling, and all that white space is just wasting room on my nice big monitor.”

Sometimes, just to rub salt in the wound they like to add this one as well…

“I think that would make the site much more usable.”

...Please just put me out of my misery now.

Why long lines of text suck

Line length, leading (rhymes with heading), and word spacing all contribute to the readability of text on the printed page or screen.

One of my favorite books sums it up the best…

The lines should be long enough to get complete thoughts into them and there ought to be enough space between them to allow readers to finish reading a line before their eye gets distracted by the next.

If you make lines the entire length of the browser window it’s extremely difficult to move your eye to the beginning of the next line after you finish with the previous one.

But print and screen design are different!

Of course they are. In the web world we have to deal with liquid layouts, multiple font sizes and screen resolutions.

I’m a fan of constraining text width to fixed pixel columns, or small percentages.

A lot has been written on the subject, but I find these resources helpful:

Now if only I never had to explain this concept again…

seth, Sat, 06 Jan 2007 00:23:00 GMT
4 comments
Comments

Leave a comment

  1. ix 2 days later:

    constraining the width to some sliver of the page is annoying as hell. your blog is the perfect example of this theory gone wrong. i use toolbarless F11’d firefox owning a 12” screen. at the text size its at since im sitting 5 feet away, theres about 3 words a line.

    stop making assumptions, like people are using 1280×1024 screens, or what not. thats the ultimate solution. its a problem particularly bad in the email space – i often get replies from people asking me to not put an entire paragraph on one line, and rather wrap at 80 chars. as if thats going to be of any use on a 30 char or 120 char wide screen (which is what i tend to use)

  2. ix 2 days later:

    here’s another horrible offense

    the code sample boxes are only showing 20% of the width of their contents before scrolling, yet 2/3s of the total screen width is unused

  3. Seth 3 days later:

    Yeah but you also tweak your background color, bump the font size up, and generally fuck with all of the defaults in your browser. You are not a good test case :)

  4. A. N. Onymous 8 days later:

    Actually non-standard font sizes are a very good argument against constraining the page width to an arbitrary pixel width. Use a font-size-relative metric instead (em) so people with poor eyesight can increase the font size and still get reasonable line lengths.

    (at least your site doesn’t commit the common “everything in font-size:small or smaller” crime…)

    By the way, your comment form is broken. Trying to submit without an author name disables the submit button forever.

Comments