By now, you’ve probably heard all about the great benefits of using icon fonts. You may have even used a service like Font Awesome or Symbolset to implement an icon font on your own site. But how do you go about creating an icon font from scratch using your own custom icons and ensure that they render crisply? This tutorial will answer just those questions – providing some fundamental background knowledge as well as the specific steps to create your own custom icon font.
Overview
The process for creating our custom icon font will involve two tools. First, we’ll use Adobe Illustrator to draw our custom, vector icons. Second, we’ll use the IcoMoon App (an online tool for creating icon fonts) to transform those vectors into the font files and css needed to implement our icon font on a website.
It should be noted that there are other ways to create custom icon fonts. You can manually create a font using a font editor like Glyphs combined with Font Squirrel’s Webfont Generator to create the needed web formats and code. You can use Font Custom if you prefer the command line. However, using IcoMoon App is by far the easiest, most powerful, and cheapest (it’s free!) way to create a custom icon font. This is especially true if you want your icons to render crisply – which brings us to the first step of creating our icon font.
Determine Your Crisp Size
What does it mean for an icon to be crisp? Essentially, it means that the icon renders sharply when displayed at a small size. This is determined by how the vector outline of an icon aligns to the pixel grid of the screen when it’s displayed.1 In this case, a picture is worth a thousand words:
Keyamoon’s calendar icon looks crisp and fuzzy at different sizes
As you can see, the icon on the right appears fuzzy because its outlines don’t align to the pixel grid. The icon on the left, on the other hand, appears crisp and sharp as it aligns exactly to the grid.
Is it possible to ensure that the vector shapes of your icon font align to the pixel grid? The answer is yes, but only at one particular size and its multiples. IcoMoon terms this the “Crisp Size.” At 16px, the most common Crisp Size, the icons will appear crisply with a font size of 16px, 32px, 48px, etc.2
To determine the best Crisp Size for your icon font, consider the intended size and usage of your icons. For example, Font Awesome uses a Crisp Size of 14px so that the icons align well next to lines of 14px text (Bootstap’s default font size).
Draw Your Icons
With your Crisp Size determined, the next step is to draw your vector icons in Illustrator. As an example, I’ll use the article end mark I created for A Simple Frame, which has a Crisp Size of 16px.
First, create a new artboard with a size of 512px × 512px (IcoMoon App’s default font em size).3 Next, set the document grid to represent pixels. To do this, divide the artboard dimensions by the Crisp Size. In this case, 512 ÷ 16 = 32. Enter this number in Preferences > Guides & Grid > Grid > Gridline every.
Setting up the grid in Illustrator
Also, set the grid subdivisions to 1.4 This will result in a document perfectly gridded to your Crisp Size.
Custom end mark icon drawn in Illustrator and aligned to the grid
Draw all your icons in this manner, and export them from Illustrator as svg files. Be aware that the name of your svg files will be used as the names of your icons once imported into IcoMoon App (though they can be edited and changed once imported).
Import Icons into IcoMoon App
With svg files in hand, you’re ready to import your icons. Open IcoMoon App, click “Import Icons,” and select your svg files. Your icons will now appear under Your Custom Icons.
IcoMoon App with custom endmark and bullet icons selected
Note that you can change the preview size of your icons. Set this to the Crisp Size of your font to make sure your icons are drawn correctly and appear crisp. Also note that you can edit and delete icons using the respective tools in the menu bar. Edit can be a very helpful tool to nudge your icon a pixel or two within the square grid if a minor adjustment is needed.
Adjust Font Settings
Now it’s time to create a font from your imported icons. Using the select tool, click to select each icon you would like to include in your icon font. Next, click the Font button at the bottom of the page.
Preferences
You should now see a preview of all the icons to be included in your font. As an example, we’ll use the icon font I created for A Simple Frame, which contains only two icons – the previously mentioned end mark and a custom bullet.
IcoMoon App’s font creation screen
The first order of business is to adjust the settings for your font. Click the Preferences button to name your font and set a class prefix.
IcoMoon App’s Preferences menu
The class prefix refers to the css class names that will be generated. By default, it will use the name of your svg file (which imports into IcoMoon App as a tag) prepended with “icon-“. You can also edit the font metadata if you wish.
Font Metrics
Next, click the Font Metrics button and input your Crisp Size in the “Optimize Metrics For” field.
IcoMoon App’s Font Metrics menu
This is very important. If it is not set correctly, your icons will not appear crisp at your Crisp Size. IcoMoon App also allows you to set Font Metrics manually. Though that is beyond the scope of this tutorial, this is a very powerful feature. It allows you to tweak parameters like the relative height of the baseline, which can be helpful in ensuring your icons align to baseline of your text.
Set Unicode Values for Each Glyph
Each glyph of your icon font will now need to be assigned a Unicode value. Although it can get a bit technical, it’s important to have a basic understanding of Unicode to ensure you set up your icon font correctly.
About Unicode Values
Unicode is a map of code points that correspond to characters used in alphabets. For example, the Unicode for a lowercase “a” is “u+0061.” Every font assigns this same Unicode value for its lowercase “a” character. That way, when you press the lowercase “a” key on a keyboard (no matter what font you’re using), a lowercase “a” appears on your screen.
The Importance of Setting Correct Unicode Values
Since icon fonts consist of symbols, it’s important that these symbols aren’t assigned Unicode values reserved for letters. As Chris Coyier points out on CSS-Tricks:
the letters become “content” and a part of the semantics of the document. Or worse, read outloud by screen readers.
Essentially, you want to avoid using Unicode values for letters, because your icons are not letters, and you don’t want them to be read in your html as such. Fortunately, there are Unicode values reserved for commonly used symbols as well as custom symbols. All that’s left now is choosing the right ones.
How to Choose Correct Unicode Values
If your icon maps to a commonly-used symbol that already has a Unicode value, it’s best to map it there. IcoMoon App makes this easy to do. To see if you can find a Unicode match for your icon, click the menu arrows on your glyph and select “Symbols” from the list.
Opening the symbols menu
This opens up a grid of Unicode symbols. Find the one that matches your icon, and select it. For example, I found a match for my end mark symbol under “Geometric Shapes”.
Try to match your icons to appropriate Unicode symbols
If you can’t find a match for your icon, have no fear. There’s a block of code points in the Unicode map reserved for custom characters and symbols. It’s called the Private Use Area (pua) and ranges from U+E000 to U+F8FF. IcoMoon App also makes it easy to assign these values (which are assigned by default) by selecting “pua” from an icon’s menu. With all Unicode values assigned, you’re now ready to download your custom icon font.
Download Fonts and CSS
Click the download button to download your icon font package. Included in the downloaded files are everything you need to implement your new icon font. The Fonts folder contains all of the different font file formats required by different browsers. It also contains a .dev.svg file that can be imported back into IcoMoon App to edit your icon font at a later date.
The style.css file includes the @font-face rule that references all of the font files in the fonts folder. Additionally, it contains the css for two different methods of implementation – data attributes and class selectors. In HTML for Icon Font Usage, Chris Coyier explains in detail the implementation of the data attribute method and why he favors it over using class selectors.
Also included in the downloaded package is an index.html file that displays a preview of your font as well as a .js file for supporting IE7.
Start Using Your New Icon Font
Now that you have all your files and know what they do, all that’s left is to copy the files to your own server and start using them (just make sure to update your @font-face rule to point to the location of the fonts on your sever).
Speaking from experience, IcoMoon App makes the process of creating custom, crisp icons accessible, easy, and fast. It simplifies and automates much of the process while also providing the ability to tweak advanced settings and parameters. It’s definitely the best tool out there right now for creating custom icon fonts.
-
This is only an issue on standard-resolution displays (72dpi). At small sizes, there simply isn’t enough resolution for the icons to render well. On high-resolution displays, like the retina display on an iPhone, it’s a nonissue. There’s so much resolution that it really doesn’t matter how the icon aligns to the grid. ↩
-
As font-size increases (and thus the number of pixels), it matters less and less if your font-size is a multiple of the base Crisp Size. ↩
-
IcoMoon App’s default em size can be changed in the Font Metrics menu. For more information about font em sizes, see Pixel Perfection on the Glyphs blog. ↩
-
Some icons in your icon font file may need to be optimized for a larger size than your Crisp Size. A common scenario for this is embedding a logo as a glyph in your icon font. To do this, you can adjust the number of grid “subdivisions” in your Illustrator file to the factor of magnification you intend to use for your finished icon. So if your subdivisions are set to “2”, every grid subdivision would represent a whole pixel when the font is displayed at twice its base Crisp Size. ↩