Webkit subpixel aliasing and icon fonts

Using web fonts and @font-face as a way to serve icons to web pages and apps is a very useful technique that allows designers to serve icons that can easily be easily recoloured and scaled. They also have the advantage of being easier to add and change, as you don’t have to create new sprites and CSS to add new icons.

Icon fonts such as Font AwesomeModern Pictograms and Pictos are great sets of pre-made icons that should cover most use-cases. I’ve tried making my own with Inkscape and Font Squirrel but gave up after wanting to throw myself off a roof. You really need pro font-creation software and experience in type design, hinting etc. to make them yourself.

One issue, as mentioned here is sizing at small sizes – font-smoothing and anti-aliasing can mess up thin strokes and lines. Font hinting is the main solution to this, but prompted by @jonathanheron I’d thought I’d take a look at how -webkit-font-smoothing: affects rendering.

The above test is using Modern Pictograms and Safari. subpixel-antialiased is too blurry, antialiased is too thin. If anyone can find a goldilocks solution that would be great. (note: I tried adding a text-shadow but it didn’t seem to have any effect.

However, if you’ve already changed the default font-smoothing then changing it for web font icons might be worth investigating.

(edit: typo. Also, apologies to mobile viewers for the fixed image size – scaling it down would affect the illustration)

Leave a Reply

Your email address will not be published. Required fields are marked *