How to Use the CSS initial-letter Property?

If you have ever built a drop cap with float: left, a large font-size, and a line-height tuned by trial and error, you know the result. It lines up in one font, at one size, in one browser. Change the body typeface or let the user zoom, and the big letter floats above the baseline or pushes the third line out of alignment. You end up adjusting margins by half a pixel and hoping nobody changes the font stack.

The CSS initial-letter property exists to end that guesswork. You tell the browser how many lines tall the letter should be and how many lines it should sink, and the browser does the math against the actual font metrics. This article covers the syntax, current browser support, styling options, the fallback pattern you should ship, and the accessibility details that are easy to miss.

What Is initial-letter?

initial-letter is a CSS property from the CSS Inline Layout Module that sizes and positions the first letter (or first inline element) of a block so it spans multiple lines of text. It is the native way to create drop caps, raised caps, and sunken caps.

Instead of setting a font size, you describe the letter in terms of lines:

• Size is how many lines tall the letter is. A size of 3 makes the letter's cap height match the distance from the cap height of the first line to the baseline of the third line.
• Sink is how many lines down the letter drops. A sink of 3 with a size of 3 gives a classic drop cap. A sink of 1 gives a raised cap that sits on the first baseline and rises above the paragraph.

The browser then aligns the letter to the text grid using the font's real cap height and baseline, which is the part that is nearly impossible to do reliably by hand.

Syntax and Values

p::first-letter {
  initial-letter: 3; /* size 3, sink defaults to 3 */
}

The property accepts:

Value	Meaning
normal	No initial letter effect. The default.
3	Size of 3 lines. Sink equals the size, so it drops 3 lines.
3 2	Size of 3 lines, sinks 2 lines. The letter rises one line above.
3 1	Size of 3 lines, sinks 1 line. A raised cap.
2.5	Fractional size. Sink rounds to the nearest whole line.
3 drop / 3 raise	Keyword sink forms from the spec. Support is limited, so use integers.

The size must be a positive number and can be fractional. The sink must be a positive integer. In practice, sizes from 2 to 4 cover almost every editorial design.

Visual Shorthand

1. Drop cap — initial-letter: 3 or 3 3. The top of the letter aligns with the cap height of line one, and its baseline sits on line three.
2. Raised cap — initial-letter: 3 1. The letter sits on the first baseline and extends upward into the space above the paragraph.
3. Sunken cap — initial-letter: 3 2. A hybrid that drops two lines and rises one.

Where You Can Apply It

initial-letter applies to the ::first-letter pseudo-element and to an inline-level box that is the first child of a block. Most of the time you will use ::first-letter:

.article-body > p:first-of-type::first-letter {
  initial-letter: 3;
  font-weight: 700;
  color: var(--color-primary);
  margin-inline-end: 0.1em;
}

The ::first-letter selector includes leading punctuation, so an opening quotation mark and the letter after it are treated together. That is usually the typographically correct behavior.

You can also wrap the first word or letter in a span when you need it to be a separate element, for example to style a whole word in small caps:

<p class="opener"><span class="cap">O</span>nce the servers were moved to the new region, latency dropped by half.</p>

.opener .cap {
  initial-letter: 2;
  font-family: "Playfair Display", serif;
}

Browser Support in 2026

Support is good but not universal, which is why the fallback section below matters.

Browser	Support
Chrome, Edge 110+	Unprefixed initial-letter
Safari	Prefixed as -webkit-initial-letter, supported for years
Firefox	Not supported; the letter renders as normal text

Safari's implementation predates Chrome's and has quirks, especially with web fonts that have unusual metrics and with properties like font-weight applied to the letter. Test in Safari specifically. In unsupported browsers the property is ignored and the paragraph simply starts with a normal-sized letter, which is a perfectly acceptable baseline.

Writing a Safe Fallback with @supports

Ship both declarations and guard any companion styles behind a feature query, so unsupported browsers do not get a giant letter with no alignment:

.article-body > p:first-of-type::first-letter {
  color: var(--color-primary);
  font-weight: 700;
}

@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {
  .article-body > p:first-of-type::first-letter {
    -webkit-initial-letter: 3;
    initial-letter: 3;
    margin-inline-end: 0.12em;
  }
}

If you want Firefox users to get a drop cap too, put the float-based technique in the not branch. Our guide on creating drop caps with CSS covers that float approach in detail, so here is only the shape of it:

