The craft of the drop cap

A drop cap is a single letter — the first letter of a paragraph — set larger than the rest of the text, floating at the top-left of the column. It's one of the oldest typographic ornaments in Western book design, inherited from illuminated manuscripts, and one of the small details that quietly tells a reader they're in the hands of a designer who cares.

It's also almost never used online, and when it is used, it's almost always done badly. I wanted to write a short essay about it — partly as a love letter, partly as a practical guide.

Why nobody uses them

The first reason is that the modern web forgot about them. The second reason is that CSS makes them slightly awkward to implement. The third reason is that designers moved on to geometric sans typography for fifteen years, and drop caps look strange at the top of a Helvetica paragraph. The fourth reason is that most articles online are optimized for scanning, not reading, and a drop cap is a design move that presupposes the reader is going to sit with your paragraph rather than skim it.

None of these reasons are good reasons. They're all excuses for not doing something worth doing. When you do see a drop cap online — in The New Yorker's longform pieces, in McSweeney's, in a serious personal site that has been thought about carefully — it immediately signals: someone decided this was worth the extra step. And the page feels warmer for it.

How to do one well

The single most important rule, and the one most often broken, is that the drop cap should align with the cap-height of the first line of body text. The top of the big letter sits on the same invisible line as the tops of the lowercase letters beside it. The bottom of the big letter sits on the same baseline as one of the lines further down (usually the third or fourth).

In CSS, this is what ::first-letter is for. Set a huge font size, float it left, add enough padding so the body text flows around it without touching, and pick a line-height that makes the alignment work. The exact numbers depend on your body text, but as a starting point: 4.8em font size, line-height of about 0.85, a little padding on the right and top.

Pick a serif.Drop caps are a serif tradition. A drop cap in a sans-serif font looks confused — it doesn't belong to any typographic history. The best drop caps use an italic serif, which adds one more level of visual contrast against the upright body text.

Use color sparingly.The classic drop cap is either black or a single accent color. Don't get creative. Don't use a gradient. Don't try to animate it. One color, the same one you use for the rest of your accents, makes the drop cap feel like a small resolved chord inside the design.

Only on the first paragraph.One drop cap per section, at the top. Never every paragraph — that way lies medieval manuscripts and, honestly, they mostly didn't overdo it either.

The signal it sends

When you put a drop cap at the top of an article, you're telling the reader something specific: this piece is meant to be read, not scanned. The drop cap is an invitation to slow down. It says: I spent time on this, and I would like you to spend time on it too.

Most web pages, sensibly, are optimized for scanning. People hit them for 20 seconds and leave. But some pages want the opposite — an essay, a manifesto, a long-form article, a landing page with a real idea behind it. For those, the drop cap is a tiny commitment to the reader, and readers notice tiny commitments.

One detail, correctly done

I think the reason I love drop caps is that they represent a whole theory of design in miniature. They're expensive to get right. They require you to think about the specific letter, its specific shape, its relationship to the text around it, its color, its size. You can't just add one — you have to place it.

That's the whole argument for caring about any typographic detail online, really. One detail correctly done is worth more than ten details done carelessly. It tells the reader: the person who made this website sat with it until the small parts were right. Everything else you read on the page is colored by that small opening gesture.

Put a drop cap on your next essay. Use a serif. Use your accent color. Only at the top. Let it do its quiet work.