CSS Drop-Caps

Use CSS to do drop-caps without graphics or pseudo-classes

Shop for web design and development books here.


In this section, I will attempt to document and demonstrate how to overcome some of the little problems that many developers encounter while transitioning from transitional to strict doctypes.

How to Do a CSS Drop-Cap

A drop-cap is a decorative text effect used in professional typography where the first letter of a paragraph is larger and floated left. This may be done reliably with a graphic—but who wants to make a graphic for every drop-cap? The solution is a bit of CSS, applied to a span around the first letter. The trick is to use font-size, line-height, margin, and padding to make the drop-cap appear and behave as desired. The drop-caps in this site use the following CSS:

.dcap { /* note the em and ex, not a typo! */
 font-size:2.3em; line-height:2.3ex; float:left;
 margin:0 3px 0 0; padding:0 0.1em 0.05em 0.1em;
 background-color:#D2CCB7; color:#928c77; }

<p><span class='dcap'>A</span> drop-cap is a…

You’ll have to fiddle with it, but when it’s just right, it’ll occupy just the right space, shrink and grow with browser settings, and generally look nifty. My clients like it. Like all floats, make sure enough text follows it to wrap it properly, even if the user is running 1280, or else apply a clear:left to the next tag.

Leave a Reply

Your email address will not be published. Required fields are marked *