🔠 initial-letter — Beautiful Drop Caps in Modern CSS

🌐 What is initial-letter?

The initial-letter property allows you to create elegantdrop caps — enlarged first letters often seen in magazines, books, and editorial websites. You can control the size, depth, and styling of the first letter of a paragraph without manually wrapping it in extra HTML.

>>“initial-letter brings typographic elegance to CSS — no extra markup required.”

Note

✔ Supported in Safari, Chrome, Edge
✔ Firefox support in progress
✔ Works with block and inline elements

🎯 Why Use initial-letter?

  • Create professional editorial typography
  • Style drop caps without extra HTML wrappers
  • Control letter size relative to line height
  • Use raised or sunk styles
  • Perfect for blogs, magazines, articles, and long reads

📌 Syntax

initial-letter Syntax

initial-letter: <size> <sink>?;

size → how tall the letter is (in line units)sink → how many lines the letter “drops” into

📐 How Drop Caps Work

PropertyDescription
sizeHeight of the letter measured in lines
sinkHow many lines the letter sinks down into

Note

💡 The letter must be the first typographic character of the block.

🧪 Example 1 — Classic Drop Cap

Classic Drop Cap

p::first-letter {
  initial-letter: 3;
}

Makes the letter approximately 3 lines tall.

🧪 Example 2 — Drop Cap with Sinking

Drop Cap with Sink

p::first-letter {
  initial-letter: 3 2;
}

Letter is 3 lines tall but sinks only 2 lines deep.

🧪 Example 3 — Styling the Drop Cap

Enhanced Styles

p::first-letter {
  initial-letter: 3;
  font-weight: bold;
  color: #c0392b;
  margin-right: 8px;
  float: left;
}

Adds color, spacing, and a classic drop-cap look.

🎨 Example 4 — Raised Initial Letter

Raised Initial Letter

p::first-letter {
  initial-letter: 2 0;
}

The letter rises above the baseline instead of sinking downward.

📐 Example 5 — Using custom fonts

Custom Font Drop Cap

p::first-letter {
  initial-letter: 4 3;
  font-family: "Playfair Display", serif;
  color: #6a1b9a;
  margin-right: 10px;
}

Perfect for creating magazine-style typography.

🧠 How Browsers Calculate initial-letter

  • Letter height is measured using the line box height
  • Leading (spacing between lines) affects drop-cap shape
  • Margins around the first letter influence layout flow
  • Works only in combination with ::first-letter

📱 Responsive Drop Caps

Responsive Drop Caps

@media (max-width: 600px) {
  p::first-letter {
    initial-letter: 2;
  }
}

@media (min-width: 900px) {
  p::first-letter {
    initial-letter: 4;
  }
}

Smaller drop caps on mobile, more dramatic ones on desktop.

⚠️ Common Mistakes

  • ❌ Forgetting to use ::first-letter — initial-letter won't work
  • ❌ Adding spaces or quotes before the first letter
  • ❌ Expecting it to work in Firefox (not fully supported)
  • ❌ Applying initial-letter to inline elements incorrectly

Note

🧠 The first letter must be a typographic character — punctuation may interfere.

🔥 Summary

initial-letter is a powerful CSS feature for creating beautiful, editorial-style drop caps. It makes typography richer without extra markup, giving designers fine-grained control over how the first letter interacts with the rest of the paragraph.

>>“With initial-letter, polished magazine layouts are possible with just one line of CSS.”

Learn more →MDN Docs 📘