In LA

Because I was switching between Windows and OS X, and was trying to make the text on a web page look nice, I was a little riled up when I wrote my last post about Microsoft Windows XP’s technique of rendering fonts. Now that my mental dust has settled, I still think Windows goes about font rendering in an ass-backwards way, but I can better articulate why that is, and how I think they got there.

I think the Windows font rendering method is designed specifically to make each character as clear and sharp as possible. I think the engineers who designed Windows XP’s typography engine did a great job accomplishing this task. The trouble with engineering is that it’s possible to come up with a great answer to the wrong problem. In my opinion, that is what happened here. The real problem with text on a computer is not clarity or sharpness, but readability.

The challenge of rendering fonts well on low-resolution screens is that fonts are full of curves and thin lines that just don’t line up exactly with the screen’s coarse grid of individual pixels. OS X and Windows both use sub-pixel rendering, so portions of characters that don’t land exactly on a screen pixel are rendered in shades of gray to represent how much of that pixel is covered by the font¹. In order to make each character look as clear and sharp as possible, Windows alters the shape of characters to optimize the amount of each character that lands exactly on screen pixels and minimize the number of pixels that will be rendered as anything but black.

This definitely gives many characters a sharper look in Windows. Many instances of this can be noted in the images from my previous post, one obvious example is that Windows has taken the curved-top, bottom, left, and right edges of all lowercase ‘a’s and has straightened them so that they render as single and sharp lines of pixels at right-angles to one another. In comparison, the OS X rendering of the lowercase ‘a’s looks blurry and curvy.

But the trouble is, characters do not stand alone. Typographers for hundreds of years² have taken great pains to design fonts so that the shape of characters, placed next to one another, produces well shaped words and sentences optimized for ease of reading. A well-designed font leads the eye through words, and the shape of the characters and the spacing between letters is crucial. The Windows font rendering engine changes fonts so thoroughly in order to maximize contrast that it warps them into shapes that barely resemble the original font (again, see those lowercase ‘a’s as a good example of this), and it also shifts portions of the fonts left and right such that the width of characters and the space between characters varies inconsistently, not just within within a line of text but even within individual words (note that in the Windows rendering of the word ‘event’ in the example image, there is a lot of space between the characters ‘e’ ‘v’ ‘e’, but ‘e’ ‘n’ ‘t’ are closer to each other).

The Microsoft engineers I know are very smart people, and I know Microsoft does a ton of usability studies, so how could they get this one so wrong? I suspect the wrong questions were asked. Perhaps test subjects were asked to look at blocks of text and rate their clarity and sharpness, or were asked to look at blocks of text rendered using different methods and were asked to judge the appearance of the text. Although I think the OS X method of font rendering is superior for the criteria that matter, I do think that when placed side by side with a block of text rendered by Windows and asked which block has the greatest clarity, many people would say the text in Windows looks clearer. And of course it does, there’s less gray, and those subjects might also be used to the look of non-antialiased fonts or bitmap fonts (especially at the time Windows XP was in development).

But the more important question to ask would be, “Which font rendering method produces more readable blocks of text”. And the way to test the question would be to take two groups of people with good reading skills who do not frequently read text on a computer, have each group read a 20-page story rendered on each computing platform, and time them. I contend that the OS X group, regardless whether they rated the text as clear or unclear, would finish reading first³. The reason being that OS X renders the fonts much more accurately, and since body fonts are carefully designed to be readable when typeset as words in paragraphs, the Windows tendency to mangle each character out of shape and out of harmony with its surrounding characters in order to maximize the clarity of individual characters turns out to be counterproductive. And butt-ugly IMO.

Ask the wrong questions, and you often wind up with answers like “42″ and font rendering engines like the one built into Windows XP.

1. both OS’s also leverage the fact that LCD displays are high-resolution arrays of red, green, and blue pixels, and render not just levels of gray but colored pixels in order to use this additional resolution –Microsoft calls this technology cleartype and OS X doesn’t give it a name [↩]
2. thousands actually, we still use fonts such as “Trajan”, based on Roman typography [↩]
3. and would probably suffer from less eyestrain, but that wouldn’t be as easy a thing to test objectively [↩]

I’m building a web page right now, and am testing it on a number of web browsers on a few different computing platforms. After staring at type on computer screens for a while, I have reached the conclusion that font rendering on over 90% of computers out there is incredibly bad. Here’s an example:

Which do you prefer? Be honest now. OK, so maybe it’s not fair to compare the rendering of a font on a computer screen with a scan of actual printed type. And maybe it’s wrong to pick on Windows without offering up an example of how text is rendered in Mac OS X or Linux. Surely all computers have huge limitations when rendering the printed word. But actually I’m being more unfair than that. Please take another look at those examples, compare them, then click here to reveal the real captions for the above images to find out where they actually originated. (If you prefer the deceptive captions, you can reload ‘em).

To my eyes, OS X’s type rendering looks much like a scan of a newspaper or book. The weighting of characters is nice and even, and the text is pleasing to the eye and easy to read. Even if you didn’t buy the pretense of the original caption, it’s at least slightly possible to pass the OS X rendering off as something that was actually typeset and printed at high resolution.

Windows XP’s font rendering is an indefensible monstrosity.² It pains me to think that over 90% of the personal computers in the world, in the year 2008, display text in this manner³. The characters in the Windows sample have very uneven weighting, with all corners and pointy details stabbing my eye with a couple pixels of absolute blackness while curves are rendered an anemic gray and straight lines are often reduced down to a single pixel in width (This problem jumps out at me in almost every letter, but can be seen more clearly in the sharp “J” next to the soft “o” in Jonathan, in the oddly sharp lower left corner of the lower-case “a”, and in the weird unevenness of the italics and the numerals). The best that can be said for the kerning is that it is bizarre; Letters are either smashed too close together or separated by chasms, within a single word. Italics are so awful in so many ways that I’m thinking of redesigning my pages to avoid using them altogether –Windows users have to suffer enough with regular text. Some characters look strangely condensed.

A few details to note: compare Windows’s rendering of the word “sweeping” to its rendering of the word “events” (why so much space between the instances of “e” and “v”?), then compare Windows’s renderings of the word “events”, “Rhys”, “1930’s”, “Children” to the OS X versions. And why are the OS X and Windows renderings of these lines so different in their relative lengths?

I’m sure there are compelling-sounding engineering reasons behind Microsoft’s assault on typography-loving eyes everywhere, but the proof is in the pudding. Both of these samples are of the same font, Georgia (designed specifically for Microsoft), and it is either Alanis-ironic or just plain sad that OS X kicks Windows’s ass so soundly at rendering Microsoft’s own. Another few hours of flipping between platforms and I’ll be compelled to file a shareholder resolution to push Microsoft to fix their font render engine, undergo a few sessions of maoist self-criticism, and make a public apology.

Windows, heal thyself, particularly thy crap-ass rendering of typography

1. If only there were a recognized acronym for “rolling on the floor hemorrhaging out my eyeballs” [↩]
2. And I’m being charitable. If you are even entertaining for a moment the idea of defending the crappy font engine built into Windows XP, please first revisit the sample images above and start building up your reserves of purest denial. [↩]
3. actually, it’s worse than that, since most Windows users don’t know to enable cleartype [↩]