Font Smoothing

Webkit, the engine under the Safari and Chrome browsers, adds an interesting property to CSS called “font-smoothing”. You can probably guess what it does by its name. There are three different values you can use for it:

-webkit-font-smoothing: none;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;

The first one will turn font smoothing off, showing your text with jagged sharp edges. The second one is what we see as default font smoothing on modern operating systems. It uses subpixel rendering to increase the apparent resolution of the display, which helps render crispier, sharper text.

The last one is most interesting. It turns subpixel rendering off and instead uses the standard antialiasing technique to make fonts look smoother. Here’s a good article on the three Webkit modes together with some examples.

I’m starting to see more and more sites using Webkit’s antialising font smoothing mode instead of the default subpixel one. I think it’s a pretty bad idea, especially when applied to body font.

See, subpixel rendering is used for a very good reason. Each pixel on the screen isn’t just one little square of light, it’s actually three stripes (sometimes circles or squares) colored red, green and blue. Each of these subpixels can be turned to different intensities, which allows them to be used for extra detail. So instead of using all 3 simultaneously as one pixel, we use these subpixels individually to draw sharper shapes at very small sizes.

The antialiasing mode of font smoothing turns this feature off and instead uses whole pixels to render the fonts. This makes the fonts look thinner, weaker and blurrier because the resolution is now effectively lower than before.

Some say that the standard OS X font rendering is quite thick and strong–that may be compared to Windows (because OS X doesn’t rely on font hinting which aligns fonts at small sizes to individual pixels)–but its use of subpixel rendering also makes it sharp at small sizes. Turning subpixels off just makes it less readable, even if at first the thinner lines seem appealing.

It’s surprising that even the BBC is doing it on their new site. I think it’s a case of using something just because it’s there, and not really thinking through the reasons behind it. Actually, I can’t find a good reason to use antialiasing right now instead of subpixel rendering. I’m not sure that taste is a good argument for this because what you do get are fonts rendered at lower resolution, which are weaker and less crisp than their subpixel counterparts. Don’t sacrifice readability for appearance.