Text stroke for all! 24 January 2025

Around 2022, I started working on a redesign for this website. I had a general idea of what I wanted, so I started looking into selecting a new typeface. After considering many candidates, I landed on Cormorant Garamond. It looked elegant, and was very easy to read.

There was one problem though, I wanted to use an effect which included the CSS text-stroke property to create an outline around each character. I added -webkit-text-stroke: 2px var(--text-1) to my text, and got this result:

As you can see, the result is not great. It looks like, in some characters, the stroke was applied to each individual glyph. This is due to how the typeface was built, and is apparently very common for variable fonts, including the widely used Roboto and Montserrat.

“Too bad”, I thought. “I might have to choose a different one”.

I looked for a similar typeface and eventually found EB Garamond, which seemed better suited for screens and did not display imperfections when using text-stroke.

A few days ago, I learned that in March 2024 Chrome had finally added support for using the paint-order property on text. To be clear, Firefox and Safari already supported this. However, nowadays if a feature is not implemented by the largest browser, it is not generally considered to be available.

Thanks to this property, we can tell the browser to first paint the stroke and then the fill, like so: paint-order: stroke fill. Nothing changes on the typeface side, but this allows you to hide the imperfections behind the fill.

I like text stroke, and I am very glad that this is now possible accross all platforms. Developers and designers can now take full advantage of this nice effect, regardless of the typeface used. I might have to give Cormorant Garamond another chance now…