Dropcaps CSS

Dropcaps in CSS are always “fun” to do for 3 reasons. First, the CSS seems easy enough to do. Use a float styling in a SPAN. Or use a :first-line:first:letter pseudo-class to style not just the first letter but also the first line of text as well. The second reason dropcaps are “fun”is because then you get to do some CSS debugging. Inevitably the dropcaps do not drop as much as intended depending on the font-family, font-size, line-height and browser used. Finally, the third reason dropcaps are fun” is because in the comments section of your page or post, inevitably some wizened Web troll will observe “dropcaps do not make your opinion right in fact you are full of ….”.

So with these provisos, here is a CodePen full of different dropcap stylings. Enjoy:


Pin It on Pinterest