Text rendering is absolutely awful in IE9

Question

See attached screenshot... This text rendering is coming out very unclearly on IE9. You may wish to zoom in to full size.

The font is from Typekit and, as per the client's request (and visual necessity), needs the drop shadow underneath it. This is done with CSS3. Is this a known issue, or are there any workarounds to it?

Is this to do with ClearType etc? If so, which settings need to be changed to fix this?

Thanks for your advice! Here's what the CSS on the text looks like:

font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
text-shadow: 0px 5px 10px #000;
display: inline;
margin-right: 30px;
font-size: 30px;
cursor: pointer;

Answer 1

I'm not 100% sure what your issue here is, but I do know that text-shadow isn't supported by default IE9. The text will appear perfectly white in this fiddle using your example code in IE9. Unless you're using some shiv to get text-shadow to work, you can use a DirectX filter - DXImageTransform.Microsoft.Shadow - to apply the shadow in IE9:

filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=45);

Do note, however, that this will not be as dark as the text-shadow you have currently applied.

If this issue is to do with the font not displaying in IE9 (it looks like Arial to me), then please see @font-face works in IE8 but not IE9