<< April 16, 2004 | Home | April 18, 2004 >>

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!