Drop caps!

Google's web-font announcement has rekindled my latent interest in web typography.

The typographical changes to my blog are a work in progress, but figured I'd mention the latest one: I finally added drop caps for the first letter of each entry. I love drop caps, and they're fairly easy to do in modern CSS; dunno why I never did this before.

They won't appear as drop caps in older browsers, alas. But I figure most of y'all read my entries on Facebook or LJ or in feed readers anyway, so all the typographical stuff I'm doing is primarily for my own benefit, and that of any of you who do stop by the blog itself and who have newer browsers.

I got the drop-cap code from Matt McInerney's 2008 post “Easy Drop Caps,” with a couple of slight modifications. Here's my code:

div.entry-content > div.asset-body > p:first-child:first-letter {
  font-size: 2em;
  font-weight: bold;
  float: left;
  padding: 5px;
  margin-right: 4px;
  background: #3c419a;
  color: #fff;

The div classes are to match the Movable Type template I use, “Minimalist Blue.” The oddly specific background color is to match the background color of the top bar from that template.

Join the Conversation