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? :)

Comments

  1. says

    Alternatively, you can use the “first-letter” pseudo-element.

    p:first-letter {
    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;
    }

  2. says

    Great tip!

    The advantage of using Logan’s method is that you can then use it for dynamic texts as well. (avoiding the hassle of having to manually insert the tags.

  3. says

    @Brandon: lol thanks man! :)

    @Logan Leger: Nice one Logan! I just figured it’d be nice to be able to place the drop cap exactly where I want it, but the pseudo-element would work real nice too!

    @zafra: For sure it’d work on Blogger, you just need to add the CSS code and add the span where you want your drop caps.

    @Joel Laumans: Hey I didn’t think of that! Good point :)

  4. says

    @Niki: Hey nice vid! Yep, nice enhancement, and like you said in your vid, people with IE may not see it, but who cares? hehe Oh and I just realized you had the iTunes feed (just subscribed!) Thanks for stopping by :)

Trackbacks

  1. […] rop Cap is the first letter of a paragraph that is enlarged to drop down a couple of lines. A common fixture in print publishing from novels to magazines to beautifully illustrated childrens’ books, drop caps are slowly gaining momentum in the online word. Typography websites and blogs, especially those using minimal designs and themes are truly exploring the aesthetic value of the drop cap. My interest in drop caps got piqued after I was introduced to the Daily Drop Cap Project by illustrator and typographer Jessica Hische. On that website, Jessica strives to offer a uniquely beautiful drop cap alongwith the code to embed it in your pages everyday. Jon Phillips of SpyreStudios shows you how to add a drop cap easily and effortlessly via Css. […]

Leave a Reply

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

* Copy This Password *

* Type Or Paste Password Here *