Project: Drop Cap

Get inspired by drop-caps of yore and add a drop cap to your site.

Few things bring a typographic designer more pleasure than pawing through old manuscripts admiring beautiful, ornate drop caps and their delicate curlicues.

Once the singular provenance of print design, with it’s hand-placed lettering, thanks to advancements in web typography and CSS3 psuedo-selectors, drop caps can now be done online!

Learn how to add a drop cap to your site and then show us the results (share a link in the comments).

HTML, CSS, CSS3, and Web Typography are core skills for a Web Designer.


1. How To Create a Stylish Drop Cap Effect with CSS3, by Chris Spooner

2. Paragraph Dropcap With CSS’s :First-Line And :First-Letter Elements, by Thoriq Firdaus

3. Drop Caps with CSS, by Matthew Arcus

4. Drop Caps: Historical Use And Current Best Practices With CSS, by Laura Franz

5. Daily Drop Cap, by Jessica Hische