You can create stroked text in CSS, but unfortunately, it is unwieldy. The existing "nonstandard" properties (-webkit-text-stroke and friends) have a very basic specification and implementations are inconsistent across browsers.
The paint-order property, which controls if the stroke or the fill is on top, is buggy. And stroke alignment is not a thing in CSS. This makes it difficult to get an attractive result with the -webkit-text-stroke property.
paint-order to be consistent to avoid this mess. Ideally, you want to control the alignment of the stroke to decide how the stroke and fill co-mingle.And since stroke alignment is a thing in design tools like Figma, some designs cannot done be with CSS! This is the perfect recipe for snarky behaviour between designers and devs! 😅
You are more likely to use a SVG for stroked text because you have more consistency and control. This is not ideal. You don't want an image in lieu of text for many reasons!
Alas, there is the CSS Fill and Stroke Module Level 3 Specification from the W3C that covers the same "nonstandard" properties. Sounds like a perfect thing for the Interop initiative to work on, right?
I submitted a proposal to Interop 2025. Give it a 👍 if you would like to see this happen.
Top comments (1)