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?

  • When I read the title, I was thinking that you were striping at the paragraph level and not at the line level. – Dan D. May 1 '13 at 0:40
  • 3
    On my screen and with my eyesight there's a rather nasty moire effect that makes the page appear to vibrate. I don't know if others see the same thing, but I would personally avoid reading an article displayed like that. – Graham Herrli May 1 '13 at 2:44
  • 2
    When I zoom the text in/out, the striping doesn’t match the text anymore. – unor May 1 '13 at 14:45
  • I couldn't read a single line, eyes just wouldn't focus in one place. Too much noise in one page. – RhysW May 1 '13 at 16:08

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.


I think you're trying to solve a readability problem the wrong way.

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.


64% width and 1.7em leading

  • Could I have a pixel width to go with your recommendation? – Christos Hayward May 1 '13 at 20:02
  • In my example I ended up with 64% of whatever your current column is. That's certainly not a hard figure but I don't think you want diverge too far in either direction. It's probably between 60 and 70% of where you are. With a longer measure comes deeper lines. If you set your type to read well, long lines won't actually save you much space, if any at all. – plainclothes May 1 '13 at 21:14

Readability is everything

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:

  1. The teachers are used to reading double-spacing
  2. It affords the teacher the ability to comment between the lines.

For most normal people not used to reading double-spacing it is harder to read.

  • 1
    @HeyCameron Thanks. I didn't know this site existed until we were answering a few UI questions on Stack Overflow. – AbsoluteƵERØ May 1 '13 at 15:12

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:

  • Use different fonts/colours for breadcrumbs and body content. This look the same and it's not easy to differentiate where sections starts
  • Separate sections, title and content so it's easier to notice scan through in case the user doesn't want to read all
  • Don't add any background (zebra) to the images, it's just noise for the eyes
  • You might also like can be a separate section, different background, etc.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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