initial‑letter CSS Playground - Online Drop Caps

initial-letter is a CSS property that automatically creates drop caps — large initial letters that span multiple lines of text. It takes one or two values: initial-letter: <size> or initial-letter: <size> <sink>. The size defines how many lines the letter occupies, and the optional sink offsets the letter downward by that many lines. Unlike traditional float-based drop caps, initial-letter handles sizing and alignment automatically.

As of 2024, Safari 9+ (with -webkit- prefix) and Chrome 110+ (unprefixed) support initial-letter. Firefox does not yet support it. For cross-browser compatibility, consider providing a float-based fallback inside a @supports block. This tool generates both the standard initial-letter code and a legacy fallback for reference.

The traditional method uses float: left with manually adjusted font-size, line-height, and margin to approximate a drop cap. With initial-letter, you simply declare how many lines the letter should span — the browser calculates the exact font size and alignment automatically. This means cleaner code, better alignment, and consistent results across different font families and sizes.

The sink value (the optional second parameter) shifts the drop cap downward by a specified number of lines. For example, initial-letter: 4 2 means the letter spans 4 lines total but starts from line 3 (sinking 2 lines). This is useful when you want the drop cap to appear lower within the paragraph, creating a more dramatic or stylized effect. The sink value must be less than the size value.

Yes! In fact, ::first-letter is the most common and recommended way to apply initial-letter. You target the first letter of a block element: p::first-letter { initial-letter: 3; }. This keeps your markup clean and semantic. You can combine it with other ::first-letter properties like color, font-weight, and background for rich styling.

initial-letter-wrap is a related CSS property that controls how surrounding text wraps around the drop cap. Values include none (text doesn't wrap), first (only the first line wraps), all (all lines wrap), and grid (text aligns to a grid). Browser support for this property is still limited, but it's worth exploring for advanced typographic control.

Use CSS feature detection with @supports: write your initial-letter styles inside @supports (initial-letter: 3) { ... }, and provide a traditional float-based fallback outside that block. Example:
p::first-letter { float: left; font-size: 4em; line-height: 0.8; }
@supports (initial-letter: 3) { p::first-letter { float: none; initial-letter: 3; font-size: inherit; } }