IE9: That thing about fonts

Looks like lots of you are trying out IE9, we’ve had over 2,500 visits from the new beta in the past 2 days, and looking forward to that number growing.  We’ve been fairly impressed with the speed changes, and the UI is growing on us, although we still try to drag that Favorites star back over to the left where it belongs.

We’re also playing a bit with Pinned Sites, you can try out our work-in-progress by dragging our favicon to your Taskbar.  If you’re in Windows 7, you’ll see our Jump List, which has been kind of fun to put together.  Still working on it, so we’ll go through the whole step by step thing when we get it a bit more finalized:

LSjumplist

Perhaps, however, the most immediate impact on how people view the web with IE9 has to do with fonts.  Some sites, well, they just look bad.  We’ve been scouting around for some answers, and Scott Hanselman, as usual, has a pretty clear description of what’s going on:

When a page like mind asks for font-size: 8pt that converts to a 10.667 pixel font size. If you’re using GDI (IE8) rendering that will round up to a nice round 11 pixels, and it’ll look exactly as if I’d said font-size: 11px. Which I didn’t. But, it’ll snap to a pixel, right?

However, if I start to scale a page with that GDI rendered font from 100% up to larger sizes using the Ctrl-Plus hotkey, check out what happens with my text. It’s breaking and wrapping differently at each zoomed text size. Those rounding errors are catching up with me.

With DirectWrite though, I get smooth transformations all the way up and down. If I ask for 8pt, I’ll get 10.667px "exactly" in the sense of "you asked for it."

It’s subtle, but it gives the designer more control. If you really feel strongly about it, ask for font sizes that will snap to pixels at small sizes. I’m noticing only at really small font sizes, myself.

This kind of more accurate font rendering is coming though, so get ready. It’s in Firefox’s betas, and Chrome’s nightlies. I’m sure that someone from the IE9 team who actually knows what they are talking about will do a post on this with WAY more detail soon.

Of course for end users, the bottom line is that some websites don’t look nearly as good in IE9 as they do in IE8, and indeed until this all gets sorted out, the easiest thing to do is just click on the Compatibility View “broken page” icon in the address bar:

brokenpage

Remember that switching into Compatibility View doesn’t turn off any of the hardware acceleration or javascript engine features of IE9 that make it faster, so you won’t be losing much by clicking on the “broken page”.

We seem to be ok here at LiveSide, but of course we can’t leave well enough alone, and we added a new IE9 meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />

which says “if IE8, use IE7 mode, but if IE9, go for it!”  Let us know if we broke anything.