A drop cap is one of those typographic details that looks like it should need a plugin or a custom font trick. It does not. The CSS initial-letter property handles the whole thing in a single declaration, and the result is solid across all modern browsers.
The basic syntax
p:first-of-type::first-letter {
initial-letter: 3;
}The number is how many lines the cap spans. The browser calculates the font size, baseline alignment, and the line-height adjustment for the surrounding text automatically. There is nothing else to set for the basic case.
Adding some weight
A drop cap at the same weight as body text blends in and loses the point. Bumping it to a heavier weight, or switching to a serif when the rest of the text is sans, gives it enough visual mass to read as an intentional editorial choice rather than a formatting accident.
p:first-of-type::first-letter {
initial-letter: 3;
font-weight: 700;
line-height: 1;
}One thing to watch
initial-letter targets ::first-letter, which means if your opening paragraph starts with a quotation mark, the quote character becomes the drop cap instead of the first letter of the word. Worth scoping this to a .lead class on the opening paragraph rather than applying it globally, so it is easy to opt out on individual posts where the effect does not work.
The implementation here uses exactly that pattern: a class on the first paragraph that opts in to the drop cap, leaving everything else untouched.
