Webmasters Gallery

There is a non-standard way to stroke HTML text (SVG has a standard way). It’s not particularly new. There are -webkit- and -moz- prefixes for it. Jen Simmons recently posted about it, with an example:

span {
     -moz-text-fill-color: #fde;
  -webkit-text-fill-color: #fde;
     -moz-text-stroke-color: #666;
  -webkit-text-stroke-color: #666;
     -moz-text-stroke-width: 2px;  
  -webkit-text-stroke-width: 2px;
}

And she’s right:

This CSS isn’t fully-baked or fully-supported. But it’s good enough to be used today, especially since it’s simply offering a visual enhancement. It’s not mission critical to making a website usable.

I’d only perhaps add that if you were going to do something like add a stroke around white text, you could wrap it in a @supports to be extra sure it’ll be OK (just in case a browser exists that supports text-fill-color but not text-stroke-color):

@supports 
  ((-webkit-text-stroke-color: #666)
  and
  (-webkit-text-fill-color: white))
  or
  ((-moz-text-stroke-color: #666)
  and
  (-moz-text-fill-color: white)) {
  span {
       -moz-text-fill-color: white;
    -webkit-text-fill-color: white;
       -moz-text-stroke-color: #666;
    -webkit-text-stroke-color: #666;
       -moz-text-stroke-width: 2px;  
    -webkit-text-stroke-width: 2px;
  }
}

See the Pen Text stroke in action by Chris Coyier (@chriscoyier) on CodePen.

It Ruins Most Typefaces

That’s the thing that gets me about it. When you set a stroke straddled over the designed edge of a character, you’re losing the integrity of the shape.

And that’s the trouble with text-stroke in CSS: you have no choice. It’s center-aligned stroke only. Either of the other options, arguably, would have been more useful. It’s not the world’s biggest deal. The larger the text and the beefier the characters, the easier it is to get away with.

Set Behind Trick

If you’d like to simulate an outside-aligned stroke, James Nowland shows how you can set psuedo-element text behind the original text and still use text-stroke:

See the Pen CSS3 Stroke and Gradient Text by James Nowland (@jnowland) on CodePen.

Text Stroke: Stuck In The Middle With You is a post from CSS-Tricks