Stroked Text in CSS Is Still a Mess
Stroked text on the web is easy to want but hard to do right. The usual tool, -webkit-text-stroke, centers the stroke on the character’s vector outline, which distorts the letterforms. The result looks off in Chrome and Safari — a quick CodePen demo shows how rough it gets. Layering the original type on top can preserve some integrity, but the property remains non-standard and lacks consistent cross-browser support.
John Negoita examines several alternatives. One common fake is text-shadow repeated in multiple directions.
- Four shadow directions usually aren’t enough, so he takes a more calculated approach.
- SVG can handle strokes, which seems smarter, but it suffers the same straddled-outline problem — just with more control over the result.
For most cases, stroked text is better avoided entirely. If you only need it once, the practical move is to create it in design software as an SVG, apply a fake stroke, and drop it in as a background-image. It can look good — but not through raw CSS tricks.
