Bluehost: Web hosting from $3.95/month. Sign Up

How to create drop caps with CSS (and CSS3)

Posted on by Clive Walker in CSS Typography

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.

Comments

  • 03 Feb 2010 09:05:55

    This is another exciting property of CSS3 and one that I haven’t heard that much about previously. The effect is varied depending on the browser, but hopefully we’ll see more support for this in future browsers.

    I think the uses for this particular property may be quite scarce as it creates a very particular look and feel, but knowing what is possible means it can be incorporated into future designs.

    I look forward to reading more tutorials like this soon, as they are an invaluable resources to both designers when creating the look and feel of a website, and developers, saving them much programming and Photoshop work to create a relatively simple effect.

  • 17 Jan 2014 15:39:29

    Didn’t know about the existence of :first-letter. The Wordpress theme I used for a client was using shortcodes for this functionality, but after those also started to show up on the RSS Feeds and snippets I wanted to get rid of it. Thanks for sharing this knowledge with us (even if it’s three years later!).

Leave a comment

A simple question that helps prevent automated form fillers.

© 2016 Clive Walker