CSS Drop Caps

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-letterpseudo element.

The drop cap CSS class

Let's start by creating a class called.drop-capand 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 themargin-topattribute offsets it enough to get it in line. Depending on font size and unit, this number will vary.

You'll also notice that thefirst-letteris floated. This allows the letter to sink into the text instead of remaining inline.

Applying the class

Now that we've created the CSSdrop-capclass, 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.

Which produces something like this in a browser:

Drop cap example

Author avatar

About the author

Creator of Surreal CMS and other web things. Follow me for tweets about JavaScript, CSS, and web programming.