Image courtesy of Web Treats

Image courtesy of Web Treats

Icons are essential for web design, especially when it comes to navigation. But, a problem comes with these icons. They look great at their normal size on a website, but as soon as you start pinching and zooming on a mobile device, the begin to blur similar to how pictures become more abstract the more you zoom in.

Considering these mobile devices are quickly reaching a standard with Retina or similarly high definition displays which bring attention to every low quality, blurry, or pixelated image and icon on a page, even the tiniest icon with a bad resolution when you zoom in is a big eyesore. Even when you use the Retina optimization trick of using images that are twice as large as normal and displaying them at half their actual size doesn’t protect your icons.

There is a solution however. If you notice when you are using a smartphone or tablet with a high resolution screen, when you zoom in the text maintains its integrity. Even the most scaled letters look crisp and clear. This is because fonts use a different technique to make what are essentially vector graphics in smaller file sizes so that the “image”of the letter rescales as you pinch and zoom. Luckily, your symbols and icons can be turned into these types of “icon fonts.”

The process is mostly painless and there are some clear advantages to icon fonts such as smaller file sizes, and compatibility with all modern browsers, including older versions. There is also the added benefit of not having to keep huge collections of differently sized versions of the same icons.

Web Designer Depot will help you get started turning all your vector icons into web fonts with the use of a free web app called IcoMoon.