π CSS Drop Cap Explained
A Drop Cap is a classic typographic technique where the first letter of a paragraph is enlarged and styled distinctively. Dating back to medieval illuminated manuscripts, it adds elegance and visual hierarchy to text content.
Implementation
- ::first-letter pseudo-element β Cross-browser compatible approach using float, font-size, padding, and margin
- initial-letter property β Modern CSS approach (Safari 9+, Chrome 110+ with flag)
Design Tips
- Use contrasting colors for the drop cap vs body text
- Choose a different font family to distinguish the first letter
- Add background color with rounded corners for a modern look
- Keep the drop cap spanning 2-4 lines for best visual balance