Attractive CSS dropcaps without image replacement

It might be overkill to use an embedded webfont all over the website, particularly if the font is particularly "artistic", but one place where it is nice to use elaboate fonts is as a drop cap. Traditionally, you made an image of the letter in question and used image replacement to "hide" the real first letter of a paragraph, either by positioning it off the page or hiding it with display:none.

The problems with this approach are

• You need a different image for each letter of the alphabet, and need to add an id or class into the HTML so the CSS replaces the letter with the right image
• It's therefore not dynamic—you need to make and upload new images if you change the content
• If you position the real text off-screen, it doesn't work for a reader with CSS on, images off (increasingly common for mobile browsers)
• if you hide the real text with display:none, it is opaque to screenreader users

Using CSS Web Fonts solves these problems. For conforming browsers, any licensed font can be rendered dynamically as the first letter of a paragraph. Non-conforming browsers simply fallback to the next font in the font-family/ cascade. This page, for example, is using the Versalis font from KingsThings as a Web Font for drop caps. The rest of the page uses font-family: Georgia, "Times New Roman", Times, serif;, which is how Chrome and other non-conforming browsers will display the drop caps. The whole character set is 15K, which is probably smaller than making a GIF of a single character from the set.

Some gotchas

Leading punctuation

"Woe, woe, woe to the Web", they all cried at the thought that you might be able to embed fonts into pages.

Note that the paragraph above looks a bit borked. The opening quote is big and bold but not in a sexy font, while the first letter (which us actually the second character) does take the sexy font. What the font is going on?

Actually, all is well and according to spec. The CSS 2.1 spec for ::first-letter says "Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included".

What's happening in the example above is that both the initial punctuation character and the first letter are caught by the CSS ::first-letter selector. However, the Web Font that I've chosen doesn't have a fancy punctuation mark, so the browser quite rightly applies the default font face but bolds and enlarges it as the ::first-letter rule says. It does have a fancy letter for the next character, so applies that as you'd expect. The moral here is choose a Web Font that includes glyphs for punctuation marks that could conceivably be the first character, such as opening quotes or inverted question mark used to open questions in Spanish (which sadly is not called the "Spanish Inquisition Mark").

Note also that a digit counts as a ::first-letter.

Pseudo-class syntax and Internet Explorer

The CSS 3 spec changed the notation for pseudo-elements like ::first-child to use double colons, but Internet Explorer doesn't understand that. Fortunately, a single colon is allowed for backwards compatibility, so use that or the styles won't work in IE.

Be careful of filesizes

In my examples above, it's considerably smaller to download the fonts than it would be to make images of characters. But that font has only a small number of glyphs. If you're using a full set of characters, multiple font weights or even multiple typefaces, the size of your website can quickly bloat. Opera and Firefox display unstyled content (that is, fallback fonts rather than Web Fonts) while the font files are downloading, but Safari displays no content at all while it's downloading the resources (same with IE, I believe). This would be a very poor user experience on a slow connection (such as a 3G network).