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.

 
596
Kudos
 
596
Kudos

Now read this

Pixel-fitting

Note: This article contains non-retina images, which are not pixel-fitted. The irony is not lost on me. In the Markdown Mark repository on Github, I had initially included only 12 static PNG images of the mark at different specific... Continue →