How to create drop caps with CSS (and CSS3)

Drop caps are a nice typographic detail that look great on many websites; I’ve used these myself on several examples including Just Holiday Nannies (main page headings) and Occupational Synergy (leading paragraphs). There are a few ways of achieving this effect but the CSS selector I like to use is the :first-letter pseudo-element. This selector is reasonably well supported across most modern browsers (albeit with a few minor bugs here and there). Here’s how it works.

The :first-letter pseudo-element takes a number of properties and values (but not all). The typical style sheet rules that I tend to use for this are shown below:

.dropcap:first-letter {
	float: left;
	font-size: 4em;
	line-height: .8em;
	margin-right: 3px;
	padding: 2px;
}

This means that the first letter of an element with a class of .dropcap will take the style declarations shown. I float left so that the letter spans more than a single line, give the letter a larger size and use margin-right, padding and line-height to fine tune the letter’s position. Line-height (use the same size units) can be used for vertical alignment if padding and margin are not enough…. although I found that this was sometimes inconsistent between browsers.

Of course, you don’t need to use a class name like .dropcap. An element like <h1> or another selector works as well. For example, sometimes it can be useful to style the first paragraph after a heading and here you could use the adjacent-sibling selector like this:

h1 + p:first-letter {
	...style rules go here...
}

Other properties and their values can be applied to the :first-letter pseudo-element including font, color, background and border properties. However, where it starts to get interesting is the use of CSS3 properties such as border-radius (with -moz- and -webkit- prefixes) and box-shadow. Just remember that CSS3 properties will not be supported by all browsers.

I’ve put together a few drop cap examples. They start with basic examples and move on to the use of CSS3 properties. The last example uses CSS3 gradients which, with the release of Firefox 3.6 (see Using Gradients), is a method that will become more used I’m sure. These are just a few examples; perhaps there are others you can think of?

Overall, the :first-letter pseudo-element is a neat way of adding drop caps and some typographical style to your website text. Why not try it yourself?

Related: The Daily Drop Cap provides another method for drop caps with some fantastic illustration images.