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
Answer
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).
No comments:
Post a Comment