CSS Drop Cap: A Complete Guide to Creating Elegant Typography

What is a CSS Drop Cap?

Drop caps (short for "dropped capitals") are large, decorative letters that appear at the beginning of paragraphs or sections. They've been used in books and publications for centuries to mark the start of new content and guide readers into the text.

With modern CSS, implementing drop caps is simpler and more flexible than ever before. This guide covers two primary approaches: the ::first-letter pseudo-element for broad browser support and the newer initial-letter property for more elegant implementations. Understanding CSS pseudo-elements like ::first-letter is foundational to mastering these techniques.

What you'll learn:

• How to use ::first-letter pseudo-element for drop caps
• The modern initial-letter property and its benefits
• Various styling options including colors, fonts, and effects
• Accessibility and performance best practices
• Common troubleshooting solutions

Understanding the CSS Drop Cap

The ::first-letter Pseudo-Element

The ::first-letter pseudo-element is the foundational CSS technique for creating drop caps. This selector targets the first letter of text content within an element, allowing you to apply unique styling to that character. The ::first-letter pseudo-element works across all browsers, making it the most reliable choice for production websites.

Key properties for drop cap styling:

The Modern initial-letter Property

CSS Level 4 introduced the initial-letter property, specifically designed for creating drop caps. This property provides more intuitive control over drop cap sizing and text wrapping. Combined with proper line-height usage, you can achieve precise typographic control.

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

The first number (3) specifies how many lines tall the drop cap should be. The second number (2) indicates how many lines the surrounding text should sink/indent.

Styling Options for Drop Caps

Drop caps offer extensive styling possibilities to match your design system.

Color and Background

Add visual emphasis with custom colors and backgrounds:

.drop-cap-colored::first-letter {
 font-size: 3em;
 font-weight: bold;
 float: left;
 color: #2c3e50;
 background: #f8f9fa;
 padding: 0.1em 0.15em;
 margin-right: 0.15em;
}

Text Effects

Enhance readability and visual appeal:

.drop-cap-shadow::first-letter {
 font-size: 3.5em;
 font-weight: bold;
 float: left;
 color: #e74c3c;
 text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
 margin-right: 0.1em;
}

Bordered Drop Caps

Create decorative bordered drop caps:

.drop-cap-border::first-letter {
 font-size: 3em;
 font-weight: bold;
 float: left;
 padding: 0.15em 0.25em;
 margin-right: 0.2em;
 border: 2px solid #3498db;
 border-radius: 4px;
 background: #f8f9fa;
 color: #3498db;
}

These styling techniques can be combined with modern layout approaches like CSS Flexbox to create sophisticated typographic designs.

Troubleshooting Drop Cap Issues

Descender Problems

Letters like g, j, p, q, and y extend below the baseline, which can create awkward spacing. When working with these characters, understanding CSS positioning and float behavior becomes essential for proper alignment.

/* Solution: Adjust line-height and use strategic margins */
p::first-letter {
 font-size: 3em;
 float: left;
 line-height: 0.8;
 margin-top: 0.1em;
}

Text Wrapping Issues

If text hugs too close to the drop cap:

p::first-letter {
 font-size: 3em;
 float: left;
 margin-right: 0.2em;
 padding: 0.1em;
}

Mobile Rendering

On small screens, consider reducing or hiding drop caps:

@media (max-width: 768px) {
 p::first-letter {
 font-size: 2em;
 }
}

Common Drop Cap Patterns

Pattern 1: Classic Editorial Drop Cap

The most common use case for blogs and articles:

.article-content p:first-of-type::first-letter {
 font-family: Georgia, serif;
 font-size: 3.5em;
 font-weight: 700;
 float: left;
 line-height: 0.8;
 margin-right: 0.15em;
 color: #2c3e50;
}

Pattern 2: Modern Initial-Letter Approach

The cleanest modern implementation:

.modern-drop-cap::first-letter {
 initial-letter: 4 3;
 font-weight: bold;
 color: #e74c3c;
 font-family: system-ui, sans-serif;
}

Pattern 3: First Paragraph Only

Apply drop caps only to the first paragraph of content:

/* Using :first-of-type to target the first paragraph */
.content p:first-of-type::first-letter {
 font-size: 3em;
 font-weight: bold;
 float: left;
 margin-right: 0.1em;
 color: #0066cc;
}

Sources

1. DigitalOcean: Drop Caps in CSS Using first-letter & initial-letter
2. Vinova: Top 10 CSS Techniques Every Web Developer Should Know in 2025
3. TheoSoti: Stylish drop caps in CSS with just two lines
4. HTMLGoodies: Web Design 101: Creating Drop Caps in HTML and CSS