Swirl

Text Outlines

The current way of adding text stroke outlines with CSS is through a webkit vendor attribute. The attribute itself seems quite straightforward at first glance, you just add -webkit-text-stroke: [size] [color]; easy right? Well, not quite. When using this alone:

Pretty annoying, right? Take a look at the text, you'll notice that the first font (Ubuntu Sans) renders just fine, but the second one (Lexend) has overlapping strokes. This is one of the limitations of this method.

To get around this, we must add paint-order: stroke fill; This draws the stroke, then covers it with the fill color, hiding any overlapping strokes. It looks like this:

This presents a new issue: Usually the stroke covers some of the fill in the text, but here the fill goes on top, covering the stroke. So to achieve the equivalent normal stroke, we must increase the stroke size, and possibly even decrease font size to compensate. Here's an example:

Here's what we started with:

1. -webkit-text-stroke: 5px black;
2. paint-order: fill stroke; /*default paint order for comparison*/
3. font-weight: 1000; /*(highest bold value)*/

And here's where we ended up:

1. -webkit-text-stroke: 10px black;
2. paint-order: stroke fill;
3. font-weight: normal;