Fixing That Awful Light-On-Dark Text Rendering on Macs

I’ve been using only Apple products for a couple of years now, and for the most part it’s been a pretty rewarding experience. That said, I know exactly what my least favorite part of the Mac experience is: its light-text-on-a-dark-background rendering in the web browser is gross.

How can there be so much attention to detail everywhere, but when I decide to invert my world with a dark-themed website I get blotchy, leaky type? Blech. Through many hours of experimenting and a happy accident while coding on the train, I stumbled across a solution.

Did you know that if you apply the slightest text-shadow to your text, the rendering looks a hundred times better? Take a look:

Left: normal Mac rendering; Right: using the text-shadow trick

Nothing fancy going on here, just this on the right block:

You can use any color you want, it doesn’t matter as the 0.01 makes virtually invisible.

Of course, your mileage may vary: I’m not sure how efficient it is to throw text-shadows on everything. The more complex your HTML, the more this thing is going to weigh down page-rendering. Also, if you’re using text-shadows (that are made to show up) in certain areas, you wouldn’t want to apply this to everything as it may overwrite those.

Finally, it’s important to remember that this is only going to work in browsers that support text-shadow. Luckily — since we’re only targeting Mac browsers — most of the modern browsers support this. (Firefox 3.0 being the only exception.)

But either way: pretty cool, eh?

Update: And for those that are curious, here’s the same effect with the colors reversed.

Same as above: left is standard, right is adjusted.