The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

Please Stop Disabling Subpixel Rendering

subpixels close up

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:

subpixel rendering example

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.

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: