initial-letter is a CSS property that automatically creates a drop cap (or raised cap) effect — where the first letter of a block of text spans multiple lines. It's part of the CSS Inline Layout Module Level 3. With a single value like initial-letter: 3;, the first letter will span 3 lines. This replaces the older, hackier methods involving float, manual font-size adjustments, and line-height calculations.

Supported:

• Safari 9+ — full support since 2015
• Chrome 110+ — added in February 2023
• Edge 110+ — same Chromium base
• Opera 96+

Not yet supported:

• Firefox — under consideration (Bug 1223880)

For unsupported browsers, consider using a @supports fallback with the traditional float method.

initial-letter: 3; (single value) = the first letter spans 3 lines, with its baseline aligned to the bottom of the 3rd line. This is the most common usage.

initial-letter: 3 2; (double value) = the first letter still spans 3 lines of height, but its baseline aligns to the 2nd line instead. The letter "sinks" less, creating a raised cap effect with text potentially wrapping into the space below the letter (depending on initial-letter-wrap). The sink value must be ≤ the size value.

The initial-letter property is applied directly to the block-level container (like p). You can then use the ::first-letter pseudo-element to style the drop cap's appearance — its color, font-family, font-weight, background-color, and more. The initial-letter handles the sizing and alignment automatically, so you generally shouldn't override font-size on ::first-letter when using initial-letter.

Use @supports to provide a float-based fallback:

p::first-letter {
  float: left;
  font-size: 4.5em;
  line-height: 0.85;
  margin-right: 0.08em;
}
@supports (initial-letter: 3) {
  p::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
  }
  p { initial-letter: 3; }
}

initial-letter-wrap controls how surrounding text wraps around the drop cap's contours:

• none — text doesn't fill the凹陷 below the letter
• first — only the first line of text fills into available space
• all — all lines fill available space around the letter
• grid — wrapping aligns to the grid established by the letter

This is especially noticeable with large initial-letter values (4+). Support is limited; primarily available in Safari.