code snippet

how to add drop caps to your website

(with pure and simple CSS)

This time it’s a short and qiuck one:

I’m pretty much obsessed with typography and I really like where the web is going with its typography. One of the beautiful things I often notice in print publications (and far too rarely on websites, though) are drop caps.

Until recently I thought it was due to the difficulty to implement them, but in fact it’s super easy to create them with pure CSS. You just need a little pseudo-element:

This CSS-definition for example targets the first letter inside the first paragraph of every article.

You need to add float:left and display:block to make the drop caps work correctly if they extend over multiple lines, but besides that you can change everything you want the way you want to — the font-family, the line-height, the color, even the background of the drop caps.

In a sans-serif paragraph you could do something like this to get a two-line, bold and serif drop cap:

Voila. You might want to adjust the line-height and the padding according to the fonts you use but that’s basically it.

And the best thing is: The ::first-letter pseudo-element is widly accepted by various browsers and in case the browser doesn’t support it, it’ll just ignore the complete CSS-definition.