No Login Data Private Local Save

initial‑letter CSS Playground - Online Drop Caps

Developer Tools Typography CSS drop cap initial‑letter typography
46
0
0
0
Your browser may not fully support initial-letter. This demo works best in Safari 9+ or Chrome 110+. The preview below shows the expected result where supported.
Live Preview

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line spacing, and letter spacing, as well as adjusting the space between pairs of letters. The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.

Initial Letter Settings
1 8
1 3
First Letter Styling
#8b0000
transparent
Quick Presets
Generated CSS
p { initial-letter: 3; } p::first-letter { color: #8b0000; font-family: 'Georgia', serif; font-weight: bold; }
Frequently Asked Questions
What is CSS initial-letter?
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.
Which browsers support initial-letter?

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.

What's the difference between single and double values?
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.
How does ::first-letter work with initial-letter?
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.
What's the traditional fallback for unsupported browsers?
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; }
}
What is initial-letter-wrap?
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.
🔧 Related Tools