Is readability a black and white issue?

Posted by Andrew Whitacre on March 3rd, 2006.

I live and work in the Boston area. As someone proud of his expensive and non-lucrative creative writing degree, I specialize in helping literature find a home on the web, primarily through good design for longer writing. I'm also Fiction Editor for Identity Theory <www.identitytheory.com>.

http://fungibleconvictions.com

Andrew Whitacre has posted 5 articles.

RSS Feed for fadtastic.net RSS Feed for Andrew Whitacre

Full Profile →

You’re probably not a stranger to the real, physical pain of reading a lot of text online.

Between e-mails, blogs, news sources, and literary sites—let alone on-screen reading required for our jobs—we read a lot of long-form writing every day. And much of it is terribly designed when it comes to readability. Teeny type sizes, narrow line-heights (or leading, for print folks), low contrast, superwide lines—it’s enough to make your eyes throb.

Fortunately, though it hasn’t yet “trickled up” to bigger sites, it’s clear now that many web designers are starting to put as much thought into readability as they historically have into navigation, layout, and functionality.

As a starting point, look at the six most recent additions to the gallery on Stylegala, and you’ll see a number of things in common:

(The six: Veerle’s Blog, UX Magazine, VTwelve Design, Dress for Dialogue, Matija Turcin, The John Carroll School)

1. Sans-serif typefaces. Readers may think sans-serif types feel modern. And they’d be right. But the reason Arial, Verdana, Trebuchet, and the rest feel modern are because they’re now so common on the best-designed sites. There’s a growing consensus among designers that sans-serif types read far better on a screen than serif types. Even on screens with great resolution, serifs generate visual noise where they never did in print. In contrast, sans-serif types read more cleanly.

2. Line-height. Line-height is on the grow! In the trend towards more whitespace, this is probably the most valuable kind for your eyes. Veerle’s Blog uses 150% line-height for posts, and so does UX. Compare that kind of readability to that of an older site with 100% line-height.

3. Color. This is where things are still messy, where there’s no set trend. Each of the six sites above makes use of a wide palette, even for text meant to be read for a while. Some sites succeed, though others fail. There’s no question Matija Turcin’s site would be very difficult to read for any longer than a minute or two. But other designers, such as Matt Webb, have found ways to use a lower-contrast palette in ways that are extremely kind to the eye.

So the question that remains is this: to what extent is the readability of text dependent on color? Is black text on a white background, or vice versa, the way to be nice to your reader, or for longer texts to be easy to read must there be a good deal of color—or images—to give the eye something else to enjoy?

Share This

( 14 so far )

Comments RSS Feed

Negative text, white text on black, is far worse to the eye, than black text on white background.

Tor Bollingmo
March 3rd, 2006
#

Negative text, white text on black, is far worse to the eye, than black text on white background.

Tor,

Do you mean in health or readability terms (or both) here? Do go on.

Andrew Faulkner
March 3rd, 2006
#

black text on a white background is best for print. not sure about online.

i personally find white text on a black background more comfortable.

tiffany
March 3rd, 2006
#

I think readability is less about color and more about contrast. My personal feeling is that it very rarely matters what color the copy is, as long as the color it sits on creates enough contrast.

Also, there have been many studies that suggest serif fonts are much more readable at small sizes. This hasn’t stopped me from setting my copy in a sans-serif, but it’s something to consider.

P.J. Onori
March 3rd, 2006
#

I don’t know what Tor’s reasons are but I ask - how can a monitor emitting lots of white light be easier on the eye than one that is not?

Peter
March 3rd, 2006
#

Inspired by post by Snook’s ‘Gray is the New White’ by any chance?

http://www.snook.ca/archives/000537.php

Danny Foo
March 4th, 2006
#

[…] The second, Is Readability a Black and White Issue? by Andrew Whitacre, begins by pointing out that the issue of readability is beginning to garner more attention among the web designing community. He goes on to discuss how sans-serif fonts, line-height, and color play important roles in readability on the web. He writes, “Fortunately, though it hasn’t yet ‘trickled up’ to bigger sites, it’s clear now that many web designers are starting to put as much thought into readability as they historically have into navigation, layout, and functionality.” […]

Gustavus Web Services » Blog Archive » Design and Readability » Gustavus Adolphus College
March 4th, 2006
#

Inspired by post by Snook’s ‘Gray is the New White’ by any chance?

Bet he didn’t get linked to from Mozilla though. ;)

Great first article, Andrew.

Andrew Faulkner
March 4th, 2006
#

Inspired by post by Snook’s ‘Gray is the New White’ by any chance?

Nope, but that’s a great link on a similar topic.

A related question: What do you all think the role is of color, images, and other non-textual elements in making text-reading more tolerable?

Andrew Whitacre
March 4th, 2006
#

“What do you all think the role is of color, images, and other non-textual elements in making text-reading more tolerable?”

Aiding the content of a large body of text is nice when it’s backed up by imagery, photos or something that has a nice connotation to the content. Color of the text would rather be something to set the “mood”, when done correctly. Otherwise we have ppl that smack a high-contrast picture under pink text and expect people to be able to read.

As said, Black on White is usually “easier to read” compared to White on Black - but not on print, I think there it calls for attention that’s the goal of some print-ads. Not sure though, it’s might be because we’re used to writing on white paper maybe?