Take the 2-minute tour ×

For IE7, it's possible to add

filter: none;

to the body css to disable cleartype on fonts through CSS. I don't like the fuzzy look it gives, and it isn't really consistent across browsers. IE; Firefox and IE6 show it differently.

IE8 however, seems to ignore the css option, even when forcing the browser into IE7 compatibility mode using:


TL;DR: How do I disable clear-type fonts in IE8 through CSS?

share|improve this question
To the downvoters: My question was not if it was a good idea to disable cleartype - you can leave that up to my own consideration. The question was HOW to do it. –  Daniel Sloof Jun 23 '09 at 9:44
Do you like it when your browser is hijacked? When the window is resized? When you get spammed with popups? When the address bar is disabled? This is a classic case of thinking you know better when you clearly have no right or need to be messing with it at all. Consider the reverse - what if a website forced cleartype to be on? –  Jon Grant Jun 23 '09 at 9:52
One of the most important lessons I've learnt is, "the customer is not always right". Half the time, they don't even know what they want. If a customer asked you to implement an exploit to install spyware on visitor's PCs, would you do it? Just explain that it's not reliably possible or even desirable. –  Jon Grant Jun 23 '09 at 10:19
If I want clear type turned off, I'll turn it off. As a user, this is not a decision I want web sites making on my behalf. –  Joel Mueller Jun 23 '09 at 16:39
@Joel, then lucky for you this isn't a question about what you want as a user. –  Daniel Sloof Jun 23 '09 at 18:30
show 5 more comments

8 Answers

up vote 17 down vote accepted

From what I recall, Internet Explorer 7+ disables ClearType when a filter is set on an element

#target {

Also, do consider that many users may find disabling ClearType to be annoying. Use sparingly!

share|improve this answer
Perfect. Does it also work with -ms-filter:none; filter:none; as well? because that's probably more correct. –  rpetrich Jun 23 '09 at 9:44
Unfortunately, no. –  Daniel Sloof Jun 23 '09 at 9:44
And as predicted this ceases working in IE 9. Hooray. One web developer less who tries forcing his ways onto his readers. –  Јοеу Mar 28 '11 at 5:45
@joey or... drumroll Pixel fonts! I like my pixel fonts crispy, thank you, and I want my users to see it as such! –  Maurycy Zarzycki Sep 13 '11 at 18:22
Maurycy: If you design pixel fonts as outline fonts without proper hinting you deserve blurry display, anyway. –  Јοеу Sep 13 '11 at 18:49
show 2 more comments

You can't. ClearType is a user setting on the browser. Any CSS which would disable it for certain elements is most likely a bug, not a feature (I've noticed it gets disabled for some dynamically generated or animated elements) and shouldn't be relied upon.

Whatever your preference in this regard is is probably not the user's one who sees your site. So why bother? Whoever doesn't like ClearType probably has it disabled already.

