Stroke Text CSS: The Definitive Guide

Avatar of Chris Coyier
Chris Coyier on

Grow sales with Customer Journey Smarts Mailchimp tracking pixel

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.

Direct Link →