Easy Drop Caps

Every time I come across a CSS solution for a nice drop cap, I never end up using it, because it always involves modifying your XHTML in some way. That’s fine if it’s some static content, but for a blog, having to modify your markup with every post is a pain, and just not worth the effort. That’s why I want to post this very simple way to to add drop caps to your site, with just a few simple pseudo classes: first-letter, first-line, and first-child. They are pretty self explanatory. We’ll use first-letter to affect the first letter in a paragraph, first-line to affect the first line in a paragraph, and first-child to affect the first paragraph of multiple paragraphs. As always, I’ve put up an example.

Now one could just try using first-letter on it’s own for the drop cap, but the problem you end up with is a drop cap on every paragraph. Visually unappealing and a bit of a type crime in my opinion. So instead, we’ll use two pseudo classes together.

p:first-child:first-letter{float:left;font-size:1.6em;margin-right:4px;}

With this we’re just affecting the first letter of the first paragraph. Remember to float it on the left so you don’t have one large character sitting above the rest on the first line.

And now to use first-line

p:first-child:first-line{font-variant:small-caps;}

This will set the first line of the first paragraph in small caps. Optional, but I think it’s a nice touch.

In the example I added a bit more style to drop caps. If you’d like to get a little fancier, try something like this:

p:first-child:first-letter{float:left;font-size:1.6em;padding:5px;background:#000;color:#fff;margin-right:4px;font-weight:bold;}
p:first-child:first-line{font-variant:small-caps;}

I’ve tested this successfully in Firefox, Safari, Camino, Opera, and IE7. These pseudo classes won’t work in IE6, but it won’t affect the usability of your site. The drop caps just won’t appear.