Share

design

3min read

Icon Fonts: Welcome to the Post-Pixel World

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.

letters_vs_icons.gif

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!

font_awesome.jpg

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.

vector_icons.png

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.

pathfinder.png

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).

outline_stroke.png

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

artboards.png

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.

export.png

Font Making!

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

drag.png

Select appropriate icons.

select.png

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

naming.png

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.

unicodes.png

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

download.png

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).

usage.png

Whale App Icons SVG in ZIP file

Whale App Font

Share

Gosia

UI Designer

Did you enjoy the read?

If you have any questions, don’t hesitate to ask!

Did you enjoy the read?

If you have any questions, don’t hesitate to ask!