There are specific fonts that offer both an outline and filled variant. When used on overlapping text, these fonts create a stroke effect over the filled text. This differs from a basic outline provided by -webkit-text-stroke-color, as the filled font may include shading or other intricate details.
Check out some examples of fonts designed for this purpose:
I attempted to achieve this effect using CSS with the following code:
This code creates two H1 spans and uses top-margin to position the outline above the filled text.
However, I find this method less than ideal due to the following issues:
- I don't want to repeat the text in the HTML code.
- The positioning requires trial and error guesswork with top-margin values.
- If the text wraps, the technique no longer works effectively.
Is there a more efficient way to achieve this effect? While duplicating the text is acceptable, I would prefer a more automated approach to positioning.
Thank you!