jayjay
jayjay

Reputation: 137

IE10 doesn't render sharp fonts for my website?

I'm building a website with Dreamweaver, and noticed that IE (I have IE10 on Win8) doesn't render my fonts as sharp as Chrome, see the example picture. Firefox is a bit off as well. this problem is much more noticed when using small bold text.

Here's an example for 14px arial bold:

CSS:

body { 
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}
.bold {
    font-weight: bold;
}

HTML:

<span class="bold">Hello</span>

Maybe the problem is in the browser and not the style, but is there any solution to make the website easier on the eye of the visitor?

Upvotes: 3

Views: 1462

Answers (1)

Ilmari Karonen
Ilmari Karonen

Reputation: 50328

Let's zoom in for a closer look at your examples:

Chrome: enter image description here     Firefox: enter image description here     IE: enter image description here

Notice that Chrome and Firefox are clearly using subpixel rendering (a.k.a. ClearType), while IE isn't. The difference probably comes down to user settings (or the browser / OS default settings, if the user hasn't changed them).

In particular, whereas Chrome and Firefox do their own text rendering, IE uses the default text rendering settings of the OS. Apparently, since Windows 8, ClearType has been disabled by default for Metro-style applications, including IE. Don't ask me why, though.

Anyway, the bad news is that, as a web developer, there's not a lot you can do about this. In fact, you can't even count on subpixel rendering being possible, let alone enabled, for all users — it only works on certain types of displays. You really just have to accept that the details of text rendering are going to vary between users, depending on lots of things like the browser, OS, display hardware and user settings.

Edit: Well, OK, you could try using something like Cufón, but that sounds like swatting a fly with a sledgehammer. In any case, if you used that for all text on your site, I'd expect the performance to be pretty horrible.

Upvotes: 3

Related Questions