Creating Drop Caps Using CSS

Large capital letters spanning multiple lines of type at the beginning of paragraphs are known as ‘drop caps’, ‘dropped initials’, or sometimes ‘uncials’. Creating basic drop caps using Cascading Stylesheets (CSS) is easy, but ensuring good typography requires care.

The typography of drop caps

Drop caps should have four key features:

• The drop cap should share a baseline with the final line of text beside which it sits
• The top of the drop cap should align with the top of characters in the first line of text beside which it sits
• All but the first line of text beside the drop cap should have additional indentation
• The serifs (if any) of the drop cap should fall to the left of the text so that the vertical stroke of the drop cap (if it has one) aligns vertically with the text of the paragraph that follows.

The diagram below uses gridlines to highlight these key features:

The problem with CSS pseudo-elements

The ‘:first-letter’ and ‘:first-line’ pseudo-elements defined in the CSS specification seem ideally suited to drop caps. The specification states that:

The :first-letter pseudo-element may be used for “initial caps” and “drop caps”, which are common typographical effects. This type of initial letter is similar to an inline-level element if its ‘float’ property is ‘none’, otherwise it is similar to a floated element.

These are the properties that apply to :first-letter pseudo-elements: font properties, color properties, background properties, ‘text-decoration’, ‘vertical-align’ (only if ‘float’ is ‘none’), ‘text-transform’, ‘line-height’, margin properties, padding properties, border properties, ‘float’, ‘text-shadow’, and ‘clear’.

Unfortunately major browsers do not render floated initial letters in the same way as normal floated elements, and the omission of the ‘height’ property from the list of applicable properties prevents web authors from fixing the problems. Instead a different approach must be used.

Using spans for drop caps

By adding additional span elements to the HTML representing a paragraph, web authors gain additional control of the display of the drop cap. The CSS shown later in this article applies to the following HTML:

<p>
  <span class="firstLetter"><span>D</span></span><span>rop
  caps can be added to web pages through the use of CSS
  (Cascading Stylesheets) – but ensuring a tidy appearance
  requires care.</span>
</p>

Due to the poor layout engines of major web browsers, styling the drop caps requires style rules specific to individual typefaces. Using ‘font family stacks’ — as described in The Myth Of ‘Web-Safe’ Fonts — can help. The following CSS works with the Times and Times New Roman typefaces — almost all computers have one of these typefaces installed — and was used to create the image shown earlier in this article.

p{
  text-align   : justify;
  line-height  : 1.5em;
}

.firstLetter{
  display      : block;
  float        : left;
  margin-top   : -0.63em; /* use -0.205em for two lines */
  margin-left  : -0.56em;
  margin-right : 0.5em;
  height       : 4.5em;
}

.firstLetter span{
  font-size    : 5.6em;   /* use 3.33em for two lines */
  line-height  : 1.0em;
}

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

When displayed in the current versions of the Firefox, Internet Explorer, Opera, Safari, and Konqueror web browsers, the drop caps created using this code have the four key features outlined earlier in this article. Note that the final CSS rule, which reduces the indentation of the first line after the drop cap, does not work in versions of Internet Explorer prior to Internet Explorer 7. If support for earlier versions of Internet Explorer is important, the web author can apply a class to the span element surrounding the paragraph content, and then apply the same style rule to elements matching that class.