Font Smoothing

If you’re really into icon fonts, which I have recently become, you may have noticed a tiny storm brewing in the suburbs of the internet. It’s about CSS-specified font smoothing. Quite a nichy topic, one you can live a perfectly good life without ever knowing all about. You may in fact sleep better by not reading on.

Still here? Alright, here’s the deal. WebKit — born of Safari, engine of Chrome — allows webdevelopers to specify how the edges of fonts are smoothed. The modern default font smoothing method is called subpixel antialiasing. It smoothes font edges using quite impressive means, and in nearly all cases it drastically improves the rendering of letters. If you look at the text in a magnifying glass, though, you’ll notice a nearly imperceptible blue haze on the left side of each letter, and a red haze on the right side. WebKit provides a means for webdevelopers to pick which type of font smoothing is applied: subpixel-antialiasing, antialiasing, or none. Handy. Right?

The controversy is the fact that a number of people — smart people — feel that this CSS property is damaging to the readability of text on the web. There are very long articles on the topic. In fact quite recently a Google employee removed the CSS property from Chrome, citing the notion that the browser should render text according to the operating system. There’s just one problem: icon fonts.

Icon fonts are custom-made webfonts that contain no letters, only icons. The purpose is to have fast access to a bunch of icons in a very lightweight and easy way in your webdesigns. Other benefits include the fact that the icons are infinitely scalable because they’re vector graphics, and you can easily apply any color, drop-shadow or even a gradient to each icon using plain CSS. Sounds brilliant, doesn’t it?

The only downside is that an icon font is still technically a font, so the computer thinks each icon is actually a letter, and by default will try to subpixel antialias it. While subpixel antialiasing does wonders to letters, it’ll fuzzy up your icons and make them look blurry. Which is why the -webkit-font-smoothing property was so welcome. Here’s an icon font without and with subpixel antialiasing:

As you can imagine, I’m strongly in favor of not only keeping the font-smoothing property, but in fact expanding it beyond WebKit to both Firefox and Internet Explorer. Icon fonts won’t be a truly viable webdesign technique until every icon looks great on all the platforms.

“But SVG is the future of vector graphics on the web, surely you know that!” — Yes I do. But pragmatically speaking, that future is not here yet. SVG support is still lacklustre, especially when used as CSS backgrounds. More importantly, you can’t easily change the color of an SVG icon using CSS only, or apply a drop-shadow. Yes, drop-shadows are on the road map for SVG, but the way it’ll happen is not pretty. Icon fonts, on the other hand, provide a real-world solution today, which is both flexible and infinitely scalable. So next time you see someone bad-mouthing -webkit-font-smoothing, pat them on the head and mention icon fonts. The more you know.

Responses to “Font Smoothing”

1. Kevin Marks (@kevinmarks) says:

   Showing blown-up pixel grabs like that is highly misleading on what the sub-pixel antialiased icon looks like on screen. take a photo of the actually rendered sub-pixels and post that.

   November 16, 2012 at 02:08

   Reply
   • Kyle Bavender says:

     @kevinmarks I’ll give “misleading”, but perhaps not “highly misleading”. It’s a poor example, but he’s right to highlight the drastic difference. From the author’s link out to the Chromium change thread (something I have been following since the initial change was made) :

     chromium.googlecode.com/issues/attachment?aid=1523040073000&name=Screenshot+of+Google+Chrome.png&token=2_V2wU9UoAS7PuvwqAHqBQHs7wg%3A1353044137764&inline=1

     I am not a subscriber to the theory that icon fonts are the answers to all of our icon needs on the web. But the “don’t use that font-smoothing property at all” crowd needs to consider usage from varieties of scenarios.

     Personally, I consider the option of using “antialiased” from the top down for each of my projects; I am always working with custom type, and damn it, some times I miss knowing that the counters of my “e” glyphs even exist.

     November 16, 2012 at 07:01

     Reply
   • Joen says:

     You have a point.

     Some backstory: the icon in question is a 30 day calendar icon. It’s pixel-grid aligned to be shown at 16x16px, 32x32px and similar multiples (though anything larger than 32px and the vectors will look pretty good regardless).

     The way this icon font was designed was very much inspired by Githubs Octicons. These icons are also pixel grid aligned, and use the -webkit-font-smoothing property to look perfectly crisp when shown at specific font-sizes. Aside from the updated example I have below, a good way to see the difference the smoothing has on icon fonts, is to visit the Octicons page in Safari/Chrome and Firefox. Safari will show them crisp, Firefox: less so.

     Here’s an updated comparison:

     

     Finally, if this post made me come across as a strong proponent of the webkit property, that was wrong. I’m actually very much conflicted on its existance. In fact, I buy every reason I’ve heard from the font experts. I acknowledge that this property is extremely hacky, at best.

     It just so happens that for our particular use-case: showing little icons in the toolbar notification area across WordPress.com, icon fonts with the property applied are completely perfect. We can use CSS to color the icons, change the color on hover and click, add drop shadows, use them at larger sizes on the “View all notifications” page. And as a side-effect, it’s born HiDPI ready, so iPads and retina MacBooks get extra sharpness for free.

     We couldn’t have done this with SVG. We couldn’t have applied colors and drop shadows as frictionless as with this icon font. I wish we could. I hope we can one day. But in this weird transitional phase, I just hope we can render icon fonts crisply.

     By the way, big fan of you on TWiG.

     November 16, 2012 at 09:26

     Reply
     • Mark Jaquith says:

       -webkit-font-smoothing-i-pinkie-swear-this-is-an-icon-font-and-i-know-what-i-am-doing-here: antialiased;

       January 5, 2013 at 08:33
     • Joen says:

       Maybe a media query:

       
@media ( i-pinky-swear-i-know-what-i-am-doing-here ) {
.icon {
-webkit-font-smoothing: antialiased;
}
}


       

       January 5, 2013 at 11:24