Development

Using icons as a Font

Share

In the past, creating a font containing icons only – required a lot of work and skills (if one wanted to do it properly). Currently, it’s much easier because there is a lot of solutions which provide an easy way to do it yourself. I’ll explain them below.

Since RWD (Responsive Web Design) became a standard and as Retina resolution becomes more and more common, I began wondering what to do in order to easily change/edit icons.

Retina displays require each icon to have two sizes in order to always keep edges sharp and clear. There are a few ways to improve icon quality with these displays. One of them is checking the pixel ratio using Javascript and replacing the image with a larger one. Another method is checking using CSS media-queries, which also checks the pixel ratio of the device. When it comes to graphics – Retina provides a better quality of websites and applications.

Another novelty which made me find a good solution for icons is the Responsive Web Design. I think everyone knows what it means, and how many more tests need to be carried out. Depending on the resolution of a device – the graphical layout changes. Each additional size must be generated for each view. The hard part comes now with the large variety of mobile devices. Every year there is a lot of new mobile devices, which is the reason of the large scale of the issue concerning proper coding.

I spent a long time to find the right solution for RWD. One day I ran into such article: Chris Coyier “HTML for Icon Font Usage” , which included solutions allowing to use icons as a Font. Since then I use icomoon.io, which is very easy to use, also for managing your icons for each project. There are a lot of advantages provided by such a Font. One of the most important ones is easy scalability, without losing quality. Another advantage is an easy way of changing the color of the Font by simply adding a style sheet attribute. If you want to make your font more visible – you can add one of CSS3 effects, e.g. text-shadow. With each icon as an image or sprite, after some time the size becomes so big that the performance of your website/application decreases. The problem disappears when using icons as a Font because the “weight” of an icon is very small.

The approach has one small catch: icons must be vector and properly drawn, otherwise the generator will not transform them to a Font. For some people drawing something might seem extra work, because the graphic file just looks nice itself. But in practice it is quite different. Currently, the diversity of desktop and mobile devices requires the designer to work in such a way to make everyone happy, so they can see everything sharp, and not blurred. For achieving blur, you can use a blur effect and not an image of weak quality.

I highly recommend using icons as a Font, as well as any vector graphic one wants to use in their project. Currently, I also started to add a customer’s logo, as it is usually used in a few places and I do not need to use few graphics.