How to use "two-toned" font variants in CSS?

Question

Certain fonts have a variant for outline and filled, and if you use these on overlapping text it draws an outlined or shaded stroke over the filled text. This is different than just an outline that strokes the text like -webkit-text-stroke-color would give you, since sometimes the filled font contains shading or other details.

Here's some examples of fonts designed to be used this way.

http://www.myfonts.com/fonts/matchandkerosene/duotone/

http://www.myfonts.com/fonts/scrowleyfonts/stomp/

I was sort of able to get this to work using CSS like this:

http://jsfiddle.net/6SakC/2/

This creates two H1 spans and uses the top-margin to move the outline one atop the filled one.

However, this doesn't seem ideal to me. Two problems:

• I don't want to duplicate the text in the html.
• I have to guesstimate the top-margin by trial and error.
• If the text wraps, this doesn't work anymore.

Is there a better way to do this? I can live with having to duplicate the text, but I'd really like a more automatic way to do the positioning.

Thanks!

Answer 1

You can place the outline text inside the h1 and use absolute positioning instead of estimating the margin, as in this jsFiddle: http://jsfiddle.net/6SakC/4/

That also solves the problem with the text wrapping.

To avoid duplicating the text in the markup, you can use JavaScript to create the duplicate text, as in this jsFiddle: http://jsfiddle.net/6SakC/5/ (This might not be the best idea, though, since the text might get a moment to display without the outline, and JS is occasionally disabled in the browser settings.)