Improved CSS Text-Stroke

Hello, RSS reader! 👋 This post has some bespoke art direction you’ll only see if you view it directly. No hard feelings if you prefer to read here, I just wanted you to know! ✌️Historically, applying an outer stroke to text via CSS has been tricky. All major browsers have long supported these (stubbornly vendor-prefixed) properties: -webkit-text-stroke -webkit-text-stroke-color -webkit-text-stroke-width But these always center-align the outline, intruding on text therein. For anything more than a hairline stroke on some decently heavy type, things get real ugly real fast: Bleh! The thick stroke rests atop the letterforms, significantly impeding legibility. Language: CSS.example { -webkit-text-stroke: 0.125em white; } Web designers are tenacious, so of course they found workarounds: Set text shadows in every cardinal direction (Chris Coyier, 2010) Duplicate text, apply stroke to the bottom “layer” (James Nowland, 2015) Use an SVG filter (Dudley Storey, 2016) Most of the time, though, I…