CSS Drop Cap – D
See the Pen Drop D by Chris Lowe (@alltimelowe) on CodePen.
Set in Passion One, a solid display face from Fontstage—their site isn’t working and there is limited background on Passion One in their Google Font listing. The typeface is best suited for headings as is quite heavy even at it’s Normal weight. As the weight increases the counters and kerning becomes tighter. I describe the letterforms as humanist sans serif—there a slight calligraphic character to the stems of l, d and t—giving it a bit more of a casual personality.
The drop cap is made of before and after pseudo elements again, this time with skew and scaleY transforms paired with mix-blend-mode. Mix-blend-mode is still in candidate recommendation status with the W3C and is only fully supported in Firefox and Chrome. With a little simple colour theory and a blend mode of screen we get the cross section of the three letters as pure white.