A drop cap sets the first letter of a paragraph as a large decorative initial that the surrounding text wraps around. It belongs on the opening paragraph of a long read and nowhere else — it is a signal that an article is worth settling into, and it stops meaning that if every paragraph has one.
Usage
Add to a <p>, or use the data-drop-cap attribute — they are one selector list, so the two are literally the same rule.
| Property | Value | Why |
|---|---|---|
font-family |
The serif slot, so the initial reads as editorial rather than as a heading | |
font-size |
3.2rem |
Roughly three lines of body copy, which is what the float needs to sit beside |
line-height |
0.94 |
Pulls the cap tight to its own box so it aligns with the first line of text |
text-transform |
uppercase |
A lowercase initial has no cap height to align to |
padding-right |
8px of air between the letter and the text wrapping round it | |
float |
left |
What makes the text wrap at all |
A clearfix ships with it — ::after with clear: both — so the float cannot escape the paragraph.
Black women are the backbone of our communities' health. They care, research, plan and protect, and they carry that work for families far beyond their own. Understanding how that load affects heart health, blood pressure and sleep is where a great deal of the most useful research of the last decade has gone, and it is changing what good care looks like.
<p class="drop-cap">Black women are the backbone…</p>
<p data-drop-cap>The same rule, as an attribute.</p>
Rules
- Only on a paragraph long enough to wrap. The letter needs about three full lines beside it. On a shorter paragraph the clearfix holds the float in, so nothing below breaks — instead the paragraph box grows taller than its own text and leaves a band of dead space.
- Only on a
<p>. A heading or a list item has no wrapping text for the initial to sit inside. - Once per article, at the top. A second drop cap further down reads as the start of a new piece.
- Never inside a narrow container. In a card or a sidebar there is no room for text to wrap, so the initial takes the whole measure.