@supports not ((initial-letter: 1) or (-webkit-initial-letter: 1)) {
  .article-body > p:first-of-type::first-letter {
    float: left;
    font-size: 3.6em;
    line-height: 0.85;
    margin-block-start: 0.05em;
    margin-inline-end: 0.08em;
  }
}

The float values need tuning per typeface, which is exactly the work initial-letter removes for browsers that support it.

Styling the Initial Letter

Because ::first-letter accepts font, color, background, margin, padding, and border properties, you can go well beyond a big letter.

Use a Different Typeface

A display face with strong contrast often looks better at drop cap size than the body face. Make sure that face is loaded, or the fallback renders first and the cap shifts once the font arrives. If you only use the face for this one glyph, subsetting the font down to uppercase letters keeps the download tiny.

.article-body > p:first-of-type::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-variation-settings: "opsz" 144;
}

Boxed or Colored Caps

.boxed::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
  background: var(--color-primary);
  color: var(--color-body);
  padding: 0.1em 0.2em;
  margin-inline-end: 0.15em;
  border-radius: 0.1em;
}

Padding enlarges the box, and the browser still aligns the glyph to the text grid, so the background extends outward rather than pushing the letter off its baseline.

Spacing Next to the Letter

margin-inline-end controls the gap between the cap and the wrapped text. Values between 0.05em and 0.15em work for most faces. Letters with open right sides, like "L" or "T", may look better with less space, and you can target them only with extra markup or classes, since CSS cannot select on the letter's identity.

Design Guidelines

• Use it once per article. A drop cap marks the start of a piece. Repeating it on every section dilutes the effect and slows reading.
• Skip it on short openers. If the first paragraph is only one or two lines, a three-line cap leaves a hole. Either use initial-letter: 2 or skip the effect for that layout.
• Avoid it on mobile if lines are short. On a 320px screen with 16px text, each line holds around 35–40 characters. A three-line cap eats a large share of each of those lines. A media or container query can reduce the size to 2 on narrow screens.
• Match weights thoughtfully. A heavy cap beside light body text can look like a stain on the page. Match or slightly exceed the weight of your headings.
• Watch the first word. If the article starts with "A" or "I" as a whole word, the cap visually separates from the rest of the sentence. Some editors rewrite the first sentence to avoid it.

@media (max-width: 30rem) {
  .article-body > p:first-of-type::first-letter {
    -webkit-initial-letter: 2;
    initial-letter: 2;
  }
}

Accessibility Considerations

initial-letter is a pure styling property, so the text content stays intact. Screen readers read "Once the servers" as normal words, which is a significant advantage over the old technique of using an image for the first letter or wrapping the letter in a span with a separate font that some assistive technologies announced oddly.

A few points still apply:

1. Contrast. A colored cap is still text and needs to meet the WCAG 1.4.3 ratio of 3:1 for large text. At three lines tall it qualifies as large text, but very pale brand colors may still fail.
2. Text spacing overrides. WCAG 1.4.12 requires content to work when users increase line height to 1.5. Because initial-letter is measured in lines, it adapts automatically, unlike float-based caps with fixed sizes.
3. Zoom. At 200% zoom the cap scales with the text, so no extra work is needed.
4. Do not split words with markup. If you wrap only the first letter in a span, keep it inside the same word with no whitespace, or some screen readers will pause between the letter and the rest.

Initial Letter FAQ

Conclusion

The initial-letter property turns drop caps from a fiddly, font-specific hack into a single declaration. You describe the size and sink in lines, and the browser aligns the letter to the real metrics of whatever font loads. Chrome, Edge, and Safari support it today, and Firefox falls back gracefully to plain text.

Ship it with both the prefixed and unprefixed declarations inside a feature query, add a float fallback only if you truly need one, keep the effect to the opening paragraph, and reduce the size on narrow screens. Used with restraint, it adds an editorial touch to long-form content without costing readability.

Here are some useful references for going deeper on initial-letter:

1. MDN Web Docs: initial-letter — syntax, values, and current browser compatibility.
2. W3C: CSS Inline Layout Module Level 3 — the specification that defines initial letters and their alignment.
3. Chrome for Developers: CSS initial-letter — Chrome's announcement with examples of size and sink.
4. MDN Web Docs: ::first-letter — which properties the pseudo-element accepts and how punctuation is handled.