How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together

Update (Sept. 3, 2010)

This article originally has the filter and -ms-filter rules reversed, which is against Microsoft’s best practices for IE8. This error has been corrected.

Thanks to Zoe Mickley Gillenwater for pointing out that IE8 needs to have all the filter functions (i.e. all the stuff in the double quotes) on one line.

The modern web developer wants to be able to use a variety of CSS3 effects together, but sometimes doing this in IE can be challenging, especially if you don’t want to use JavaScript. Let’s take a look a common problem with IE: blocky text in IE when using IE Visual filters on a block of text. For example, if you’ve ever tried to do the cross-browser CSS opacity trick to implement opacity in IE6, this problem manifests itself when the text is styled with no background color. A developer uses this well-known cross browser CSS-foo to make this work:

And it looks great in every browser, but it looks like crap in Internet Explorer 6 with ClearType turned on. It is especially pronounced when using @font-face embedding with fonts that assume that some sort of anti-aliasing technology is being used. The example below uses Graublau Sans Web with the Alpha filter to illustrate the issue:

The first rule sets the background color of the container to a color that is represents the color of the majority of the background image on the page. Note that this rule uses Paul Irish’s Conditional CSS Pattern to serve it only to IE.

The second rule executes two of IE’s Visual Filters:

the Chroma Visual Filter, which tells IE “Please make this color transparent”. The color we choose to make transparent is the one we selected in the first rule.

the Alpha Visual Filter, which does the opacity trick

Default Opacity in IE

New Opacity Solution in IE

These filters must be in the order given, and not the other way around. Note also that care must be given that the color chosen to be transparent should be the average color of what is behind the text being styled, otherwise you will get less than optimal results. If this background is a complex image, just use the colour that’s used most often.

This fixes not only the IE opacity problem, but also issues with other Visual Filters, such as Matrix. I will be updating cssSandpaper to use this trick so that transformed objects in IE won’t look so blocky.

Finally got over here to check it out, Zoltan. Great find. I’ll post about it and spread the word after I get back from Ireland.
IE is a strange bird, really. I got started in web development in an Intranet environment with IE as the only approved browser so I know it intimately. It’s a pain in the ass to be sure, but very, very hackable. (High hopes for IE9.)
Over the years I’ve found that if you look at IE’s features long and hard enough and then test enough, you can almost always get IE to “heal itself”. Judo style, you can use IE’s own peculiarities to overcome it’s peculiarities.
Quite amazing.
Great hack!

@Rebecca: I have never been called a legend before — thanks for the kudos. My friends also thank you in advance for the insufferably inflated ego I will almost certainly have for the next few days. Cheers! :)

So, we are having the issue when a container has the box-shadow filter applied. How would your solution work there? We’re not trying to do anything to the text, just have drop shadows on our containers. Ideas? Thanks if so.

@Jennifer: Using the DropShadow filter on this container will do this trick, as long as you set a background color to the object, otherwise IE6-8 will put a drop shadow on the text as well. In order to handle transparent backgrounds in IE6-8, one must use the Chroma filter alomg with the DropShadow filter in order to make this work. Here is an example of this in action:

You will also need to add a background-color: #e5ffe2; above it to make it work correctly. All these rules should be in an IE-only CSS rule, since this code will produce different results in other browsers.

Oh man, Thanks for sharing this fix. I couldn’t figure it out for the life of me. It almost makes sense – wonder if anti-aliasing is related to the transparency issues, and once you set a bg color for it it can calculate the smooth edges? I don’t know, but it does work. and thank you!

I can’t get this to work when using -sand-transform:rotate() on the same element – although if I copy the -sand-transform generated rotation rule, append this within the same filter: parameter and add it to the stylesheet manually it does work.

Is there a way to pass this through -sand-transform to get the required effect?

There is a -sand-chroma-override property that you can use to implement this fix. For example, setting -sand-chroma-override: #808080 sets the background of the object to #808080 in IE and then removes that background color using the Chroma filter. See cssSandpaper’s official documentation for more info.

Give Feedback

Don't be shy! Give feedback and
join the discussion.

Please Note: If you are asking for help using the information on this page or if you are reporting a bug with the code featured here,
please include a URL that shows the problem you are experiencing along with the browser/version number/operating system
combination where the issue manifests itself. Without this information, I may not be able to respond.