Note: The reason why it works with filters is that filters are not rendered by the browser but something else (DirectX probably, considering the "DX" in there. I'd still consider that a side-effect, and not a feature).

Note 2: Fixed as of IE 9, as expected. This really is a battle you can only lose, as many have told you before except you wouldn't listen.

share|improve this answer
Yeah, you leave my ClearType alone! –  Benjol Jun 23 '09 at 9:36
I understand your concerns but, although constructive, it's not an answer to the question. (and also wrong in regards to not being able to do it in IE8) –  Daniel Sloof Jun 23 '09 at 9:54
It's the answer best showing an understandig of what's going on. Even if you could find another IE8 hack, chances are that hack will also be fixed in IE9. You're fighting a battle you can't win. If you want pixel-perfect rendering, serve a PNG and forget about Opera Mobile. –  MSalters Jun 23 '09 at 9:58
add comment

There is no CSS solution to disable cleartype. The reason that you could do it in IE7 was a biproduct of how the browser rendered text in elements that used filters. Appearently IE8 handles this better so that you can't use that hack any more (at least not without actually applying some filter).

The use of cleartype is a user choice, and not something that you should impose on visitors. Personally I really like cleartype, and if I visisted a site where it was disabled I would think that the site looked really crappy.

The fact that text is rendered differently in different browsers and different operating systems is something that you have to live with. If you want it to look exactly the same for everyone, you have to make it an image.

share|improve this answer
Why the downvote? If you don't say what it is that you don't like, it's pretty useless... –  Guffa Jun 28 '09 at 8:13
Is it true that IE8 fixes the ClearType "pop" during effects like fade? That would be great. I never understood why IE couldn't get it right when the other browsers seemed to do fine on Windows. –  Nosredna Jul 12 '09 at 19:06
Completely agreed. Why worry about IE7/8/9, when another browser or operating system will do it completely differently anyway? Text on OS X will look nothing like text on Windows will look nothing like text on Linux. Trying to make text display pixel perfect is an exercise in futility. –  deceze Mar 30 '10 at 3:53
add comment

Cleartype sometimes looks stupid in JavaScript/AJAX-based solutions but this topic possible answers to that question why some jQuery based animations look be broken in IE.. so answer is that when JavaScript makes fade effect with opacity (opactiy to 0 from 100 in 1 second duration) then cleartype fonts are removed from element that come to fade out and animation looks bloody shit.

share|improve this answer
add comment

Juliano, body{ filter:none } is a better, cleaner solution. Using opacity causes problems in some situations.

To answer all the ClearType enthusiasts--I like ClearType too. I think it's a great advancement for LCD monitors. Problem is that when IE tries to use ClearType on some specific elements, it looks worse than if you had ClearType disabled. These include elements that are faded into view (using javascript) as well as imported @font-face fonts. If you like ClearType, then you're going to hate what IE does when it tries to use ClearType in these situations...your text looks chunky, fat and ugly.

In these cases, ClearType should be removed if possible to achieve the smooth fonts you guys want.

share|improve this answer
add comment

for some reason positioned elements (anything inside { position: relative } ) -- isn't animated w/ an opacity less than 1.

share|improve this answer
add comment

You can have both an MS CSS filter on an element and still enable ClearType on the font within. Just add a child element and set its css "position" to "relative" and ClearType does not get disabled. Copy the following and try it.

     border:solid 1px black;

<div id="parent">
     <div id="child">This text should always be smooth</div>
share|improve this answer
add comment

There are a lot of people not listening here I feel. @Daniel Sloof said all along he was asking how, not whether or not it's a good idea. IE is a bad idea full stop but the fact is many people still use older versions of it and of those people I would hazard a guess that 90% don't know even know what Clear Type even is - I sure as hell didn't until I started debugging sites. They certainly aren't aware just how rubbish their browser is. If you want to design smooth functioning pages that look as slick in IE as they do in webkit you have to embrace the odd hack from time to time, sure its not pretty but that's life. Most people will be more influenced by a pretty site than pretty code.

@capnhairdo is bob on when he says about @font-face too - have any of you actually tested these fonts with Clear Type enabled in IE7 and 8? If you had you'd realise many are rendered horribly - like what you'd get normally with CT disabled - kind of defeats the object in selecting a nice font in the first place and for many the likes of Cufon and Sifr are not viable solutions. To some of us its ok for things to look mediocre. For me its not, my website sells my image.

When you consider even Apple are forcing IE7 emulation for IE8 on their site it should emphasise that most people really aren't impacted upon by minor deviations from 'recommended practice', instead they notice far more a site that delivers a crap aesthetic and is barely readable. That's not doing anyone any favours and is a problem which can occur with CT on! I strive for as much consistency as possible and couldn't give a stuff what choices an IE user should and shouldn't have in that situation. Microsoft stuffed up by making browsers that tried to deviate from standards, that they themselves have released hacks and fixes for so we have to work with it. If that means taking advantage of a bug to fix an issue then providing it's not impacting greatly on performance, bandwidth, or usability just do it! Life's too short to mess about around quoting standard compliancy, I respect neat code and strict methodology to an ideal but come on, you guys have as good as said it yourselves perfection doesn't exist. Good design and construction comes from a balanced perspective. Here endeth the rant :-P

share|improve this answer
add comment

Your Answer


