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:
- Bandwidth -- Obviously, each image on a page adds to that page's weight. It can be argued that the tiny drop-cap images are negligible, but I'll point out that on a highly trafficked site such as nytimes.com, the bandwidth spent on sending one image to millions of users is nothing to sneeze at.
- Accessibility -- As pointed out in Joe Clark's "Building Accessible Websites" (which will be reviewed here soon), "[S]creen-reader users will be inconvenienced by the use of a drop cap. It simply breaks up a word." In other words, a screen reader will place a space between the drop cap and the remainder of the word. The example page above will be read aloud as "em edford mass" instead of "medford mass."
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 9: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 16, 2002, at 5:38 a.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 8: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 page.