Why Does My Font Look Much Better in IE9

Why does my font look much better in IE9?

Simply put: this is because IE9 introduces a new font rendering engine that is based largely on that seen in WPF's ClearType implementation. Its enhanced engine does a better job at reducing jagged edges, making fonts look smoother and better, especially at large sizes.

Getting into the details — and I mean to get really technical — this breed of ClearType is different from the one seen in the rest of Windows, also known as GDI ClearType (for Windows' GDI graphics library). The old GDI ClearType is the one that Windows versions of most other browsers base their font rendering engines off, which is also the one that makes fonts look really jaggy in large sizes.

The following paragraph from the second link summarizes most of the rest of its content, that explains quite nicely why fonts look smoother in IE9's new engine:

A significant improvement over the previous version of ClearType is the use of sub-pixel positioning. Unlike the ClearType implementation found in GDI, the ClearType found in Windows Presentation Foundation (WPF) allows glyphs to start within the pixel and not just the beginning boundary of the pixel. Because of this extra resolution in positioning glyphs, the spacing and proportions of the glyphs is more precise and consistent.

See, especially, the section on Y-direction anti-aliasing with screenshots for comparison. Another quote:

ClearType in Windows Presentation Foundation (WPF) provides antialiasing on the y-direction level to smooth out any jagged edges.

IE9 bug with increased font-size of css content

You could try using rem instead of em, IE9 supports it, then your sizes will then be relative to the base font size instead of multiplying together. Here's a good explanation.

I would guess the difference here is that IE9 is treating the generated content as a child element while the other browsers aren't, hence the multiplication.

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

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.

Trouble displaying fonts size properly in IE 9

The answer lies within your font-family declaration:

font-family: Bookman, serif;

If Bookman is not found, the browser falls back to the next available font in the chain. In this case you only have one fall back and that is set to serif.

The issue is that Firefox is falling back to its default serif font: Times New Roman, and IE9 is falling back its default serif font (which is different): Batang. You can sort this issue out by changing the declaration to something like:

font-family: Bookman, "Times New Roman", serif;

So now it would fall back to Times New Roman first, and if that font is not available then it will fall back to serif which will be the browsers default serif font.

Disable Cleartype (text anti-aliasing) in IE9

After a few days of searching, I found an MSDN Forums thread which pointed me to a solution here: http://www.softwareninjas.ca/dwrite-dll-wrapper

Follow the instructions on that page and you'll remove anti-aliasing from IE9 (at least the 32-bit version of IE which is the default IE, even on 64-bit Windows 7). I've tested it so far on a Win7 x64 laptop and it worked flawlessly.

Big thanks to Olivier Dagenais who built this. Here's a technical summary of how his solution works.

It's a two-step process. First, you need to disable ClearType in IE via a registry key. This is the same setting which was available in previous versions of IE, but it was removed from the IE UI because it stopped working in IE9.

[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"UseClearType"="no"

Second, now that ClearType is disabled, Windows will fall back to a non-cleartype anti-aliasing solution. Now that fallback anti-alising also needs to be disabled. Quoting from the thread above:

What is left is the font smoothing
(aka sub-pixel rendering), and that is
the "blurring effect" you still see
after turning cleartype off.

In case you were wondering, there is a
way to turn that off too.

The method i used to turn off the
sub-pixel wonder is to build a simple
wrapper for dwrite.dll which
intercepts and forwards calls to the
real dwrite.dll, disabling font
smoothing in the process.

You can download it from: http://www.softwareninjas.ca/dwrite-dll-wrapper

You can find the code at
https://softwareninjas.kilnhg.com/Repo/Open-Source/Group/DWrite-dll-Wrapper

This was a pretty cool hack. Probably somewhat brittle across windows and DirectX releases, but will do the trick for now until Microsoft gets their act together to fix the underlying "can't disable anti-aliasing" problem in IE itself.

It also works for apps which use the IE WebBrowser control (aka MSHTML), so you can control anti-aliasing on an app-by-app basis. It also works for the HTML Help viewer.

Note that the text quality in IE9 standards mode isn't ideal. Specifically, small fonts sometimes have letters sometimes run together without the usual one-pixel space between them. If you render the same page in compatibility mode (or your site uses a non-strict DTD or other non-standards-enforcing DTD), then it looks fine. So there's an additional step for some sites if they want the best aliased text rendering: just view a site in compatibility mode by pressing the compatibility button in IE's toolbar.

@font-face works in IE8 but not IE9

No answer, just confirmation: I have a similar kind of problem. Font works in all other IE versions except IE9, both using IETester and original browser. When changing Document Mode (F12 dev tools) font works. Not how I'd like it though.

Update: With some trickery I managed to get it working. Seems like IE9 is using the .woff version of the font (which I had excluded) over the .eot that I thought it would. I used the @font-face generator from fontsquirrel to get all the different font variations and included them in my project, using the smileyface-local. Did not have to alter my .htaccess file. Now works fine and looks the same in all IE versions:

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }

h1 { font-family: "LucidaFax-bold", serif;}

---

(I even got mad fresh using Mark "Tarquin" Wilton-Jones' text-shadow hack, applying same look to IE versions as rest of the browser world. Old school? Looks great! Was it worth it? Well, learned a lot. ;)

---

Related Topics