Drop caps at NYTimes.com

Written by Adrian Holovaty on November 4, 2002

For some time now, NYTimes.com has been using single-letter images to create a drop-cap effect on article pages.

In this sample Times article, for example, the letter "M" is actually an image hard-coded into the article body.

This was a fine technique in, say, 1997. But these days, the NYT would do well to get with the times. See, there are two problems with presenting a drop-cap this way:

Instead of hard-coding images as drop-caps, a better technique is to use CSS to do all the formatting automatically, using the first-letter pseudo-element. Check out the about.com CSS drop-cap tutorial for more.

Comments

Posted by Jay Small on November 4, 2002 at 3:36 p.m.:

Not to engage in another "do-it-because-it-looks-good" vs. "do-it-because-it-meets-a-functional-need" debate -- but I always saw drop caps not as decoration, but as a way to give the eyes a rest between, for instance, chapters of a book or other long runs of text.

The NYT example always seemed less valuable to me because it's at the beginning of an article, where you've just executed a click to get there and the eyes have already been led down a path from "big-type" elements (headline, deck, teaser etc.) to the body of the story. You don't need a break there, you just need a clear path to dive in (and a compelling lede would help).

Posted by Mark on November 15, 2002 at 11:38 p.m.:

Actually, the latest version of JAWS reads image drop caps correctly. cf http://diveintomark.org/archives/2002/08/23.html#automatic_leadins

Posted by Michael on January 3, 2003 at 2:15 p.m.:

Jay, readership studies have shown that drop-caps attract the eye and improve readership. That's why they are almost always used in ad copy.

Comments have been turned off for this entry.