Drop caps are a very useful technique for making your paragraphs stand out a bit. Today, we’ll have a look at how to implement drop caps with care, and some of the pitfalls surrounding their use.

STEP ONE:

Now, we’ll need to target the first letter of our paragraph. To do this, we’ll wrap the first letter in a span tag, and give it a unique class name. Here’s what the HTML will look like:

Great, now we can start styling the first letter to create our drop caps effect.

STEP TWO: The CSS

We’ll need to shrink our paragraph a little bit, since right now it just runs completely across the screen. Let’s give it a height and width definition to bring it down to size:

Wonderful, now our paragraph is smaller and more manageable. Next, we’ll go ahead and start styling the first letter. Let’s make it 4 times bigger than the other text and a bit bolder as well:

Now, when you view the page in a browser, you’ll see that our drop caps implementation is already beginning to take shape. However, notice that the text after the first letter runs along the bottom of the drop caps and normally should run somewhere nears the top.

Beginning to style the first letter

If we float the first letter to the left, we almost get the desired effect. Here’s how to float the first letter:

You’ll notice that the letters following the drop caps are still a bit higher than the drop caps itself.

Floating the first letter

The last step will be to add a slightly negative top margin to pull our drop caps up a notch. Here’s what the finished CSS looks like:

Preview:

Final Result

CSS drop caps are all the rage, and as you can see, aren’t very hard to implement at all. You could also give the first letter a more elegant style font to make it really stand out from the rest of the text. Experiment with different styles to find a drop caps that suits your site. Join us next time when we discuss the line-height property and what it does. See you then!

Download Source Files