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:

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.

font-size margin
Times New Roman/Times, two lines 3.26em 0.205em 0.153em 0 0
Times New Roman/Times, three lines 5.53em 0.151em 0.0904em 0 0
Georgia, two lines 3.15em 0.225em 0.159em 0 0
Georgia, three lines 5.32em 0.172em 0.0940em 0 0
Arial/Helvetica, two lines 3.11em 0.240em 0.161em 0 0
Arial/Helvetica, three lines 5.20em 0.192em 0.0962em 0 0
Verdana, two lines 3.06em 0.218em 0.163em 0 0
Verdana, three lines 5.12em 0.162em 0.0977em 0 0

Where now?

Found this useful? Share it:

Also in HTML and CSS: