Overview

Traditionally found in printed media, drop caps are created by emphasizing the size, color, weight, or style of the first letter in the first sentence of a paragraph. We can easily reproduce this effect on webpages by using the CSS :first-letter pseudo element.

The drop cap CSS class

Let’s start by creating a class called .drop-cap and adding a bit of style to it:

P.drop-cap:first-letter {
	font-size: 4.5em;
	float: left;
	margin-top: .15em;
}

As you can see, the size of the first letter will be significantly larger then the rest of the text. A typical drop cap will line up with the top of the first line of text and the left margin of the paragraph. Horizonal alignment occurs naturally, but we need to account for vertical alignment. By default, it appears slightly higher than we want it to, so the margin-top attribute offsets it enough to get it in line. Depending on font size and unit, this number will vary.

You’ll also notice that the first-letter is floated. This allows the letter to sink into the text instead of remaining inline.

Applying the class

Now that we’ve created the CSS drop-cap class, it’s easy to apply it to any paragraph element:

<p class="drop-cap">
    Lorem ipsum dolor sit amet, consectetur adipisicing
    elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat.
</p>

Which produces something like this in a browser: