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:
[html]
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;
}
[/html]
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:
[html]
<span class="dropcaps">A</span>
[/html]
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? :)
Author: Jon
http://www.24alta.ru
Online roulette Canada.
Brandon Cox says
March 21, 2009 at 8:40 pmBut how do you “bus a cap” in yo blog? Kidding. Nice technique! Gonna include a link in my favorites list tomorrow.
Logan Leger says
March 21, 2009 at 10:08 pmAlternatively, 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;
}
zafra says
March 21, 2009 at 11:28 pmHi!, love your blog. This tip work to in blogger?
Joel Laumans says
March 22, 2009 at 10:18 amGreat 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.
Jon Phillips says
March 22, 2009 at 12:49 pm@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 :)
Selvam says
March 23, 2009 at 3:26 amthanks
Niki Brown | The Design O'Blog says
March 23, 2009 at 7:24 amNice Tip! I did a quick video tip on this a few weeks ago: http://www.nikibrown.com/designoblog/2009/02/24/quick-tip-20-drop-a-cap-in-your-paragraph/ Drop caps are a nice progressive enhancement :)
Jon Phillips says
March 23, 2009 at 7:32 am@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 :)
Devon says
October 3, 2009 at 9:01 amVery thoughtful post . It should be very much helpful
Thanks,
Jenny says
May 9, 2010 at 12:07 pmAwesome :D I am totally using this on my site :D
mbreti3gut says
June 2, 2010 at 8:45 pmHey, this is just I need for my blog. Thanks a lot