Creating drop caps using CSS

Large letters spanning multiple lines at the beginning of paragraphs, as shown here, are known as drop caps or dropped initials. Dropped initials were commonly used in medieval manuscripts, with highly decorative forms — such as inhabited initials, which contain human or animal figures — found in illuminated manuscripts. Drop caps can be created easily using CSS, but ensuring good typography requires care.

The typography of drop caps

A correctly formatted drop cap has four key features:

• The drop cap should share a baseline with the last line beside it
• The top of the drop cap should align with the tops of capital letters on the first line beside it
• If the drop cap has serifs, they should fall outside the left margin; if the drop cap has a vertical stroke on the left side it should be aligned with the margin
• Unless the drop cap is a single-letter word such as A or I, the first line of text beside it should have less indentation than the other lines, in order to indicate the continuation of the word

In the HTML

The CSS :first-letter pseudo-element seems ideally suited to creating drop caps, but inconsistencies in how web browsers apply margins to the pseudo-element render it useless. Instead we need to place the first character within a span element with a class — this page uses firstLetter — and the rest of the paragraph within a second span element:

1
2
3

<p>
  <span class="firstLetter">E</span><span>xample text</span>
</p>

In the stylesheet

The following style rules create a drop cap, two lines high, in a paragraph displayed in Times New Roman.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

p{
  font-family : 'Times New Roman',Times,serif;
  line-height : 1.5;
}

.firstLetter{
  float       : left;
  font-size   : 3.26em;
  line-height : 0.5;
  margin      : 0.205em 0.153em 0 0;
}

.firstLetter + span{
  margin-left : -0.5em;
}

Lines 1 to 4 set the typeface and line height for the paragraph. Lines 6 to 11 style the drop cap itself, floating it to the left so that text flows around it, increasing its size, reducing its line height to avoid affecting the lines below it, and setting its margins to align it correctly. Lines 13 to 15 style text following the drop cap, reducing the indentation of the first line.

For drop caps with serifs, a negative left margin should be set on the character to ensure the serifs fall outside the left margin of the paragraph; the value used depends on the specific character.

Values for common typefaces

The font size and margins used on lines 8 and 10 of the code above vary for different typefaces. The following table provides values for two heights of drop cap for each of four common typefaces.

Where now?

• Home
• PHP
• JavaScript
• HTML and CSS
• Articles
• Follow me on twitter