CSS text-shadow that works on different font-sizes

Question

I have the following CSS on my

h2 {
    font-family: Arial, Verdana, sans-serif;
    color: #fff;
    text-shadow: 0 6px 0 #E5E5E5
}

The problem is that this looks good only on some font-sizes, in others it looks really bad. If the font is really big the shadow is barely noticeable, if the font is too small the shadow makes the text unreadable. In my webpage the font of this particular element changes sizes dynamically. It can be as small as 10px and as big as 200px.

For some reason setting the shadow position in % do not work, one would hope it would take a % of the font-size attribute.

So I'm asking here if there is any way to make text-shadow works on fonts that changes size using CSS alone. I'm hoping for a solution that doesn't use javascript.

Answer 1

You can use em instead of px in the text-shadow and em relates to the actual set size of the typeface.

• Examples on w3.org
• Understanding em

Answer 2

see

http://rcljr.com/rcl/tests/TextShadow%20Supreme/index.html

for a text shadow formatter