<< Page 23 | Home | Edit Style >>

Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Quite a few websites choose to use a darker background with lighter text. These web pages are impossible to read. Highlight a passage usually helps, but not always. "View Source" is another alternative that's not much better:

However, if I save the page as an image and use The Gimp to revert the colors (Image -> Colors -> Invert), the result is much more pleasant to read:

The trick is in the fonts. Most of the modern fonts are designed for use as black texts on a white background. Since the human brain has a tendency of letting the darker letters "bleed" into the lighter background, these fonts compensate by making the letters just a tiny bit on the "thin" side so that after the post-processing by our brains, things would look "just right."

When used in a "reverse-video" situation, our brain's compensation goes against the page: the darker background would bleed into the already thin letters, making them even thinner and that much harder to read.

So web designers please be considerate. When using a dark background, use one of those "White-On-Black" fonts. Or better yet, use a lighter background altogether.

Thank you!

Responses[13] RSS feed for responses to this blog entry
Posted by Weiqi Gao on April 17, 2004 12:26:28 AM CDT #


Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from Anonymous on April 17, 2004 1:47:31 AM CDT #
Pure opinion. The light-on-dark sample you provided is MUCH easier to read than the inverted sample.
Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from Charles Miller on April 17, 2004 2:27:36 AM CDT #
I find this page a lot harder to read: the bright white background and dull grey text is really hard on the eyes. I find myself squinting whenever I read a page with this scheme. (It's not helped that the gamma on a Mac monitor is significantly brighter than on a PC, I guess) A friend of mine is legally blind, although she can read most of the web at large font-sizes. She finds dark backgrounds and light text a lot easier to make out as well: light backgrounds give her a headache. The colour-scheme of my weblog was largely chosen for her benefit. Anyway, it's all subjective
Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from Brad Shuler on April 17, 2004 12:58:53 PM CDT #
Sorry Weiqi.. a dark background has better contrast and causes much less eye strain when I am forced to sit below an evil array of flourescent lights..
Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from Eric Burke on April 17, 2004 10:57:19 PM CDT #
You are definitely right about one thing. If a human designed a font for a white background, that font will appear different when rendered on a black background. I think you are correct that white letters on a black background appear thinner.

Whether or not one scheme or another is "better" or more readable is purely opinion. But I do think it is generally advisable to choose bolder fonts when using really dark backgrounds.

Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from Cheah Chu Yeow on April 19, 2004 9:27:33 AM CDT #
That's pretty extreme, haha, to use a graphics program to make a webpage's contents readable. If you use Firefox you can take advantage of EditCSS or the Web Developer Toolbar which comes with something similar to EditCSS (actually, you can just look for the Edit Styles bookmarklet). Just change the background and foreground color. I am in agreement with the anonymous commenter before me that your site's grey on white is rather painful to read too, so perhaps you should take a look at something like lowering the intensity of whiteness (something like #f9f9f9).
Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from Tom Hawtin on April 19, 2004 12:38:10 PM CDT #
I think you need to look closer to home. This page is very difficult to read. Did someone already write that? It's difficult to say. At least it doesn't use 3 pixel high characters. It's a pity demi-bold fonts aren't well supported. I prefer white-on-black for code. Makes syntax highlighting work much better. But a strong enough typeface is important (as is sufficient leading).
Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from Weiqi Gao on April 19, 2004 10:36:03 PM CDT #

I've changed to a black/ivory theme. Should be less stress on the eyes. :)

I'm not against dark backgrounds per se. I'm merely pointing out the need for a bolder font when dark backgrounds are used.

For the record, I did not have any problems reading Charles's Weblog.

Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from Carrie S on April 12, 2007 3:52:33 PM CDT #
From a user experience standpoint, saying that black text on a white background is easier to read is not an opinion, it's been tested. The issue is not whether or not its possible to read, its what's the most effective way to present the data, making it as easy on the end user as possible. Dark backgrounds do take more time to process visually. Glancing at a blog or reading a few headlines, sure, you can tolerate it as it doesn't make that big of a difference. Try reading cnn.com everyday or some other text heavy page when you are looking for important information! Per usual, the end goals (and the context) of the user should be considered when making decisions like this. I'd recommend against making your user work harder to read a content heavy white on black site. There are other design treatments you can use to make your site dark and sleek without compromising readability.
Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from Eric W. Cahoon on November 1, 2007 10:52:22 PM CDT #
Excellent choice on moving to the cream and ivory theme. The additional contrast makes if much easier for must humans to read, as opposed to the reverse white on black. However, I must agree with Tom Hawtin the font size is small and I urge to change your font from being fixed to percent based. This will allow your viewers to use the built in text size tools found in IE and many other web browsers.
Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from Miguel on November 28, 2007 3:57:38 PM CST #
Light gray on black is so much easier to read, and so much easier on your eyes. In the images you posted, the dark one is so much clearer and looks so much nicer. The problem is, since the advent of GUIs, vendors have tried to make things "easy" for users, and they believe it's easier if the application looks like paper. Hey, look, it's like paper, and I know paper, woohoo! Well, congratulations. It's so much easier and nicer this way, isn't it? Duh. The computer monitor is a source of light. I don't want to stare to a light bulb for 8+ hours a day. If you can't read light gray on black text properly, you either are using the wrong OS (get Linux, FreeType 2 is so much better at rendering fonts than anything Windows ever had, and it's so much better on the eyes), the wrong fonts (choose a nicer font, one that doesn't look like insect legs) or the wrong font size (now THAT does torture your vision; the obsessively tiny text; I always make text a few steps larger when I'm going to read for a long time).
Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from spenser on December 10, 2007 7:54:45 PM CST #
"From a user experience standpoint, saying that black text on a white background is easier to read is not an opinion, it's been tested. " By whom? The reverse was found to be true in testing by both the US military and IBM. There is a reason that legacy systems use green screen. The use of black on white is simply an ill advised attempt to mimic printed paper. However, printed paper and screens have different characteristics. One reflects light and the other emits light.
Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from Anonymous on February 23, 2008 5:00:10 AM CST #
I'm for black bg with bold white fonts *L* http://www.blackle.com/about/
Reply

Re: Using "Black-On-White" Fonts in "White-On-Black" Web Pages

Comment from Anonymous on June 7, 2009 2:40:03 AM CDT #
"DARK" fonts on "LIGHT" backgrounds are easier on the eyes! EXCLAMATION POINT! Do you people use peripheral vision while reading? I do, & white fonts on black backgrounds "burn" the text of the entire page on my eyes! Have you ever tried tried to focus on the bright Sun against the darker sky? SAME CONCEPT! If for some reason, a web designer thinks it's "cool" to have LIGHT fonts on DARK backgrounds, DO NOT MAKE THE FONT WHITE & THE BACKGROUND BLACK! Shades of GRAY work so much better. If at all possible, STICK WITH A (dirty) WHITE BACKGROUND.

Add a comment Send a TrackBack