Icy type with -webkit-text-stroke and RGBA color values

Sean McBride, writing for Typekit:

To emphasize the icy nature of our title text, we used the WebKit-only -webkit-text-stroke CSS property. While it isn’t currently a part of any CSS3 working draft, text-stroke was implemented by the WebKit team as a way to add a colored stroke on text outlines. A similar text-outline property in the CSS3 Text Working Draft has failed to gain broad support and is in danger of being cut. Luckily, while the web standards process plays out, we can make use of the property in WebKit-based browsers like Safari and Chrome. Other browsers will simply ignore it.

In combination with -webkit-text-stroke, we used an RGBA color value to specify a color that’s partially transparent. As a result, the text looks as if it’s encased in a thin layer of ice.

Topics: Web fonts