Icons have always been a great usability addition to any website or application, giving the user an at-a-glance idea of what their function would be. Traditionally, these would have been designed in Photoshop, and if the designer/developer was particularly clever they would create them in a pixel map to save additional calls to the server for hover/rollover images. This is a common practice.
However, there is another solution that is a lot more efficient in both time and bandwidth, and is offered by icon fontsets such as fontawesome and Foundation Icons. These are custom fonts that could be presented to the user using the @fontface CSS declaration, and contain icons instead of alphanumeric characters. They can be displayed at any size without any noticeable reduction in quality, just as fonts can be. This in itself is a great solution and offers the designer more flexibility when it comes to defining and changing the icon colour and size without having to open up Photoshop each time; they just need a small change to CSS. With the increasing use of smart phones and HTMLl 5 coded applications, the need to trim down bandwidth use and load times has become even more important. The idea of having to download a complete font set when you are only using a select few of those characters in your application becomes a less attractive prospect.
Fontastic has offered a solution to this problem. You can cherry pick from an array of fonts and icons, mapping them to a character and downloading it as a usable webfont. This means you can trim and optimise your icon set to minimise the bandwidth cost for your website or app. Any increase in efficiency with regards to a website is a major leap forward – quicker load times and more responsive sites mean happier users.
- Making colours count - February 22, 2014
- Facebook opens up origami offering - February 15, 2014
- Hello Ruby - February 8, 2014