Icon Fonts: Welcome to the Post-Pixel World

Two weeks ago Magda explained how to minimize your cutting time by using Photoshop Generator. Today I will show you how to avoid cutting altogether by replacing raster assets with fonts. This tutorial requires a basic level of Adobe Illustrator.

When skeuomorphism has gone with the wind and flat design is becoming more and more popular, we don’t use many gradients and/or drop shadows in interfaces. If we compare simple icons and letters, we can see they have a similar structure.

When icons are simple, solid shapes, we can successfully replace raster assets (like *.png files) with vectors… and that’s the point: fonts are vectors!

Many web designers use Font Awesome (which is a great collection of 479 icons) in their web projects, and it’s working really well because they’re rendered flawless on any screen density and all parameters like size, position, color and so on are easily editable (and we don’t have to prepare a new asset every time we want to e.g. change its color). I’ve been using Font Awesome in several web projects, but I never realized that I could use it in an app (big kudos to Tomek for this hint!).

Tools

First of all we’ll need Adobe Illustrator to prepare vector shapes in proper way. Next we will combine all these shapes into a font.

There are plenty of great tools for creating/editing fonts like Fontlab or Glyphs, but to build an icon set we don’t need such professional software (with setting alternates, ligatures etc). I found an easy, adequate web based tool called Fontello.

Start with Shapes

Draw or import vector icons to Adobe Illustrator; make sure they’re solid, merged shapes.

It’s easy to check: select an item and make sure it’s completely black. If it’s not, use the pathfinder tool (Window > Pathfinder) to merge all shapes together.

If there are some normal lines (with parameters like weight or cap style) in icons, we should outline them to make solid shapes (Object > Path > Outline Stroke).

Now we should distribute all shapes on separate artboards (make sure all artboards are even and all icons are properly aligned).

When we’re done, we can export all artboards to separate *.svg files (checkbox “use artboards” should be checked). Leave the standard SVG Options the way they are. It’s helpful to save them in a separate folder.

Font Making!

Open fontello and drag each icon into the Custom Icons area.

Select appropriate icons.

You can customize the icons’ names, but it’s not necessary.

Go to “Customize Codes” and take a screenshot of the icons with their unicodes - this will be helpful during the implementation. You can also change the unicodes if you need to.

Type in the font name, click “Download webfont” and that’s it: you have your own custom font!

Using the font (in Illustrator)

If you’re working in Illustrator on wireframes or final designs, you can use your custom font there. After font instalation all characters will be easily available via the glyphs preview (Type > Glyphs).