CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
Adrian
Adrian

Reputation: 2656

Ugly font rendering in Internet Explorer

Is there any workaround to ugly font rendering in Internet Explorer - Windows?

   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

enter image description here

Here is a 100% crop:
Left: IE
Right: FF

Upvotes: 4

Views: 6055

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

The page is very complicated and gives different CSS rules to different browsers. But the font rendering difference is ultimately very simple, and in this sense the question might be regarded as a duplicate of e.g. Font differences between Mozilla Firefox and Internet Explorer.

The difference can be demonstrated in a very simple setup where the CSS code is reduced to the following:

a {
 padding: 1px 2px;
 color: #FFFFFF;
 background: rgb(38, 127, 234);
 font: 13px Arial;
 font-weight: bold;
}

So it’s just Arial Bold in 13px size with a certain blue background and in white color. On IE, some strokes look thicker than on Firefox, due to differences in font rendering algorithms, and there is nothing you can do about it now or in the foreseeable future, except that this may lead you into reconsidering the font and style choices.

The following is what you get (produced on Windows 7; Firefox on the left, IE on the right):

enter image description here

If you magnify it so that pixels becomes discernible, you’ll see rather many differences:

enter image description here

Upvotes: 3

Related Questions