clock menu more-arrow no yes mobile
A letter S sits on the springboard of a swimming pool, waiting to join the lines of text that are already in the water Courtney Leonard

Drop caps & design systems

A story about making things 1% better.

Let’s get this out of the way up front: this is the most you’re probably ever going to read about drop caps.

—what are “drop caps,” you ask? Well.

A brief history of drop caps

Drop caps are a specific kind of initial letter, large letters that appear at the beginning of a block of text. Occasionally referred to as “drop initials” or “sunken initials,” drop caps might be intricately illustrated, or just set slightly larger than the rest of the text, but they’re always “dropped” over the side, with rest of the text flowing around them.

Detail of a page from the Gutenberg Bible, showing a large illustrated letter “E” styled next to the main text
“Drop caps” are a very old design technique—one we’ve used for hundreds and hundreds of years.
Photo by JMWK, on Flickr.

A drop cap is often used to signify that the reader’s moved into a significant new section, or that a new chapter’s begun. Drop caps are also incredibly old, appearing throughout the history of the printed page: in illuminated monastic manuscripts, in renaissance cookbooks, and even in more contemporary texts.

On the web, we use drop caps for similar reasons: both as a design accent, and as a visual cue to draw the reader’s eye toward an important piece of text. In the web’s early days, designers like Jason Santa Maria and Jessica Hische helped popularize the technique; more recently, Jason Pamental and Jen Simmons have showed us more modern techniques for bringing drop caps to the web.

The fault in our drop caps

Shortly after I started working at Vox Product, I was assigned a bug report regarding the drop caps in our websites. Here’s a version of the screenshots that were attached to that bug report, each showing the same text in a different browser:

Three pictures showing the same paragraph of text in Firefox, Chrome, and Safari. The first letter of the paragraph is visually much larger and offset to the left. In Firefox, the letter is aligned correctly; in Chrome and Safari, the letter is too low
The same drop cap, in three different browsers: Firefox, Chrome, and Safari. Can you spot the issue?

Now, it’s possible you’ve already spotted the bug. But let me put borders around the letters; that should really highlight what’s happening.

Three pictures showing the same paragraph of text in Firefox, Chrome, and Safari. A red border has been added to the first letter, showing that in Chrome and Safari, the initial letter M is lower
Let’s add some borders to these drop caps, which highlights the alignment issue a bit better.

Here’s the problem in a nutshell—and it’s technically two problems. First and foremost, the alignment of these drop caps isn’t consistent across these three browsers. In Firefox, we have a nice, tight box around the shape of our letter, which is the effect we’d really like to achieve. But unfortunately, Firefox is the outlier; while Chrome and Safari are sized consistently, their boxes are much, much taller than we’d like. And that’s the second bug.

So what’s happening here? Let’s peek at the code we were using to generate our drop caps:

<p>
  Matthew watched the storm, so…
</p>

…

p:first-letter {
  font-family: “Playfair Display”, serif;
  font-size: 5.5rem;
  float: left;
  line-height: 1;
  margin-right: 0.05em;
}

The colors and fonts will vary across each of our Chorus-powered sites, but the mechanics are the same. In our CSS, we used the :first-letter pseudo-element to select, well, the first letter of certain paragraphs, and then we’d style it—usually by applying a distinctive typeface, making it visually prominent, and floating it to the left.

As it happens, this is a very common pattern for creating drop caps on the web. But what happens if we change our approach a little bit?

<p>
  <span class="dropcap">M</span>atthew watched the storm…
</p>

…

.dropcap {
  font-family: "Playfair Display", serif;
  font-size: 5.5rem;
  float: left;
  line-height: 1;
  margin-right: 0.05em;
}
</code></pre>

Here, we’ve added a little more HTML to our paragraph—specifically, a span element that surrounds the letter (or letters) we’d like to style—and then we’re styling that new markup.

For the coders out there who feel this is a little more ungainly, I’ll agree with you! But let’s put all that aside for a second: what’s our design doing now?

Three pictures showing the same paragraph of text in Firefox, Chrome, and Safari. A red border has been added to the first letter, and the heights of all three letters are finally consistent
Simply by changing our approach to using a little extra HTML, we now have consistently-sized drop caps.

Hey, would you look at that! We now have consistent heights across all three browsers, all by introducing that little bit of markup.

However, we still have to deal with our second issue: while the box heights are consistent, they’re all consistently too tall. We’ve got some ungainly heights above and below each letter. Can we close up those spaces, and make the drop cap a little more attractive?

It wasn’t until I found a blog post by Vincent De Oliveira that I figured out how to adjust this issue. Vincent showed me that every glyph in a font—every letter, every number, every punctuation mark—is drawn on something called an “em square,” a box that acts as a coordinate plane upon which each character’s drawn. And this is the cause of the second issue: the em square defines the space that’s being reserved for our drop caps, and that’s what’s making them appear a little too tall.

In a typeface, an em square is the entire height of a glyph. There is space reserved at the top and bottom of the square for a glyph’s ascenders or descenders
Understanding the nature of the “em square” can help us better align our drop caps.

Each em square has space reserved at the top and the bottom for a letter’s ascenders and descenders. Here’s the thing, though: we don’t actually need that space for our drop caps. In fact, we want to remove those spaces from the bounding box, leaving just enough room for our letters. And since we’ve added that extra bit of markup around our drop cap, we can do exactly that with some extra CSS.

.dropcap:before,
.dropcap:after {
  content: "";
  display: block;
}
.dropcap:before {
  margin-bottom: -0.175em;
}
.dropcap:after {
  margin-top: -0.05em;
}

This code looks a little involved, I know. (In the very near future, tools like :initial-letter will make this work much easier, and much, much more precise.) But we’re doing just two things in this CSS. First, we’re selecting the empty space :before and :after the content inside our drop cap. Once we’ve done that, we’re using negative margins to pull the letter closer to the outer edges of the box. This effectively erases the extra spaces, and finally gives us what we wanted: consistently sized and positioned drop caps, in any browser you care to use.