Why does my font look much better in IE9?

Question

I use font-family: Myriad; font-size: 40px for some text. I can't believe IE displays the font in the best quality! Much better than Opera, Firefox and Chrome.

How can it be? How can I make text look as good in other browsers as in IE?

Here is a demo:

http://jsfiddle.net/55Ruh/3/

Try this link in all browsers. IE (the newest version, 9) shows the best and most quality text, doesn't it?

Dubose

Answer 1

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.

Sacrament

just a note; Most fonts were simply not designed for screen, but for putting ink on paper under pressure. – Rail

Answer 2

To "make text so nice as in IE in other browsers", you could try text-shadow.

text-shadow:0 0 1px #eee;

Live demo: http://jsfiddle.net/simevidas/55Ruh/5/

Guilford

Use it conservatively though. Some websites use it everywhere (on body) and it's annoying. Perfect for H1's and H2's though. – Reinhard

Maybe this is one good thing about IE's lack of text-shadow support. Or maybe they avoided text-shadow on purpose just because they knew it'd be used for this. Epiphany! (not the browser) – Sacrament