Why does Internet Explorer 9 render Arial stronger than other browsers?

Question

For some reason IE9 renders Arial font bolder than other browsers such as: IE7, IE8, Chrome, and Firefox. I have looked for the reason in the CSS but couldn't find anything wrong.

Another thing that happened is that I had word-spacing of 1 or 2 pixels in most of my website, but IE9 showed it too wide, so I made conditional css for it with normal word-spacing.

You can see the difference in the attached screenshot, and also find it in this temporary link: http://pat.co.il/shirg/matanuziel.com/

Any ideas will be appreciated. Thanks

Answer 1

The problem is the browser, not your site.

Internet Explorer 9 uses sub-pixel positioned ClearType to render text by using DirectWrite. This can cause rendering differences compared to other browsers and is expected behavior. It can cause text to blur slightly more, just as you're seeing.

---

As a side note, you should consider using TypeKit if you want to use non-standard fonts and have them render (resonably) well for all users. Note that there will still be minor rendering differences across browsers, probably on the same order of magnitude as what you're experiencing here.

And as Alan stated, using normalize.css is a good idea.