The one killer feature icon fonts have over svg

OR: why github icons look like shit now

The reason I write about this now is githubs icons started to look like shit on my screen/system since a week or so. I asked myself why and looked at the source to find out they switched from using an icon font to inline svgs. There is quite some controversy about whether to use an icon font or svgs for icons. Just google for it to find some articles about that topic.

What neither of those articles mentions is the one killer feature that icon fonts have over svg. Actually its two features, but they are a bit related. It is this: hinting and subpixel anti-aliasing.

In english, hinting means that the font rendering will snap straight lines to device pixels, to make sure that fonts always look crisp. And subpixel AA means that the font rendering can boost the horizontal resolution by 3 due to the fact how lcd hardware actually works.

Both of these features are unique to fonts, they do not apply to svg. Hinting can actually distort the proportions somewhat to make sure straight lines snap to pixels, you clearly do not want that for svg. And although subpixel AA may be possible for svg, I have never seen that been done so far.

There is quite some hoops you have to just through to make svg, and especially <canvas> look good and crisp. If you want a line that is 1px wide to look good, you have to place it at a 0.5px coordinate, so when you add the width, it ends up at [0, 1] and therefore looks crisp. You do not want to do that for a 2px line though, because you end up with [-0.5, 1.5] which looks like shit again. It’s hard. Believe me, I’ve been through that already.

The point im trying to make here though is that in order to make svgs look good, you actually have to give up on one key selling point of svgs: scalability! You have to author svgs, specifically for one size to make sure that lines snap to device pixels. Fonts will just do the work for you.

# Caveats

All that I have written about here applies to my personal system, which has a device pixel density of 1. For low dpi screens, hinting matters a lot. The problems I described here are much less of a problem on high resolution screens.

The second thing to note is that content authors do not control font rendering all the way. Sure, there are css properties like font-rendering and friends, but for example the hinting behavior can not be controlled by the author, but is a system wide setting. On my system, I have hinting turned up quite high because I prefer light crisp fonts rather than thick blurry ones. One of the hits you find on google for that topic mentions that icon fonts look blurry compared to svgs. They might, depending on your font rendering settings. On the other hand though, svgs look blurry if lines do not line up with physical pixels, pun intended.

Fact is that font rendering settings also very much depend on your personal taste. Some people for example have font smoothing / anti-aliasing disabled altogether, most likely because they don’t know such settings exist. If I have to use someone elses system, turning on font AA is the first thing I do, because it really hurts my eyes.

I have a also recently seen a developer post a screenshot without font AA that also hurt my eyes really bad. Come on, it’s 2016 for fucks sake! There is absolutely no reason to not activate this single most important feature of a modern desktop!