Github’s Octicons
Cameron McEfee wrote a great case study on Github’s process for building Octicons, their new icon font, on the Github blog:
Design is in the details. With all our icons designed, it was time for us to create our font. We decided we needed two sizes of each icon. One size, 16px, would be optimized for its exact size. At 16px the details are limited so every pixel was important. Since the icons were designed for such a small space, they don’t really scale well. To take care of that our second size, 32px, would be designed with more detail so that it could be scaled up for many purposes.
This is a great case study showing the tradeoffs Github made in order to optimize automatic antialiasing when pixel-fitting their new icon font. Unfortunately, because browser font rendering systems are optimized for typography and not icons, using that system to display icons doesn’t work very well (or, at least, very consistently). It’s interesting that they optimized the font to render perfectly at the most common size. Neat hack.
See also: Pixel-fitting.