Coding Articles & Tutorials

smoseley · February 12 '04, 11:29 PM (#1)

How to Make Drop Caps

by Steven Moseley

Drop caps are when the first character of a section of text is made slightly larger than the rest, in a stylized font, and dropped down to the next line or two. Every section of this book begins with a drop cap. Drop caps do not increase legibility of the text, yet they are proven to increase readership, making them a handy little tool. 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:

There is no font formatting technique for drop caps.
If the font is simply made larger for the first character, it will rise above the first line rather than dropping down.
Even if there were a property to set for drop caps, the stylistic fonts used in drop caps aren't widely supported by browsers.

Despite all of these problems, 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:

Code:

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

smoseley · March 8 '04, 11:50 PM (#2)

Anyone try this out? Drop caps can make your content look really nice. Anyhow, I found a cool alternate way of creating drop caps using CSS2. Supposedly, it's supported by IE5.5+ and NS6+

Here it is !!

Code:

<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>

Try it out!

rndhosting · March 21 '04, 12:38 PM (#3)

IIRC, the pseudo-class :first-letter isn't supported by ie, however it is supported by "real" browsers such as Firefox/Mozilla