Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

There is nothing worse than coming across a website with paragraphs that span the width of your screen resolution. They are usually so hard to read, I don't even bother.

A lot of web designers use generic grid and column systems, but I don't feel these have been optimised for readability, they are more of design guide on general aesthetics.

I guess it comes down to words per line. Are the rules that apply to print media the same for screen media?

Are there any type of guidelines to help me size the width of paragraphs on the screen?

I want to take into consideration:

  • Major web font faces (i.e. Arial, Verdana, Georgia, Times)
  • A range font sizes (i.e. 8px-24px)
  • Space between columns
share|improve this question
    
Speculating: I'd guess "losing the line" when jumping from right to left is the worst problem, which should be affected by horizontal eye movement angle (atan(width/screen distance)) line spacing, and "serif-ness" of the font. Looking forward to answers with actual studies ;) –  peterchen Feb 17 '11 at 18:27
    
Here is an article and some related, useful tools for setting typography correctly on the web: Read this first: More Meaningful Typography (A List Apart) There is also a link in this article for a tool called "Modular Scale" Golden Ratio calculator: Golden Ratio Typography Calculator –  user46058 Apr 1 at 7:16

2 Answers 2

up vote 54 down vote accepted

Ideal line length is reasonably short or reasonably long; what's generally esthetically pleasing to read is generally a good indication.

Columns in a web context make sense only if you were focusing on very compact content; which defeats the purpose of using columns beyond beautification. The reason they don't make sense otherwise is not because they are poorly supported, but because of scrolling; unless you are making a horizontal layout having columns may result in your users scrolling up and down. I can also see anything beyond two columns as confusing as it strains the users memory when they take a small pause from reading—consider how columns add a second axis.


Some quick reference reading and numbers,

Too long – if a line of text is too long the visitor’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text. — Christian Holst

Too short – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words). — Christian Holst

Additionally, you may want to be very conscious of your content size. For longer content prefer longer lines; with short content prefer shorter lines. Typically take the size of paragraphs and sections in your content as variable to how long the line should be—you don't want 1-line paragraphs, but equally you don't want 30-line paragraphs. Choose a happy average that makes the content easy to visualize.

General Rules of Thumb

Take these with a grain of salt, they are just guidelines; feel free to break them. I repeat, they are not "one-rule for all" you need to adopt; just a push/clue in the right direction.

  • 12 words per line
  • 39 characters regardless of type size (alphabet-and-a-half)
  • multiply the point size by 2 and interpret it as picas (points-times-two)
  • around 50-60 to at most 75 characters (spaces included) — this is usually the guideline borrowed from our friends in typography

"The Elements of Typographic Style" by Robert Bringhurst, mentions the following more specific measurements

  • 45 to 75 characters line length (measure); specifically 66 including spaces; Single Column
  • 40 to 50 characters; multi-column
  • 85 to 90 characters; discontinuous text; generous leading
  • 40 characters (minimum); justified
  • 12 to 15 characters; marginal notes; English

Variables in readability:

  • font-size
    • larger = I've tried it, (some) people find it annoying. Just aim for the happy "medium size"
    • medium/standard = larger width
    • smaller = smaller width
  • line-height
    • large (1.9+) = easier to scan lines, longer lines become more acceptable
    • normal = shorter lines
    • smaller = very short lines
  • content length
    • big blob = long lines + large line-height
    • short message = short lines + reasonable line-height

As long as you keep true to "usability common sense," no setting will be wrong, per se. Unlike most design aspects, you can also test it on yourself, simply put some readable content into the element (not necessarily what's suppose to go there, and preferably fresh!) and see if you can comfortably read it. If you can, great; otherwise tweak it until the setting match your content (test it with a few fonts, not just your main one).

share|improve this answer
1  
Is it really character specific, or are these numbers based on some assumptions about media distance and text size? Someone with a 30" wide format screen is sitting fairly close. Even when the desk is 36" deep (~ 1m), the eye will have to scan a good distance. You can set the font size large enough so that you are technically following the guidelines but still taking up the whole screen. I'm thinking it's not just the number of characters at work here. –  Berin Loritsch Feb 18 '11 at 14:49
1  
Also strongly related, ia.net/blog/100e2r –  Jeff Atwood May 8 '13 at 5:56
    
Also, the line-height should be proportional to the length of the paragraph. Source –  jff Apr 25 at 20:18

Also check out this link: http://www.informationarchitects.jp/en/100e2r/.
They propose to have 100% font size (the browser’s default), 10–15 words per line (usually 50% of a browser window with default font), 140% line height — which sounds pretty reasonable for me.

share|improve this answer
5  
There is no correlation with words-per-line and browser window width as browser windows can be almost any width. –  DA01 May 10 '13 at 22:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.