“webkit-font-smoothing: antialiased” sends text on a shitty throwback to the 90s
BBC News is sporting a new design today, and it's very nice. Just one problem - they're using the webkit-font-smoothing: antialiasing trick to make the text look worse in Safari 5 and Chrome. The text in Safari 5 is anaemic and not OS X-like at all, whereas Firefox 4 respects OS X's sub-pixel text rendering technique.
Greyscale antialiasing in text rendering was a powerful development back in the days of the CRT, giving us smooth text without the "jagged edges," but the TFT offered us something with 3 times the horizontal resolution: sub-pixel rendering. JavaScript legend Thomas Fuchs even developed Textorize as a way for you to make graphics with sub-pixel rendered text because it's that much better.
It's crazy to revert to an antiquated CRT-age antialiasing technique when sub-pixel rendering offers increased resolution and legibility on TFT displays (due to the 3x better horizontal resolution). Unless, of course, you're going for that old-school 90s (or Windows) vibe. We might as well revert back to using MPEG1 and GIF files if using antiquated technologies unsuited to modern systems is de rigeur.
Previously, I'd only seen this hack being used by far-out designers and people who didn't know any better, but now that a site as big as BBC News is getting in on the craziness I dare say there'll be a lot of copycats. There's nothing wrong with people who "prefer" this old-school style of rendering, but it's on a par with loving old Nintendo games or scratched up vinyl. There's an aesthetic worth loving there, but it's an antiquated and mostly irrelevant one in terms of being "better."



July 14th, 2010 at 9:21 am
You called it, it totally does look like shit. Won't use it, thanks.
July 14th, 2010 at 10:23 am
I'm with you on this, except it seems some people prefer the softer version: http://maxvoltar.com/archive/-webkit-font-smoothing.
You can override it in your user agent stylesheet, of course (Preferences => Advanced => Style sheet), by adding something like:
body * {
-webkit-font-smoothing: subpixel-antialiased !important;
}
July 14th, 2010 at 10:33 am
I've shied away from personal stylesheets in the past but it seems like a good use. One problem was pointed out to me on Twitter, though.. it seems some people use this hack to get around Safari rendering issues in certain situations. As someone who had problems with TypeKit in this regard, I can sympathize with it.
August 26th, 2010 at 10:29 pm
I find that the kerning setting must be higher for greyscale AA to look good in my OS, so if a website can change just AA type it looks plain bad!!