Drop Caps Like a Pro

How to Make a Drop Cap in CSS

The code window shows the CSS I'm using to selectively create drop caps on this page.

You will have to plug in the "dropcap" class every time you want to use it. You can use a span element: <span class="dropcap">text</span>.

If you'd like to implement drop caps throughout your entire site, I'd recommend checking out CSS Tricks for a modern, CSS3 way to get more granular.

CSS

.dropcap {
  float: left; /* nails the letter to the left */
  font-size: 3em;  /* enlarges the letter relative to the default */
  line-height: 0.7em; /* reduces line-height relatively */
  padding: 5px 2px 0px;} /* describes padding top, right & left, and bottom respectively */

HTML

<p><span class="dropcap">N</span>ow you too can wow your audience with your awesome web design skills. ...</p>

Result

Now you too can wow your audience with your awesome web design skills. Nonchalantly throughing in a drop cap here and there, you'll look like a pro! Another thing you could try would be to mix serif and sans-serif (drop-cap vs. text). This could spice things up nicely.

Can I use an image? Yes!

HTML

<p><img src="http://dailydropcap.com/images/Y-6-cap.png" title="Daily Drop Cap by Jessica Hische" align="left" alt="Y"/>ou can have a fancier drop cap....</p>

Result

You can use a graphic drop cap if you'd like — and some people would! What I've done here is used a beautiful drop cap letter and code supplied by Daily Drop Cap. That link leads you to the "Y" section but they've been making these beautiful drop caps since 2009 so they've got quite a large library.