How to Make Drop Caps in HTML with Images or CSS

19Jan2008

Image Drop caps are a neat way of formatting content, in which the first character of a section of text is made slightly larger than the rest, in a stylized font, and dropped down through the next few lines of text. Books often begin new chapters with drop caps. They do not increase legibility of the text, yet they are proven to increase readership, making them a handy little tool in marketing. The most likely reason for increased readership is that drop caps convey a sense of importance about the text. It's not haphazardly thrown down on the page, but designed carefully and with attention to detail.

This technique is used to a great extent in magazine and newspaper articles, and in texts (denoting the beginning of a chapter). For that reason, many advertisers have adopted the technique in ads, with proven results.

The technique has not been perpetuated to the web for a few reasons:

  1. There is no font formatting technique for drop caps.

  2. If the font is simply made larger for the first character, it will rise above the first line rather than dropping down.

  3. Even if there were a property to set for drop caps, the stylistic fonts used in drop caps aren't widely supported by browsers.

Image-Based Drop Caps 

Despite all of the problems outlined above, it is possible to make drop caps using images. For 10-12 pt. font (size="2") text on your site, I suggest making a series of drop caps - one for each letter of the alphabet, each number, and one quote - in 24 to 36 pt. text in a graphics software (the resulting image should be about 35 to 50 pixels high, and varying width).

Load all of the images into a subdirectory of your images folder called "letters" and use them like this:

<p>
    <img src="./letters/D.gif" align="left" hspace="5" vspace="0">
    rop caps are a powerful tool for increasing readership.
</p>

Drop caps can make your content look really nice.

CSS Drop Caps

Here is a cool alternate way of creating XHTML drop caps using CSS2, supported by IE5.5+ and NS6+.  In the future, this will become the definitive way to create this type of stylized text. 

<style>
p {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 10pt;
    color: #000000;
}
p:first-letter {
    font-family: Times, Times New Roman, Tahoma;
    font-size: 36pt;
    float: left;
}
</style>