IE Cleartype Fix – The Solution for Blurry or Pixelated Text

jquery

We’ve all seen it. BLURRY TEXT. It can steal the beauty from even the best designed sites. Have you ever seen (or made) a dropdown menu using JavaScript and found that the text just doesn’t show up right in IE? How about a slick, fading menu that ends up having blurry, hard to read, pixelated text? Any WordPress designers ever run into this problem with plugins? Well, stop pulling your hair out. The solution is as easy as removing one little attribute from the troubling JavaScript code.

Before we get going here, I feel the need to explain what ClearType really is. Think of those jagged edges you often see in text on a computer screen, especially any flat-panel. Well, there’s a bit of code in your operating system that attempts to clean up those edges by using anti-aliasing at the sub-pixel level to visually smooth out those rough edges, making the text easier to read. Essentially, it aims to make on-screen text appear more like printed text.

But, here’s where our problem lies. Animating text with JavaScript (especially in jQuery) overrides the ClearType feature by telling the browser to display each step of the pixel throughout animation. When the animation completes, its left displaying the final step without ClearType enabled, leaving the text looking a bit crappy. Functions like fadeIn() and fadeOut() usually trigger the override and cause the pixel problems.

The Fix

To fix the problem and re-enable ClearType within our script, all we have to do is remove the filter attribute from whatever element is causing the trouble. Usually, it can be done by just adding a function to the script element.

Have a look at this example of some text before and after this fix.

ClearType before and after fix

See the difference? And there you have it… the world’s quickest, easiest fix for those nasty pixelated letters you see so much of all over the web. Now, go fix ‘em up!

About the Author

Dave Winter focuses in WordPress UI Design and WordPress Plugin Development (some have labelled him a fanatic) but has hands in many other projects, including photography and music. He's never far from a computer... or an iPad (for testing purposes, of course). If you've been to a WordCamp in Southern California, he probably already knows who you are (or maybe not - he's terrible with names). Dave currently teaches courses at California State University, Long Beach alongside his small business at dauid.us (and his students think he's pretty boss).

Comments

  1. Awesome!

  2. Great. Very helpful for me.

  3. Well written article. I really like reading this blog for the reason that the writers often write excellent posts. Great work once again. I am planning to subscribe to this feed and bookmark this website.Great. Ain’t technology sweet?

  4. I’m having this issue in the carousel underneath the main banner of my site (http://mygsis.gsis.edu.hk) in IE7. I tried disabling all the associated JS files but the problem continued. So I’m not sure the issue in my case is JS/JQuery related? I still don’t know how to resolve it yet. Any help would be appreciated.

    Many thanks
    Trevor

  5. However, If you actually NEED the filter attribute, this is useless. In many cases you do (ie7-8 css gradients and rgba).

    • Dave Winter says:

      Sam,

      While I do agree that sometimes this fix may play poorly with FILTER, in many cases, it provides a great workaround for a common and annoying problem. So, yes, if you’re using the filter attribute to set gradients or anything else within the code itself, you may run into some problems. But with the use of some CSS3, layered divs and a little creativity, you may be able to accomplish a very similar effect. (Your site should respond better, too). I’ve been using this fix for a couple of years and haven’t run into an effect that couldn’t be replicated in another fashion.

      Thanks for your comment!

      Cheers,
      Dave

Let me know what you're thinking

© 2014, Dave Winter (dauidus)