Two ways to make a drop cap
The CSS initial-letter property is the proper modern way. It sets a number of lines the first letter spans and the browser handles the rest: the descender alignment, the surrounding text wrap, the font-size math. Set initial-letter: 3 on the ::first-letter pseudo-element and the letter takes up the first three lines. Safari shipped support in 2016 and Chrome added it behind a flag in 2024 with full support promised for 2026.
The universal fallback uses ::first-letter with manual font-size, float, line-height, and margin values. The math is more fiddly but the result works in every browser since 2009. The Generator outputs both: an initial-letter declaration for browsers that support it, and a fallback block wrapped in @supports not (initial-letter: 1) for the rest. The same drop cap renders correctly everywhere.
Design choices that matter
A drop cap is a strong visual signal so it pays to think about what flavor it should be. Editorial publications often use a serif drop cap inside a sans-serif body, leaning on contrast for elegance. Tech publications go the other way. Brand-led sites sometimes use a colored or gradient drop cap to lead the eye into the article.
Number of lines spanned is the second decision. Two lines is conservative and works well at body sizes around 16 to 18 pixels. Three lines is the editorial classic, used by the New Yorker and the New York Times. Four or more lines feels heroic and works best at larger body sizes and wider columns.
Common Use Cases
Long-form journalism sites use drop caps to mark the start of an article and to slow the reader down at the right moment. Magazine-style portfolios use them to give every project page a unified opening rhythm. Blog templates ship them as an opt-in style so authors can decide per post whether to include one.
Email newsletters do not generally support initial-letter or ::first-letter (most email clients strip pseudo-elements), so drop caps in email require a separate float-image approach. The Generator notes that limitation in the output and lets you produce an inline-styled HTML version for email use.
How We Compare
Hand-rolling a drop cap means picking a font-size that aligns the bottom of the letter with the third line, a margin-right that breathes without overflowing, and a line-height that does not skew the surrounding paragraph. The Generator nails all three by computing them from the line-height and font-size you already use.
Compared to a Sass mixin from a starter kit, the Generator gives you a live preview against your real text, so you can sanity-check the alignment before pasting. Several edge cases (J and Q with descenders, italic versus roman, leading punctuation) are handled by the Generator automatically with rules you can toggle on or off.
Frequently Asked Questions
What is the difference between initial-letter and ::first-letter?
::first-letter is a CSS pseudo-element that selects the first letter of a block. It has been around since 2009 and works everywhere. initial-letter is a CSS property that sits inside the ::first-letter rule and tells the browser to make that letter span multiple lines with proper descender alignment. initial-letter is shorter, cleaner, and produces better baseline alignment, but it is newer (Safari since 2016, Chrome since 2024).
Will the drop cap work in email clients?
Mostly no. Email clients aggressively strip CSS, including pseudo-elements like ::first-letter. The reliable email approach is to wrap the first letter in a span at HTML-authoring time and apply inline styles to that span. The Generator can output this format as an alternative for email use, with float and inline font-size.
How does initial-letter handle letters with descenders?
The CSS spec says the browser aligns the cap-height of the letter to the top of the specified line span, and any descender (the tail of J or Q) drops below the last spanned line. This is correct typographic behavior. The fallback rendering using manual ::first-letter does not handle descenders as gracefully, which is why initial-letter is the better choice when available.
Can I drop-cap punctuation?
Technically yes, and it produces unusual results. ::first-letter selects the first typographic letter unit, which includes any leading punctuation. An opening quote that starts a paragraph gets drop-capped along with the next letter. To avoid this, wrap the first word in a span and apply your drop cap to the span first-letter instead of the paragraph first-letter.
How big should a drop cap be?
Calibrate from your body line-height. A 3-line drop cap with a 24-pixel line-height should be 72 pixels tall plus the cap-height adjustment, which varies by font but is usually around 70 to 90 percent of the line span. The Generator does the math and outputs the right font-size for any line count, any body font-size, and any font ex-height.
Should I use a different font for the drop cap?
Often, yes. The Drop Cap can have its own font-family inside the ::first-letter rule. The most editorial pairing is a body sans-serif with a serif drop cap (or vice versa). The Generator includes a font picker for the drop cap that pulls from Google Fonts so you can preview different combinations live.
What about RTL languages like Arabic?
::first-letter in an RTL block selects the visually rightmost letter, which is the start of the word. initial-letter behaves the same way. Both work correctly in Arabic and Hebrew. The Generator detects the language attribute or direction property on your target element and previews in the right direction.
Does this affect SEO or readability?
No negative impact. The drop cap is purely visual styling. Search engines crawl the underlying paragraph text normally. Screen readers announce the first letter as part of the word, not as a separate emphasized character. Some research suggests drop caps slow first-line reading speed by a fraction of a second, which is the intended effect on long-form content where you want the reader to settle in.