initial-letter: Building Classic Drop Caps Without Float Hacks

1. The classic problem: rebuilding drop caps with float

Before initial-letter existed, the only way to build an enlarged initial letter was to wrap the first character in its own span, pull it out of normal text flow with float: left, and manually increase font-size until the initial visually spanned roughly three to four lines. The result was never truly precise, because float has no relationship to the actual line count.

On top of that, the line height of the wrapped text had to be manually matched to the initial's height so the letter would not overshoot the last wrapped line or end too early. Whenever the font or the paragraph's base font size changed later, this finely tuned calculation regularly broke, and the entire initial had to be re-measured by hand.

2. The syntax of initial-letter: size and sink lines

The initial-letter property accepts one or two numeric values. The first value defines how many line heights the initial spans vertically, for example initial-letter: 3 for an initial spanning three lines. An optional second value defines how many lines the initial sinks into, meaning how many wrapped lines are actually indented by the letter.

If the second value is missing, the browser automatically uses the same value as the first, so size and sink count match by default. A differing second value is useful when a visually very large initial is wanted that should only displace text across two lines, for example for decorative swash letters with a lot of whitespace at the top.

p.lead::first-letter {
  initial-letter: 3; /* size 3 lines, sink defaults to 3 */
  font-weight: 700;
}

p.lead-large::first-letter {
  initial-letter: 4 3; /* visually 4 lines tall, only displaces 3 lines of text */
  font-weight: 700;
}

3. initial-letter-align: fine-tuning the alignment

By default, the browser aligns an initial so that it ends flush with the baseline of the last wrapped line. The initial-letter-align property allows finer control over that alignment, for example the value alphabetic for classic baseline alignment or cap-height when the top of the initial should align exactly with the cap height of the first wrapped line.

This fine-tuning is especially noticeable with serif typefaces, because the curves of letters like O or Q need to visually overshoot the baseline slightly so they do not appear to float. Without this control, designers previously had to recreate such optical corrections by hand with additional transform-based offsets.

4. Controlling line count: multi-line initials in responsive layouts

In responsive layouts, a paragraph's line-height often changes between mobile and desktop, for example because a tighter line spacing is desired on smaller screens. A major advantage of initial-letter over the float technique shows up exactly here: the initial recalculates its actual font size on every reflow based on the currently applicable line height, so it always spans exactly the specified number of lines, whether the paragraph currently measures two or three line heights.

The optional second value of initial-letter also decouples the visual size from the actual line displacement. A value like initial-letter: 5 3 produces a visually very dominant initial that only indents three lines of text, useful for decorative display typefaces with a lot of internal whitespace at the top of the character. If no second value is given, the browser automatically uses the same value for size and sink, which remains the simpler and more robust choice for most editorial use cases.

5. Basic example: an initial spanning three lines

In the simplest case, initial-letter is applied to the ::first-letter pseudo-element of an article's first paragraph. The browser then automatically calculates how much the initial needs to be enlarged so it spans exactly three line heights of the surrounding text, with no manual font-size calculation needed.

It matters that ::first-letter only captures the very first character of a block element, even if that character is wrapped in other inline elements like a span. With multi-language content that opens with a quotation mark, this can lead to unexpected results, so testing with the actual content is always worthwhile.

article > p:first-of-type::first-letter {
  initial-letter: 3;
  font-weight: 800;
  color: #4a1d96;
  padding-inline-end: 0.35rem;
  font-family: "Georgia", serif;
}

6. Combining styling: color, typeface and shadow

Since ::first-letter is a normal pseudo-element, all the usual typography and effect properties apply to it: a different typeface for a deliberate contrast against the body text, an accent color from the brand palette, or a subtle text-shadow for extra visual depth. Combined with initial-letter, this produces a fully editorial initial without embedding an extra image or SVG.

A common stylistic choice is using a completely different display typeface for the initial than for the rest of the body text, for example a decorative serif in an otherwise sans-serif article. Such contrasts work well as long as the initial clearly reads as a deliberate design element and not as a mistake in font selection.

article > p:first-of-type::first-letter {
  initial-letter: 3;
  font-family: "Playfair Display", serif;
  font-weight: 900;
  color: #6d28d9;
  text-shadow: 2px 2px 0 rgba(109, 40, 217, 0.15);
  padding-inline-end: 0.4rem;
  line-height: 1;
}

7. Use cases: blog articles, magazine layouts and email newsletters

Drop caps work best for editorial content with long flowing text paragraphs, such as blog articles, digital magazines, or detailed newsletter issues where a visual emphasis at the start is desired. For short UI text, form hints, or product descriptions in an online shop, the technique rarely fits, since it tends to read as a style break rather than deliberate design there.

In multi-column magazine layouts, the initial also clearly marks the start of a new article or section, improving orientation for readers scanning a page instead of reading linearly. This orientation function was historically one of the main reasons initials appeared in print design in the first place, long before CSS existed.

8. Fallback for browsers without initial-letter support

If support for initial-letter is missing, the browser ignores the property and the first letter renders at normal size, with no error. Anyone wanting the design effect across as many browsers as possible can provide the classic float technique as a fallback and activate it selectively via @supports not only when initial-letter is unavailable.

This dual safeguard means a bit more CSS code, but guarantees the initial stays visible in practically every browser, only with slightly different alignment precision. For most projects, though, accepting the native fallback without an initial is perfectly fine, as long as the effect is purely decorative and carries no information.

/* Fallback first: classic float technique */
@supports not (initial-letter: 3) {
  article > p:first-of-type::first-letter {
    float: left;
    font-size: 3.2em;
    line-height: 0.85;
    padding-right: 0.4rem;
    font-weight: 800;
  }
}

/* Modern solution where available */
@supports (initial-letter: 3) {
  article > p:first-of-type::first-letter {
    initial-letter: 3;
    font-weight: 800;
  }
}

9. initial-letter compared to the classic float technique

The decisive difference between the two techniques lies in precision: initial-letter calculates the correct font size based on the actual font metrics and the desired line count, while the float technique relies on an estimated font-size that needs recalibrating for every typeface.

Maintainability also differs significantly: if the body text's base font size changes later, an initial set with initial-letter adapts automatically, while an initial set with float needs re-measuring by hand. For new projects, initial-letter is therefore almost always the better choice, as long as browser support for the target audience is sufficient.

10. Summary

11. FAQ: initial-letter: The Essentials at a Glance