The general consensus is that zebra striping a table makes it a little easier for people to keep track of which row they're on...but is this reduction of cognitive taxes only for table rows? I at least sometimes backtrack when I'm reading to a previous line of text.
I've zebra striped an article page and I am wondering if this is an added benefit or just something that is interesting but not better than the way people read almost everything else?
The purpose of zebra striping is (with arguable success) to connect items in a row that are a distance apart...often as you'd see in a table and where scanning (rather than reading line-by-line) is often a goal.
Item Item Item
But a paragraph of text has no such problem--the lines of text, themselves, make the connection for you. And proper and thoughtful linespacing is all the division you need between lines.
So, I'd say zebra striping for a paragraph of text is an attempt at fixing a non-existent problem with a solution intended for an entirely different context.
Line length (measure) is your real problem. The number generally advised for a readable measure is about 60-70 characters. Cut the measure to about 60% of it's current length and you'll find you have far less trouble. The other way to solve it is a bigger font size ... that would be really ugly.
Adding the alternating rows further hurts reading in your example. In a table it works because you're identifying discreet units. Using it for lines of text isolates arbitrary units (line breaks) in a running text. That's not helpful at all.
Case in point.
Here's a quick before and after on your page. I simply narrowed the paragraphs to 64% of the containing div. That allowed me to bring the leading down from 2em to 1.7.
Smashing Magazine conducted a Typographic Study for best User Experience. What they found is plain clean backgrounds with standard type treatments tend to work best. People will typically have an easier time reading what they're familiar with. There is no one set rule for the number of characters per line. It depends on the amount of copy, the point size of the copy, and the usage.
In your example you're using super long lines which make it harder for the reader to flow from the far right back to the next line on the left. While adding the differing colors between the lines is a little distracting, you've also increased the line-height which has more of an impact on readability than the background.
Extreme line spacing (leading) leads to double-spacing
Double-spacing also has an impact. If you look at papers written for school they will typically ask to have them double-spaced for usually two reasons:
For most normal people not used to reading double-spacing it is harder to read.
Using zebra stripes in a paragraph is not a good idea. Zebra striping is a solution for improving readability of tabular data and even that is a debated area - http://alistapart.com/article/zebrastripingdoesithelp
There is no repeating structure in the words of a paragraph, which is a good thing since it makes lines easier to distinguish. When you use zebra stripes on alternating lines, you are enforcing a repeated pattern and making it harder for the user to read.
Some articles to help you improve readability of your website:
A few suggestions:
A few general rules of body text are:
Text Length Writing for the web is a whole different thing than writing for print. Users want smaller pieces of text. They hardly ever read an entire page, instead, they scan for keywords.Therefore if you have to add much text, do it in such a way that it doesn't seem that is a long long text. Section it.
Sections Break your page into sections, so the user can see quickly what the page is about and this will make them read the contents.
Leading As with print design, take a look at your leading. A starting point would be 12px leading or more for a font size of 10px.
Width Is suggest a length of between 12 and 16 words per line.
Fonts Sure bets are Tahoma and Verdana (both designed especially for on-screen usage), both with more than 90% availability on OS X and Windows.
Based on: > Introduction to Good Usability - peterpixel
