hero

Drop Caps

Drop Caps

What is it?

A typographic pattern that predates printing, drop caps - also known as initial capitals - are letters at the beginning of the first word of a chapter or paragraph that is larger than the rest of the text. They are both decorative and used to highlight the beginning of a new section; for instance, at the beginning of a chapter, or a new part of a long-form article.

Drop caps remain very common in print - including magazines - but are relatively rare on the web. This is likely due to the difficulty of reliably aligning the initial letter with the adjoining text according to typographic convention. The drop cap’s baseline, for instance, must align with the baseline of one of the its paragraph’s lines. But the exact position of the latter is a function of which font family the browser uses at runtime.

A typical CSS drop cap will look like this:

An unaligned CSS drop cap
A typical CSS drop cap created by floating the first letter.

For best results, the initial letter should be aligned with the adjoining text:

How a two-line drop cap aligns with its adjoining paragraph
The alignment of a two-line drop cap, as described by the CSS Inline Layout module.

When can I use it?

The initial-letter property is defined in the working draft of the CSS Inline Layout module. WebKit Nightly currently supports the feature.

For other browsers, dropcap.js exposes the same feature set as initial-letter.

Where can I learn more?