A simple typographic trick to increase text readability by up to 30%

At its very heart typography is about two things: legibility, which is concerned with how distinguishable letters, words and phrases are; and readability which deals with how easy it is for the brain to convert those elements into a coherent message.

Have you ever found yourself reading a single line of text twice, as if it were two lines, especially when your eyes are tired? It occurs, because the eye gets lost on its journey from right to left (or left to right, depending on your language) from the end of one line to the start of the next. It’s the reason that children trace lines with their finger when they’re taught to read.

There are a few things that typographers can do to prevent the problem, and they’re especially important in large amounts of body text, like news reports or blogs: firstly, make sure that your characters per-line isn’t too high, the further the eye has to travel the greater its chance of getting lost; secondly consider a serif font, the greater horizontal impression creates greater visual distinction between lines of text and white space, serving the same role as the aforementioned child’s finger; lastly pay great attention to your leading, greater inter-line spacing creates clearer channels for your eye to follow.

In addition to this traditional advice, a new technique has been discovered. BeeLine Reader is a fascinating new plugin for Chrome that demonstrates how it works.

BeeLine Reader adds a color gradient to lines of text, making the transition from the end of one line to the start of the next easier for the eye. Stanford University carried out a test using the plugin and concluded that BeeLine Reader resulted in an average reading speed increase of 10%; the plugin’s own site claims a seasoned reader will experience an increase of 25–30%.

sample

You should be able to read the text on the right much faster than the text on the left.

Whilst I can’t say I approve of the plugin forcing text into a single column, or of the colors they’ve used (ugly for most and useless for anyone with protanopic color-blindness) the principle is sound. There is a gray-scale example on BeeLine Reader’s site that improves readability, but wouldn’t infringe on anyone’s branding. A quick trial of their reading test, showed I improved by 22% using the gray version.

Although there’s no easy way to implement this kind of design in simple CSS, it is possible to code as the plugin demonstrates.

If you’re designing large amounts of running text — especially if other contraints force you to use columns that are too wide or line-height that is too small — consider applying this technique to compensate.

What do you think of BeeLine Reader’s technique? How did you fare in their reading test? Let us know in the comments.

Featured image/thumbnail, color coded image via Shutterstock

  • Jeseph Meyers

    I can see this improving readability but I think without providing a direct announcement/explanation this would initially come off as distracting to readers

    • Kasey

      BeeLine reader is a browser plugin so the gradient on the text is not part of a website’s design. You get a button in your bookmarks toolbar that will apply the gradient to whatever page you are reading so no need for an explanation. If they have it installed and use it they should know what it does.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      I agree with you when it comes to the red/blue text. But have you tried the black/grey? That looks very similar to regular monotone text but the readability is still improved.

  • ezekiel tojoshan

    Interesting… i can’t see it ’cause my MS but must be cool.

  • NT

    For readers who read each word, may help, but we know good readers don’t read EACH word as they dont read each letter, it then is disturbing their vertical scanning of the text.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      Actually the test results showed a greater improvement in experienced readers. It seems good readers are capable of seeing more than the speed of their eyes will allow.

    • http://MichaelMusgrove.com/ Michael Musgrove

      This isn’t about each word; it’s about keeping track of which line you just read when your eyes move back to the start of the next line and thereby improving vertical (and definitely horizontal) scanning.

  • chris

    I cannot read the text on the right without pausing and rereading each sentence. I am dyslexic though, so my experience is not typical.

  • David Selden-Treiman

    This is interesting. Can you achieve the same effect by just using shorter paragraphs? This will create more visual breaks, allowing greater readability.

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      Yes, you could. And you could also increase the line-height and shorten the line length. But you don’t always have those options.

  • James

    God scanning that text on screen is a nightmare….

    I would be interested to see if their findings were based off contemporary studies, or off the initial stroop effect findings from 1935. So far I can find no link to the results of their test.

  • Lovingdesigns

    The implementation of the chrome plugin and bookmarklet was just weird, it actually replaces the whole page with text paragraphs – if it was inline, it would be fine but it actually removes images etc.

  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    Yes, it is. If you take a look at their site they have a greyscale option that really doesn’t stand out like the red/blue does, but I tested at a 22% speed increase using it.

  • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

    Print designers took hundreds of years to get it, and web designers got it in 15 years. So we win! (That’s what you’re saying, right?)

  • repmovsw

    Dubious solution in search of a problem!? The colored text (above) is less legible and more distracting/irritating than the original. In my case the reading test on the site showed no increase in reading speed.

  • Laura Montgomery

    Just took the test and it didn’t increase my reading speed. Guess it won’t work for everyone.

  • devent

    How about a plug-in that can do hyphenation, you know a typographic technique known to men since the invention of writing and used in digital text for over 40 years? But I guess the new age of the Web will remove the knowledge of this ancient technique and we will know nothing better then broken lines.

  • Winston Wei-Hsiang Su

    Hi Ben. Awesome article. I am Winston, the editor of justfont blog( blog.justfont.com), a blog on typographic issues based in Taipei, Taiwan. May I introduce your article to our readers, in Chinese?

    • http://www.webdesignerdepot.com/ Benjie — WebdesignerDepot

      We don’t allow republishing unfortunately, but you are of course welcome to link to the article if you like :)