Drop caps are a design pattern that can decorate and emphasize the start of copy. They’re used extensively on this website to aid navigation through heavy text. While drop caps are found commonly in magazines and books, they’re rare on the web, most likely because they’re difficult to properly implement. In this post, I’ll show a technique for creating drop caps using CSS that loads fast, is widely supported, and works in a responsive design.
This is how you would write HTML/CSS with a drop cap:
Below is the SCSS code I use to implement the drop cap. Most of the functionality needed comes from the :first-letter, float:left, line-height, and padding. The additional mixins and variables are necessary for making it work responsively
Chrome 9+ Safari 8+ FF 3.5+ IE9+
- For faster rendering of the drop cap, use a websafe font
- Align drop caps with the baseline of the text lines
- Don’t use drop caps for few lines of text (e.g. don’t use a 3 line deep drop cap for a 3 line paragraph)
- Various fonts don’t align properly
- Firefox doesn’t align properly for all fonts
- The W3C is working on an initial letter (drop caps) specification, so eventaully the above techniques may become obsolete except for support in older browsers.
When researching ways to implement drop caps, I came across several implementations/articles: