Icon fonts are monochromatic images which are incredibly useful, scalable and easy to implement. In this post I’m going to talk about why we began using them, why you should use them, and how to do so.
I was introduced to icon fonts last year, and initially I was reluctant to pay attention to them because I’d spent so much time learning how to create and use icon sprites, and then how to combine them into a single sprite sheet. Plus, with icon fonts only being able to support monochrome images I thought it best to keep all of my sprites in one place, rather than segregating them into multicoloured icon sheets and monochromatic font icons.
However, they quickly became part of the solution to another problem, which was how to present icons and images nicely on high-resolution screens (such as retina displays) when traditional graphics were showing a noticeable drop in quality.
We at Made, and indeed the entire industry, are seeing a noticeable shift towards mobile in terms of what devices visitors are viewing our projects on, such that we can’t afford not to go the extra mile on details like these. That notion, coupled with the fact that the “flat UI” design approach has become increasingly popular, has meant that icon fonts are now an essential part of anything we work on.
Benefits
Since icon fonts are vector based, like regular fonts, they’re much better equipped to handle being scaled up. Last year we implemented icon fonts in the Byron website [url], and the below side-by-side comparison is taken from there, as viewed on an iPhone 5.
Additionally, the font files themselves are tiny, typically less than 10kb on an average project, and all icons are contained within a single file, allowing you to keep your HTTP requests to a bare minimum and your page load speed down.
It’s worth looking at Chris Coyier’s demo to get a really good idea of what can be done with icon fonts as far as scaling them up and down, changing colours and adding drop shadows.
Adding Them To Your Project
To create the font files, you’re going to need to use one of the various tools out there that do just that. There are several online apps, but I was introduced to the whole concept of font icons via IcoMoon, and the user experience there is very intuitive, with tons of free icons to choose from (along with a few premium bundles), and the ability to save different sets of icons to your user account comes in very handy when working on projects where new icons are added at a later stage.
IcoMoon also gives you the ability to upload your own vector-based images (aka SVGs) and have them converted to fonts, which is extremely useful on projects where the design demands custom icons that can’t be found online.
If you’re not a convert already, try using icon fonts in your next project and I’m sure you soon will be.
About the Author
Software Engineer at Made Tech
