IE9: wrong rendering of Arial (bolder)

Question

I've tested my page in Chrome, FF and IE8 and all the browser render the text this way:

It is defined like:

font-family: 'Arial', sans-serif;
font-size: 0.75em;  
font-weight: bold;

I've tried declaring Arial in different ways, using px instead of em and also define the weight in number (600, 800)... But IE9 still renders is "bolder" than the other browsers:

Any help? Thanks

Answer 1

You might have a different problem, since you said you tried a weight of 600 , but generally, when you tell IE 9 to render Arial as bold, what you end up seeing is not Arial , but Arial Black . This switch will happen for font-weight s of 800 and 900 .

To have a bold Arial in IE 9 without switching to Arial Black , use...

font-family: Arial, sans-serif;
font-size: 0.75em;  
font-weight: 700;

This should also address the same issue in Firefox.

Answer 2

This question has been answered on StackOverflow before. It's a browser issue, IE9 renders fonts different. It uses a ClearType technique called DirectWrite.

In my personal opinion, this isn't a big problem. Websites never look absolutly similiar in every browser. If it really bothers you, it's possible to add IE-Hacks (eg force the browser to use IE8-rendering) but I wouldn't recommend it.

Answer 3

Just to weigh in, you could place a meta tag into your HTML as a quick workaround, which will tell IE9 to emulate IE8, bringing back the original rendering.

To do this, place <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> in your section.

However this will come at the expense of other IE9 features you may need, like the better HTML5 and CSS3 support.

Answer 4

IE in general tends to give me headaches. What I would do is use conditional CSS and remove the bold from the IE css

<!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->

And then define it like this

font-family: 'Arial', sans-serif;
font-size: 0.75em;  

Answer 5

I came across this issue when I accidentally set the font-weight:bold on the body tag. For some reason IE9 rendered all my Arial text bolder than other browsers.