September 3rd, 2020
Whenever I think of stroked text on the web I think nope.
-webkit-text-stroke in CSS for it, but it places that stroke in the middle of the vector outline of the characters, absolutely ensuring that the character doesn’t look right. Just look at this in Chrome or Safari. Gross. If you’re going to do it, at least layer the correct type on top so it has its original integrity. And even then, well, it’s non-standard and you don’t get cross-browser support.
John Negoita covers text stroke in a bunch of other ways. Another way to fake it is to use
text-shadow in multiple directions.
Four ways, like the figure above, doesn’t usually cut it, so he gets mathy with it. SVG is capable of doing strokes, which you’d think would be much smarter, but it has the same exact problem as CSS does with the straddled stroke — only with somewhat more control.
I’d probably avoid stroked text on the web in general unless it’s just a one-off, in which case I’d make it into SVG in design software, fake the stroke, and use it as a
It is possible to look cool.
The original post Stroke Text CSS: The Definitive Guide.