Drop Cap Generator
Drop cap
Preview
Drop caps are the typographic equivalent of a heavy door: they hold a paragraph open and invite the reader in. The size of the letter is measured in lines of body text, and the surrounding lines must indent far enough to clear it.
Drop caps fail in three ways worth checking here: a float whose cap-height does not land on a line boundary; a first line short enough to wrap *under* the cap; and a translucent colour that reads darker where it overlaps the indent.
.drop-cap::first-letter {
font-family: 'Playfair Display', serif;
font-weight: 600;
color: #111111;
initial-letter: 3;
margin-right: 0.06em;
}You Might Also Need
The drop cap generator writes the first-letter rule for an opening paragraph from the number of lines the cap should span. It offers the modern initial-letter property and the float plus font-size construction that production stylesheets still carry, and it reports the computed cap size, the indent the following lines need and how many line boxes the cap clears.
What is Drop Cap Generator?
The drop cap generator starts from a paragraph and a line count. You choose the cap face from the preview catalogue with the monospace families filtered out, set how many lines the letter should span, the body size, the body line height and the cap colour, and select a technique. The panel then reports the sink in lines, the float method's cap size in pixels and em, the indent needed to clear it and the number of line boxes it occupies, while the preview draws the paragraph with the calculated cap in place.
- Lines spanned from 2 to 5, defaulting to 3.
- Body size from 12px to 24px, defaulting to 16px, and body line height from 1.2 to 2.2, defaulting to 1.6.
- Cap face from the shared catalogue, excluding the monospace families.
- Techniques: initial-letter (modern) and float + font-size (portable).
- A cap colour input, defaulting to a near-black ink.
- Readouts: the sink in lines, the cap font size in pixels and em, the indent needed and the cleared line boxes.
- The generated rule differs by technique: one initial-letter declaration, or a float with a computed font size, line height and top margin.
The float construction is computed from an assumption rather than read from the font binary: the cap height is taken as 0.7em, so the cap font size is the spanned line boxes divided by 0.7, and the cap's rendered height is that size multiplied back by 0.7. The rule then sets line-height to the line box divided by the cap size and a negative top margin equal to the overhang divided by the cap size, which is what pulls the glyph up so its top lands on the intended line boundary. The indent figure multiplies the cap size by three quarters, a working clearance rather than a measured sidebearing. The initial-letter branch is far smaller: one property whose value is the number of lines, plus a small right margin.
- Cap height is assumed at 0.7em, so a face with unusually tall or short capitals needs the value checked by eye.
- The preview always draws the float construction, even when initial-letter is the selected technique, so engine differences appear only in the stylesheet.
- initial-letter support varies by engine, and the float branch is the one that renders everywhere.
- The preview strips the paragraph's first character for the cap, so an opening quotation mark becomes the cap instead of a letter.
- Body size and line height are the only typographic context offered; leading and measure are fixed by the page.
Use it for a chapter opening, a long-form lede or a magazine feature where the first letter has to hold the paragraph open. Export both branches and keep the float version as the fallback, then check the three failures the preview is there to catch: a cap whose height does not land on a line boundary, a first line short enough to wrap under the cap, and a translucent colour that reads darker where the cap overlaps the indent. The related opening treatment without the sink is handled by the initial cap styler, and the chapter furniture around it belongs to the chapter header designer.
How to use Drop Cap Generator
- Choose the cap face and the number of lines the letter should span.
- Set the body size and the body line height, then pick the initial-letter or the float technique.
- Adjust the cap colour and paste the paragraph the opening belongs to.
- Copy the generated first-letter rule and keep the float branch as a fallback for engines without initial-letter support.
When to use Drop Cap Generator vs related tools
Keep it for the moments when a document genuinely opens: a chapter, a feature lede, a section that has to announce itself. The float construction is the safer default on the web because it does not depend on initial-letter support, and the initial-letter branch is the shorter rule for projects that can rely on it. The lighter opening treatments, a raised cap or small caps, are what the initial cap styler compares, and the designed quotation case is the pull quote designer. When the drop cap sits inside a printed page, the chapter header designer carries the surrounding furniture.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.