font rendering in IE

how to override cleartype

[smallcompany]

I use Firefox on Windows 7 and fonts look fine on my sites. I also have IE9 installed and they look not so good. The weight is kind of increased and my understanding is this is due to something called Cleartype setting for IE in Windows OS. The fonts used are usually Verdana or Arial, plus I tested few more from the web safe list. No change. They always miss that nice crisp look in IE9.

I searched through the web and did not find much of solutions, but many questions about how to fix this. I also found a lot of end users complaining about this, including IE9 where Cleartype cannot be set.

Anyway, is there a CSS based solution that would help fonts rendering equally in popular browsers?

Thanks

[birdbrain]

Hi there smallcompany,

"I also found a lot of end users complaining about this, including IE9 where ClearType cannot be set."

"ClearType" is a user setting for the "Windows OS" and, as such, may be turned on or off.

To find it and make adjustments...

1. click "Start".
   
2. in "Search programs and files" type "ClearType Text Tuner".
   
3. click on the option displayed above.
   
4. uncheck "Turn on ClearType" or ....
   
5. click "Next" to fine tune it.
   
6. have a beer to celebrate. ;)
   

birdbrain

[smallcompany]

user setting

Thanks for that. I did it on my PC long ago. That still does not help with my websites and other folks.

I'm more curious about trying to fix it globally from the server end.

[birdbrain]

Hi there smallcompany,

so, your desire is to manipulate the OS settings of someone's computer?

birdbrain

[edited by: alt131 at 8:15 am (utc) on Oct 14, 2012]
[edit reason] Thread Tidy [/edit]

[smallcompany]

so, your desire is to manipulate the OS settings of someone's computer?

Where in my post did I mention that?

[edited by: alt131 at 9:33 am (utc) on Oct 14, 2012]
[edit reason] Thread Tidy [/edit]

[birdbrain]

Hi there smallcompany,

"...is there a CSS based solution that would help fonts rendering equally in popular browsers?"

No. :(

birdbrain

[edited by: alt131 at 8:36 am (utc) on Oct 14, 2012]
[edit reason] Thread Tidy [/edit]

[alt131]

Hi smallcompany, as birdbrain has said, this is an issue with ie9 and the users OS. Css can't mess with the OS, even if, as responsible coders, we were prepared to try, but text readibility extends into accessibility and usability issues so it's unpleasant to leave the issue at that point.

For those who haven't followed the background, simplistically, the way fonts are rendered was changed from whole-pixel to sub-pixel positioning in ie9, which also lacked a way for users to turn cleartype on/off. The cleartype issue has been addressed, but that still depends on the user. As smallcompany said, there is a lot of discussion, but I think the msdn ieblog [blogs.msdn.com] sumarises quite well. Follow the first link to the cleartype overview article if you like pic's.

So if there isn't a way css can turn cleartype on/off, but it creates a usability issue, then it may be necessary to find ways of making even small improvements in the display. The above article has a highlight box that states:

ClearType font rendering is used in all IE9 document modes; sub-pixel positioning is used only in IE9’s default standards mode. IE9’s compatibility modes—Quirks, 7, and 8—use whole-pixel text metrics.

So the first question is whether the readability issue is better or worse with sub-pixel positioning. If worse, it can be avoided by serving documents in quirks or compatibility mode. (Hopefully not quirks!) But if the target market has a large percentage of users on XP, that may not be as awful as it sounds, and there are a lot of arguments ie9 will never attract a large market share.

Another consideration is font-size as this seems worse at smaller sizes, especially if using pts that do not map to an exact px. Another possibility is to adjust font-weight or font-stretch and even letter- and word-spacing to see if that improves readability. Finally, the issue seems exacerbated by common "web-safe" fonts, so that also creates the option of considering whether to serve a substitute font that does not blur when antialiased.

Overall I think it useful to remember that most users (depending on your target), won't be comparing the site using different browser versions side-by-side. Given "equal" is usually impossible, best aim for usability and "equivalent.

[mozartman]

The issue with font rendering in IE9 is that it uses “Hardware acceleration” by default and it looks like crap. In Firefox it is an option.
This is how I fixed font rendering problem with IE9:

<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
. . . . . . . .
</head>

I hope this helps.