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.