What Is a Drop Cap?

A drop cap is one of the oldest flourishes in typography and still one of the most charming. You see it at the opening of a novel’s chapter or the first paragraph of a magazine feature: a single oversized letter sinking into the text, inviting you in. This guide explains what a drop cap is, where it came from, when to use one, and how to build a solid one with CSS.

What a drop cap is

A drop cap is an initial capital letter set much larger than the surrounding text so that it occupies the vertical space of several lines. Its top usually aligns with the top of the first line, and it “drops” down two, three, or more lines deep. The remaining lines of the paragraph wrap neatly around it. Because it is both large and positioned at the very start of the text, it acts as a visual entry point.

Drop caps are one member of a broader family of decorative initials. A related style is the raised cap (or stick-up initial), where the large letter sits on the same baseline as the first line but rises above it rather than dropping down. Both draw the eye to the beginning of a passage.

A short history

Enlarged initials predate printing. In medieval illuminated manuscripts, scribes hand-drew ornate initial letters, sometimes called versals, to mark where a new section began. These ranged from simple letters inked in red to elaborate “historiated” initials that contained small illustrated scenes, often decorated with gold. They served a practical purpose too, helping readers navigate texts that lacked the spacing and punctuation we take for granted today.

When printing arrived in the West, the tradition carried over. Early printers such as Gutenberg left blank space in the printed page so a scribe could add a decorative initial by hand afterward. Over time, printed initials became part of the type itself. The drop cap we use today is a direct descendant of that centuries-old practice of marking a beginning with a grand letter.

Why and when to use a drop cap

Drop caps do two jobs: they add visual interest and they signal structure. A well-placed drop cap tells the reader “this is where it begins.” Used sparingly, they lend an editorial, crafted feel. They also slow the reader down for a beat at exactly the right moment, creating a small sense of ceremony before the text proper gets underway, which is why they feel at home in books, long-form journalism, and invitations.

Guidelines for using them well:

• Use them sparingly. Traditionally a drop cap appears once per chapter in a book, or once at the top of an article. Scattering them through a page dilutes their effect.
• Mind the first word. Make sure the enlarged letter reads naturally with the rest of the opening word. Some designers set the first few words in small caps to ease the transition from the giant letter to body text.
• Watch alignment. The drop cap should align cleanly with the top line and sit flush with the left margin, and the wrapping text should not crash into it.
• Consider the letter’s shape. Letters like “A,” “W,” or “J” can create awkward gaps or overhangs and may need manual spacing adjustments.

How to make a drop cap with CSS

The cleanest web technique uses the ::first-letter pseudo-element, which targets the first letter of a block without any extra markup. Floating it left and enlarging it produces a classic drop cap:

p.intro::first-letter {
  float: left;
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 700;
  padding-right: 0.08em;
  margin-top: 0.05em;
}

Here the font size roughly determines how many lines the cap spans, and float: left makes the following text wrap around it. Adjusting line-height, padding, and margin fine-tunes the alignment so the top of the letter meets the top of the first line and the baseline rests on a lower line.

There is also an experimental CSS property, initial-letter, designed specifically for this. It lets you specify how many lines the letter should drop:

p.intro::first-letter {
  -webkit-initial-letter: 3;   /* Safari */
  initial-letter: 3;           /* drop across 3 lines */
}

Browser support for initial-letter has historically been uneven, so test it and keep the float method as a reliable fallback.

Common pitfalls

• Overlap. If the leading is tight, the drop cap can collide with wrapping text. Add padding around the letter.
• Baseline misalignment. The float method does not snap the cap to a baseline automatically, so you may need to nudge it with margins.
• Punctuation first. If a paragraph opens with a quotation mark, ::first-letter may enlarge the quote too, which usually looks wrong. You may need to restructure the opening or adjust manually.

Frequently asked questions

What is the difference between a drop cap and a raised cap?

A drop cap drops down into the paragraph, spanning several lines with text wrapping around it. A raised cap sits on the first line’s baseline and rises above the text instead of dropping into it. Both are enlarged initial letters.

Where did drop caps come from?

They descend from the decorative initials of medieval illuminated manuscripts, where scribes drew ornate letters to mark the start of a section. The tradition continued into early printing and survives today in books and on the web.

How do I make a drop cap in CSS?

The most reliable method is the ::first-letter pseudo-element with float: left and a large font size, which makes the text wrap around the enlarged letter. The newer initial-letter property is purpose-built but has less consistent browser support.

How many lines should a drop cap drop?

Two to four lines is typical. Three is a common, balanced choice. The right depth depends on your type size and line length; test it to be sure the letter aligns cleanly with the top and a lower baseline.

Should I use more than one drop cap per page?

Usually not. Drop caps are most effective when they mark a clear beginning, such as the start of a chapter or article. Using several on one page weakens the effect and can clutter the layout.