Ideal column width for paragraphs online

  • 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

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

    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

    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.

  • srcspider

    srcspider Correct answer

    10 years ago

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

    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.

    Also, the line-height should be proportional to the length of the paragraph. Source

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM