110

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
3
  • 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, 2011 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, 2014 at 7:16
  • Maybe one should add "language" to the items in consideration? German with its long words is maybe to be treated differently from a language liking short words. And of course ideogram-based language (Chinese, Japanese...) have a different set of problems.
    – PhiLho
    Jun 4, 2016 at 9:52

2 Answers 2

97

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).

3
  • 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. Feb 18, 2011 at 14:49
  • 2
    Also strongly related, ia.net/blog/100e2r May 8, 2013 at 5:56
  • Also, the line-height should be proportional to the length of the paragraph. Source
    – jff
    Apr 25, 2014 at 20:18
8

Also check out this link: http://www.informationarchitects.jp/en/100e2r/.

Designing bent over with your face glued to the screen is bad for your back; try leaning back and continue designing in a relaxed position. Your designs will be more relaxed, and so will you.

 

To realize how small the text is on many websites, compare to a book that you feel comfortable reading, then change the font size until the type on the book and the screen are about the same size:

 

The default HTML line height is too small. If you increase the line height, the text becomes more readable. For type on screen, 140% leading is a good benchmark.

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.

1
  • 8
    There is no correlation with words-per-line and browser window width as browser windows can be almost any width.
    – DA01
    May 10, 2013 at 22:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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