Wednesday, June 29th, 2011

As noted in my previous entry, I spent some time sprucing up the look of this site. One of the things I spent the most time on was browsing the available typefaces available at Typekit. After a lot of trial and error, I settled on three which I think worked well together and set the right tone for the sort of website I run (a professional designer would undoubtedly disagree; said designer is welcome to give me some free suggestions).

I made a pretty terrible mistake, though. I did all of my dev work on my Mac. Oh, my glorious Mac! A system treasured by designers, publishers, and creative types for decades. A system whose guiding vision is that design isn’t how something looks, but how it works. A system which understands how to render type.

It turns out that Windows is not a system which knows how to render type: a fact I discovered upon loading my site design into my computer at work. I’ve provided screenshots below so that you can look upon the horror (they’re scaled down for display in this blog post; I suggest clicking each one to view the full-sized image). You can see that the type rendering ranges from merely bad to actually unreadable. At the bottom, I’ve included some images from Safari on Windows and iOS to show the difference (I’ve also tested things on the major Mac browsers and a friend’s Android phone, but I haven’t bothered getting screenshots for everywhere that it works correctly; that seems unexceptional to me).

The current state of things is completely unacceptable. Latest versions of Windows (Windows 7) using latest browsers (Chrome) can’t draw letters from a font file to the screen. How do any of these products, browsers or operating system, ship? They’re removing chunks of letters!

Look at the example from IE 8 on XP. In the first link (to the article “How to Actually Make Text Look Interesting”), there’s nothing connecting the cross on the top of the T to its body and the crossbar in the capital A is missing entirely! Chrome on Windows 7 is a little better if only because it tends to consistently remove pixels from the top of letters, so it’s a little easier to read. But only a little.

I think the thing that makes me the saddest (and, honestly, the entire situation is depressing) is that Safari for Windows actually ships with a sane text rendering engine. But, because of some weird Stockholm Syndrome thing from Windows users, Apple has it turned off by default. I’ve included a sample of what it looks like with Apple’s rendering method turned on and it’s night and day. The letters are crisp and clear and all is right with the world.

But Safari is a minority browser on Windows (I don’t use it on either platform) and users who deviate from the defaults are an even smaller minority. So I suspect that even with that small thimbleful of ice water for Windows users, most are seeing a broken web.

And don’t be mistaken about this: this poor excuse for font-rendering is breaking the web. As modern web standards improve to include things like loading font files from a URL and companies like Typekit and MyFonts figure out how to make it legal, typography is going to become a major factor in web design.

But as long as Windows is the dominant platform, web designers are going to have to stick to their list of “web-safe” fonts. This is no longer the list of fonts a site visitor can be expected to have installed; instead, it’s a list of fonts which Windows is no to render in a readable fashion.

It’s simply pathetic.

I understand the IE9 includes some better text rendering support. But I don’t have it installed on any of my systems to find out. But if it does, that really makes the situation worse. Why are the major competitive browsers like Firefox and Chrome shipping without a dedicated rendering engine? There are open source rendering engines: otherwise, Linux wouldn’t work. And yet, these browsers are letting the OS do it.

And the OS is doing it poorly.

And now, I have to figure out what to do about it on this site. I’m willing to let people using IE have a poor experience here: I think you should be using WebKit or Gecko, after all. I don’t think it’s reasonable to take the same approach to anyone using Windows, however. The platform is just too big.

So, I’m stuck with deciding if I should switch the text on my site to use some subset of the new web-safe fonts or set up a windows-only stylesheet for visitors from Microsoft land. Both options are pretty terrible.

But what other choice do I have? Microsoft has ruined something else.

Edit:Upon reflection, I’m being too harsh on Microsoft here. From all accounts, DirectWrite is a useful and modern text-layout technology. I don’t know if it’s as good as CoreText (or worse or better), but I think it’s comparable. But it’s 2011: it’s better late than never, but it’s REALLY late. They’re also not encouraging its use enough (by either making it a drop-in replacement for GDI+ or offering some other incentives for browsers to use it).

I suspect that text rendering on Windows will still be a problem in 2021. And that, I think, can be laid squarely at Microsoft’s feet.

Update (2011-06-30): Per the suggestion of my friend @trrobert, I upgraded my Windows 7 system to Firefox 5. At best, it’s a small improvement. I think the only reasonable way to see text on the web is to use Safari with Apple’s rendering setting or to use IE9. I still find both of these pretty unacceptable.


Firefox 5 on Windows 7

Chrome on Windows XP (VMWare)

Firefox 5 on Windows XP (VMWare)

IE 8 on Windows XP (VMWare)

Chrome on Windows 7

Firefox 4 on Windows 7

IE 8 on Windows 7

Safari on Windows 7 (Default font rendering)

Safari on Windows 7 (Apple’s font rendering)

iOS4 on iPad

iOS4 on iPod Touch
blog comments powered by Disqus