Whenever I think of stroked text on the web I think: nope.
There is -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 background-image.
It is possible to look cool.
One variant he hasn’t mentioned for SVG text is the use of
paint-orderto get the stroke behind the fill: https://codepen.io/ccprog/pen/MWyOmgXHow about paint-order: stroke; to keep it behind the text only?
Stroking text isn’t something I do often, and when I have I’ve used it sparingly, but on those occasions the 4-way text-shadow trick has worked well for me. I combine it with text-transform:uppercase and a font with straight lines.