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

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.