Quick Tip: Easy Way To Create Drop Caps On Your Blog

A drop cap is when the first letter of a paragraph is larger than the average font size and that letter ‘drops’ down 2 (or more) lines. You can actually see this right here on SpyreStudios. I’ve attached a screenshot for those of you reading via a feed reader:

Drop Caps on SpyreStudios

No Need For A Plugin

So, we already know WordPress is awesome, there’s a lot of things you can do with it and there’s a even a plugin that automatically creates drop caps. Nice! But what if you don’t want to use a plugin (I sure don’t!) and you actually want to have drop caps only on some posts, and maybe elsewhere on your site? (read: you’re a control freak just like me when it comes to design)

Well, good news is you don’t need a plugin to create nice drop caps on your blog, all you need is some CSS and a span tag! First of all, go edit your stylesheet (usually the style.css file)

And simply add the following code:

span.dropcaps {
font-family:Georgia, serif;
color: #ccc;
font-size: 46px;
float: left;
font-weight: 400;
line-height: 1em;
margin-bottom: -0.4em;
margin-right: 0.09em;
position: relative;

Or something similar top the CSS above. Of course you need to style this to fit your actual design and typography. The font-size, marings and line-height will vary depending on your design and typography, but this should give you some ideas :)

Add The Span

Now here’s the easy part (ok, well the CSS was pretty easy too), simply wrap the first letter of your post inside a span, like this:

<span class="dropcaps">A</span>

And voila! You got a nice drop cap, it looks good, you’re happy, the world is happy, and.. well, did I mention it looks good? :)


Scroll back to the top