How to Make Drop Caps in CSS & WordPress

Drop caps, otherwise known as initials, have long been a staple of print designers. Marking the beginning of a new section of text, drop caps are a great way to add a little bit of visual interest to whatever piece you’re typesetting. Thanks to the wonders of CSS, we can make this happen in modern browsers too (IE8+)!

Static HTML Drop Cap

If the site you’re working on is a static HTML site – meaning, no dynamic content, no CMS etc – adding a drop cap is a simple two-step process.

First, open your style.css file and add the following lines:

p.drop:first-letter {
font-size: 40px;
float: left;
margin:5px;
}

Next, add a class titled “drop” to the paragraph element you’d like to have the drop cap.

<p class="drop">This paragraph will start with a drop cap.</p>

There you go!

WordPress Dynamic Drop Cap

Drop caps are a little different when the content on the site is being handled by a CMS – a wrong bit of code can leave you with drop caps starting every paragraph. Not ideal.

But the code that follows won’t leave your web copy riddled with drop caps. Instead, it will turn the first letter of the first word of the first paragraph element on your page or post into a drop cap. Note the CSS class “.post”; this is WP specific and is generated by the loop. If you aren’t using the loop/don’t have a div class wrapping your content titled “.post”, this will not work.

Here’s the code:

.post p:first-child:first-letter {
font-size: 40px;
float: left;
margin:5px;
}

This is how we got rolling with drop caps over on the Chorus Magazine build.

Custom Styling Your Drop Cap Initial

Of course, once you have your drop cap working, play around with the styling if you wish. You can change the font; you can change the drop cap color; add text-shadows; background colors and so forth. The only limits are your imagination and what CSS can do. For some inspiration, check out Daily Drop Cap too!