I wrote about this before. The fonts on our LCD displays are rendered using pixels, each made up of 3 colors: red, green and blue. Instead of using the whole pixel to show a piece of a letter, subpixel rendering actually uses these 3 individual colors separately to increase the effective resolution of the screen. Even though these subpixels are colored, at distance our eyes don’t tend to see the difference, so what subpixel rendering essentially does is give us 3 times more resolution to render fonts, resulting in sharper lines and crisper fonts that are easier to read.
Webkit browers (Safari/Chrome) have an ability to turn off subpixel rendering. This means whole pixels are now used instead of the 3 constituent colors, lowering the effective resolution and making font look blurrier. For some strange reason turning off subpixel rendering has become the latest craze. Even Apple, who have always had a great taste in design seem to be using it all over their site.
Let’s see the difference it makes. Here’s a real example from Apple:
Exhibit A is what Apple currently has. Subpixel rendering is disabled here using a couple of styles (-webkit-font-smoothing, and -webkit-text-stroke-width Note: Apple don’t use it here but text-shadow with at least 1 pixel blur will also disable subpixel rendering). Exhibit B has been tweaked by me. I got rid of those styles, letting subpixel rendering work again.
I think the difference is pretty clear (if you’re on an LCD at least, and not on iDevice, which doesn’t use subpixel rendering). With subpixel rendering the text is stronger, yet crisper. The lines are sharp and defined, and there are much fewer blurry edges. Not only is it more readable, it just looks better.
There is only one main reason to disable subpixel rendering, and that is to display light text on dark backgrounds on OS X. Mac font rendering tends to butcher light fonts on dark backgrounds, making them spill out to the point of being illegible. Disabling subpixel rendering on those fonts will make them thinner, and so more defined. They will still be blurry, but the alternative is in many cases worse.
What about dark fonts on light backgrounds? I don’t know what I’m missing, but I really can’t see why people are doing it. Maybe the fact that the text starts to look like images (Photoshopped text doesn’t use subpixels) has a certain appeal? Maybe they like to get rid of the tiny tint of color that subpixels add? There is really no good reason for doing it and I wish those designers would stop preventing my monitor from rendering fonts the best way it can.