CSS Drop Cap – K
See the Pen Drop K by Chris Lowe (@alltimelowe) on CodePen.
Killer K. It’s been five months since my last drop cap—it’s so easy to push these things aside with the ebb and flow of client work.
This K is set in Permanent Marker from Google Fonts. Looking at the typeface in its entirety, I wouldn’t use it for much beyond what I’ve done here or some large display headings. Even then I don’t think it makes an attractive or balanced face. As I browsed the options, something about the ‘K’ screamed horror movie title, and “killer” came to mind.
The pulse effect, as you can see in the code above, is achieved by adding a CSS animation of the scale property on the K. I added another K behind it with the after pseudo element, which allowed me to offset the same animation but also toy with the opacity.