CSS Drop Cap – H
See the Pen Drop H by Chris Lowe (@alltimelowe) on CodePen.
Heroic H. Set in Sarpanch—a display typeface designed at the Indian Type Foundry— the high contrast gives this a slight art deco feel, circa. 1920s–1940s. Playing off that with bright colours I went for a bit of a “campy” feel to hit the Golden Age of comics style.
Combining pseudo elements on the H character as well as an extra div to achieve the outline on the shield, this one doesn’t scale quite so well and required a fair amount of tweaking the value to get things to sit just right.
The shield shape is a combination of a trapezoid and triangle, positioned tight to each other. The outer, white border is the extra div, repeating, but scaling up the size of the shapes and positioned in the back.