Skip to content

Add to your Home Screen

  1. Tap the Share button in Safari's toolbar.
  2. Scroll down and tap Add to Home Screen.
  3. Tap Add. The generator opens full-screen and works offline.

What Is a Drop Cap?

By Maya Chen, lettering designer and type educator 路 Checked by Jordan Hale 路 路 How we review content

A drop cap is a large capital letter at the start of a paragraph that sinks down into the text below it, typically across two to four lines, while the rest of the paragraph wraps around it. Open a novel or a magazine feature and you will often find one at the start of a chapter. It tells the reader where to begin and gives the page a focal point before the first sentence even starts.

Where drop caps came from

Large decorated first letters are older than printing. In medieval manuscripts, scribes left space at the start of a text and a specialist added a decorated initial, a large letter often painted in colour and gold leaf, sometimes filled with animals, plants or small scenes. Insular books such as the Book of Kells made the first letter a huge, intricate piece of art. When printing arrived, printers imitated these initials, first leaving gaps for hand painting, then using woodcut or metal ornamental letters. Modern drop caps are simplified descendants of that tradition.

Anatomy and alignment

A well made drop cap follows a few conventions.

Feature Guideline
Lines spanned Two to four; three is common
Top alignment Top of the cap aligns with the top of the first line鈥檚 ascenders or capitals
Bottom alignment Baseline of the cap sits on the baseline of the last line spanned
Gap to text Small, consistent, often about one word-space
Following text Often set in small caps for the first few words

Alignment is where hand-made drop caps often go wrong. If the cap is too tall, it pokes above the first line. If it is too short, it leaves an awkward stripe of white beneath. The cap height and baseline of the lines around it set the exact measurements, and the letter size must be calculated from them, not eyeballed.

Styles of initial

  • Plain drop cap: the same typeface as the text, enlarged. Simple and quiet.
  • Contrasting drop cap: a different typeface, such as a blackletter letter above a serif paragraph, or a script initial with swash flourishes.
  • Illuminated or decorated initial: the letter sits in a framed panel with ornament.
  • Raised cap: a large letter that stands on the first baseline and rises above, without wrapping.
  • Hanging initial: the letter sits entirely in the margin to the left of the text block.

Drop caps in lettering

A drop cap is a gift for hand letterers, because it is the one place where a single large letter can carry decoration. Ideas that work:

  1. Drop cap as a framed square: draw a box three lines tall, letter the initial inside it, and add a border or pattern.
  2. Letter with a story: for a recipe, a tiny pot or leaf winding through the initial; for a garden journal, a vine around the stem.
  3. Contrast with colour: one watercolour or marker colour for the initial, a dark pen for the text.
  4. Use calligraphy for a script initial: a flourished T or W in brush lettering above a quiet printed paragraph.

Measure the lines first. Draw three ruled lines for the body text, then plan the initial to cover exactly those three lines, so the paragraph wraps cleanly beside it.

Drop caps on the web

CSS has an initial-letter property for the first letter of a block, with parameters for how many lines it spans and how many it sinks. Support is not universal, so many sites use older tricks: a ::first-letter pseudo-element, a float to the left, a font size of three times the body text and adjusted line height. Whichever method you use, test it with different lengths of text and on small screens, where a four-line drop cap can swallow a short paragraph.

Drop caps and fancy text

Plain text cannot grow one letter larger than the next. In a bio or caption, people sometimes start with a decorative letter from the old English text generator or the cursive text generator for a similar effect. It does not change the size, so it is a flourish, not a real drop cap, and the letter may not display on every device.

Common confusions

  • Drop cap and initial are overlapping terms. Initial is the general word for a large first letter; a drop cap is an initial that drops into the text.
  • A drop cap is not an automatic capital. It replaces the first letter and should not be repeated in the text, which matters for screen readers.
  • Small caps after the drop cap are optional. They are a book-design convention, not part of the definition. See small caps for how they work.

Frequently asked questions

What is the difference between a drop cap and a raised cap?
A drop cap sits inside the paragraph, with its top aligned to the first line and its body sinking into the lines below, so text wraps around it. A raised cap, also called a stand-up or elevated initial, rests on the first baseline and rises above the line, with no text wrapped around it.
How many lines should a drop cap span?
Two to four lines is typical. Two is subtle, three is the common default, and four or more starts to look like a decorated initial. The top of the letter should align with the top of the first line's capitals or ascenders and the baseline of the cap with the baseline of the last line it spans.
How do you make a drop cap in CSS?
The modern property is initial-letter, which sets how many lines the letter spans and sinks, and works with the first-letter pseudo-element. Browser support has grown but is not universal, so many sites still use a float with a calculated font size and line height. Test on your target browsers.
Can I use a fancy Unicode letter as a drop cap?
In plain text you cannot make a letter larger, so a drop cap is not possible in a bio or caption. People sometimes put a fancy first letter like 饾暱 at the start of a line to imitate one. It is decorative only and may fail to display on some devices, so avoid it for anything important.