OS X Rendering of Light-on-Dark Text (and Site Design)

If you’re viewing this site outside of a feed reader than you’ve undoubtedly noticed that things look a bit different here. That’s because I decided to redo my site design, flipping the contrast from light (text) on dark (background) to dark-on-light. The reason isn’t so much for aesthetics (which I think are served by the switch anyway) but more so due to OS X’s extremely poor handling of light-on-dark text.

A Quick Overview of OS X Text Rendering

The days of blocky, pixelated fonts are generally behind us1. OS X’s Quartz graphic system improves text display by utilizing subpixel rendering, a technique which uses the natural RGB pattern of an LCD screen to improve the quality of on-screen text. Quartz’s subpixel rendering is interesting in that its results differ significantly from Microsoft’s ClearType system (included in Windows XP and turned on by default in Vista). For an anal-retentive switcher — like me — the difference between text on Windows and OS X is immediately noticeable. With the release of Safari 3 beta on Windows, which mimics OS X’s text rendering instead of the usual ClearType, the general computing community has taken note of this difference as well. Joel Spolsky wrote a good piece comparing the two methods, for those that are interested.

Ultimately, I’m a fan of Apple’s implementation, as it does an exquisite job of replicating on screen what text will look like when printed out. If I had to choose between Windows or OS X to write a book on, for example, I would go with OS X hands down, for that reason alone2.

Light vs Dark

One thing Spolsky doesn’t mention is that OS X’s rendering method is optimized for dark-on-light, and reversing that has a very noticeable impact on text quality. Below is an example of OS X rendered text both light-on-dark and dark-on-light (I’ve included a Windows XP CleartType version for comparison):

1simple.png

OS X’s light-on-dark text appears blurrier than the dark-on-light text, whereas there appears no visible difference in quality on Windows XP. This effect on OS X can be seen more clearly by zooming in on the text.

2zoom.png

It’s important to note that for any given letter the number of pixels in both lines is exactly the same, but the light-on-dark line shows outer pixels — like the three pixels off the bottom of the letter “o” — much more so than the dark-on-light letters do. The color fringing for OS X’s light-on-dark text is clearly much more severe than it’s dark-on-light.

While the details of the actual algorithm OS X uses are unknown to me (and let’s be honest, I probably wouldn’t be able to understand it even if it was known to me) it does appear that both the text color and the background color play a role in how OS X does its subpixel rendering. The following image shows two lines of text — the top is black and the bottom white — against grayscale backgrounds (given in HTML hex).

fullgrays.png

The dark-on-light text holds up extremely well regardless of background color. Unfortunately the same cannot be said of the light-on-dark text. The white text gets cleaner (and clearer) as the background gets lighter (until it disappears, that is). This is made even more clear upon zooming into the image (data not shown).

Some Fun with OS X

There is one final thing you can do to fully see the difference at hand, though only Mac users will be able to do this. On OS X you can invert the screen by pressing Cmd-Ctrl-Option-8 3. Do this and then refer back the first screenshot. Note that the previous light-on-dark OS X text, while now dark-on-light in color, still looks the blurrier of the two. The pixels in the light-on-dark text do not invert the same as the pixels in the dark-on-light text, suggesting quite strongly that the algorithm OS X uses favors dark-on-light text.

So?

The take home message here is that if you’re going to use light-on-dark text that’s to be viewed on OS X you need to be extra careful in choosing your colors. While you can just pick whatever colors you want and run with them on Windows, the color combinations need to be optimized for OS X viewers. For light-on-dark text it appears that lowering the contrast between text and background colors will improve legibility within a certain range.

In my case, I was really happy with the background color I’d chosen, which seems too dark to get a good light colored text against on OS X. Rather than lighten the background to a gray I opted to just switch to black text on a white background. We’ll see how long this lasts.

Of course, none of this is a problem for Windows, as all text basically looks equally sorta-OK regardless of colors. Hurray for Windows, I guess.

  1. Well, I agree with John Gruber that sometimes you want a blocky, pixelated font
  2. I should point out that there are numerous other reasons to choose OS X for writing, to the point that it’s ridiculous to not to choose OS X. I’ll probably go into more detail on that at a later date.
  3. This effect cannot be captured via OS X’s screencapture utility, otherwise I’d show you myself.

About Nima

Hi, my name is Nima Yousefi and this is my frickin’ sweet website. I’m not an expert in any particular field, however I do own a computer and an Internet connection, and therefore naturally assume that my random thoughts and opinions are important and that the lives of everyone on Earth would be improved dramatically by reading those random thoughts and opinions.
This entry was posted in Uncategorized and tagged , . Bookmark the permalink.

5 Responses to OS X Rendering of Light-on-Dark Text (and Site Design)

  1. Justin says:

    You really nerded it out with this post, kudos to you sir!!

  2. Dmitri says:

    Yeesh! Why can’t apple just admit that their test rendering/hinting sucks and licence ClearType? Honestly, the blurry mess that is Quartz is one reason why I can’t code on OSX – I just go frigging blind.

  3. Pingback: Text-Shadow Exposed: Make cool and clever text effects with css text-shadow | kremalicious

  4. This always drove me nuts. I thought I was the only person who noticed it, glad to see I’m not alone.

  5. Pingback: Text-Shadow Exposed: Make cool and clever text effects with css text-shadow « madaninfo

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">