3

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?

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
jayjay
  • 137
  • 9
  • 3
    There is no single standard for font rendering. – Niet the Dark Absol Oct 24 '13 at 09:47
  • I've had the same issue, nothing you can do about it. It's IEs rendering engine. – Liam Oct 24 '13 at 09:51
  • possible duplicate of [Rendering font differs from IE compared to FF and Chrome](http://stackoverflow.com/questions/9574844/rendering-font-differs-from-ie-compared-to-ff-and-chrome) – Liam Oct 24 '13 at 09:52
  • I searched a bit on SO, where i found this question: http://stackoverflow.com/questions/8721800/different-font-rendering-mozilla-vs-webkit-html5-boilerplate. In one of the answers it says qufon renders fonts the same in every browser, might be worth looking into. – Henk Jansen Oct 24 '13 at 09:54
  • maybe IE just applies the windowswide cleartype-setting to the rendered pages. never tried to turn this off to be honest – Tschitsch Oct 24 '13 at 09:54
  • 1
    If you try to correct this your more than likely just going to end up chasing your tail, there's nothing to say that IE11 isn't just going to move the goal posts (*other metaphors available on request*) – Liam Oct 24 '13 at 10:02

1 Answers1

3

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.

Ilmari Karonen
  • 49,047
  • 9
  • 93
  • 153
  • Thanks for the comments, did you mean the performance in case I've used Cufon? What do most web developers do with this problem? is there a better font type or a recommended minimum font size to use? – jayjay Oct 24 '13 at 11:34
  • Yes, the "horrible performance" was in reference to using Cufón for all text (not that I've ever tried it, but that's what I'd expect). Anyway, what most developers do is just accept such variations in font rendering as a fact, and just try picking font settings that look reasonably nice and readable on most browsers. There'll always be some users with display settings that look horrible to you, and some of them may even like it that way -- for example, some people with poor eyesight actually find that disabling anti-aliasing _entirely_ makes text easier to read for them. – Ilmari Karonen Oct 24 '13 at 11:48