{"id":5448,"date":"2025-03-24T10:55:40","date_gmt":"2025-03-24T15:55:40","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=5448"},"modified":"2025-04-01T10:48:09","modified_gmt":"2025-04-01T15:48:09","slug":"layered-text-headers","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/layered-text-headers\/","title":{"rendered":"Layered Text Headers"},"content":{"rendered":"\n

There is a way to apply a stroke to web text across all browsers:<\/p>\n\n\n

.stroke-text<\/span> {\n  -webkit-text-stroke<\/span>: 5px<\/span> red;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Despite the vendor prefix there, it works across all browsers. <\/p>\n\n\n\n
But I’ve never liked it… until recently. <\/p>\n\n\n\n
I’m not sure if I’ve ever spelled out exactly why, so first let me do that. Here’s a nice R from Roslindale<\/a>. <\/p>\n\n\n\n
\"Black<\/figure>\n\n\n\n
Which is made up of vector points like all fonts:<\/p>\n\n\n\n
\"The<\/figure>\n\n\n\n
In an application like Adobe Illustrator which gives me control over how a vector shape applies a stroke, if I stroke the outside<\/em> it ends up looking OK as the integrity of the letterform is preserved<\/strong>. <\/p>\n\n\n\n
\"Gray<\/figure>\n\n\n\n
It’s a bit harder to do with Roslindale “R” with the narrow passages at the top and middle of the letterform here, but we can apply stroke to the inside<\/em> as well and the overall shape of the letter stays the same. <\/p>\n\n\n\n
\"Red<\/figure>\n\n\n\n
But if we apply a stroke to the “middle”<\/em>, that is, straddled across the edge of the shape such that the stroke is equal on both sides, now we’ve ruined the shape of the letter and it looks like \ud83d\udca9.<\/p>\n\n\n\n
\"Green<\/figure>\n\n\n\n
This is even more pronounced as we deal with more text. <\/p>\n\n\n\n
\"\"
Top: Outside stroke
Middle: Inside stroke
Bottom: Center stroke \ud83d\udca9<\/figcaption><\/figure>\n\n\n\n
Point is: center aligned stroke sucks. <\/strong>And guess what the only option is for -webkit-text-stroke<\/code>? Center-aligned. And, equally sadly, all strokes in SVG, a bonkers omission for a vector painting specific language.<\/p>\n\n\n\n
Alas there is a half decent and kinda fun workaround. The trick is essentially using paint-order<\/code> (which works in CSS and SVG) to make sure that the “fill” of the element is drawn on top of the “stroke”, which effectively makes the stroke appear as if it’s outside-aligned even if it’s not actually doing that. <\/p>\n\n\n
.stroke-text<\/span> {\n  paint-order<\/span>: stroke fill; \/* fill is on top *\/<\/span>\n  -webkit-text-stroke<\/span>: 5px<\/span> red;\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
With this combo we can make stroked text tolerable:<\/p>\n\n\n\n