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:
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? :)
About the author:
Jon Phillips is the founder and owner of SpyreStudios. He's been freelancing for many years and now focusses on WordPress development and blog design for small businesses and online publishers (see portfolio here).
Are you a talented designer who enjoys writing and blogging? If you are, we want to hear from you! We're currently looking for contributors!
jump to the comment form ↓
March 21st, 2009
But how do you “bus a cap” in yo blog? Kidding. Nice technique! Gonna include a link in my favorites list tomorrow.
March 21st, 2009
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;
}
March 21st, 2009
Hi!, love your blog. This tip work to in blogger?
March 22nd, 2009
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.
March 22nd, 2009
@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 :)
March 23rd, 2009
thanks
March 23rd, 2009
Nice Tip! I did a quick video tip on this a few weeks ago: http://www.nikibrown.com/desig.....paragraph/ Drop caps are a nice progressive enhancement :)
March 23rd, 2009
@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 :)
October 3rd, 2009
Very thoughtful post . It should be very much helpful
Thanks,
Who Linked To This Post?
Share your thoughts, leave a comment!
(get your own gravatar)