How to create symbol fonts with Illustrator CC

How to create symbol fonts with Illustrator CC

Symbol fonts (or Icon fonts) are very trendy in the web design space, because they have a lot of advantages:

  • It’s light and easy to embed
  • It perfectly scales (vector graphics) and can be used on all screen resolutions and screen densities
  • It works on all web browsers, even IE6

More and more websites are using Symbol fonts, but this trick also has some limitations:

  • You need to take care of the accessibility of your page, and of SEO. The ligatures trick exposed in the video can easily solve it.
  • You can only have symbols with one color.

You’ll find a lot of great articles to explain the benefits of symbol fonts, but I’d like to explain in this video how to create a symbol font in Illustrator CC.

Create symbols with Illustrator CC

In Illustrator CC, you can create black and white shapes and save them as SVG. Why in black and white? Don’t forget that you’re designing a font type. The web designer will be able to change the color of your symbol using the CSS style “color”.

To create SVG files with Illustrator CC:

  • Select your symbol
  • Select the artwork tool. At the top, set the dimensions of your artwork to the dimensions of your symbol with “Fit to selected art”
  • File > Save as… SVG
The artboard fits the dimension of my symbol.

The artboard fits the dimension of my symbol.

You can also easily create symbols from bitmap images. The improved “Live trace” engine of Illustrator CC analyzes a bitmap image to create a vector graphic:

  • Import a bitmap image (a JPEG, a PNG file) and place it on your Illustrator artboard.
  • Select your image and at the top of the Illustrator UI, click on the arrow next to the “Image Trace” button.
  • Select the template “Black and White” Logo

icon-font-trace

  • Open the Image trace panel to adjust the Threshold and set the correct contrast for your symbol

icon-font-params

  • Once happy with your design, click on the “Expand” button.
  • By default, Illustrator CC will add a white rectange/background that isn’t required for a symbol font.
  • Double-click on your new vector graphic to edit the content. Select the background and delete it.
  • Now you can save your symbol as SVG.

Use the web app icomoon

The web application www.icomoon.io is the best way to create custom symbol fonts. You can import your own SVG files and map them to characters, or ligatures (don’t forget to enable in the ligatures in the parameters of your fonts). Generate a font and download it. You’ll get a ZIP file that contains a demo html file, a style.css file and a font folder.

In your web page, add a link to the style.css file, and use the custom CSS classes declared in the style.css file to use your symbol fonts:

 

Comments? Feedback?

If you have feedback on icon fonts, feel free to add a comment to this article or tweet me.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

4 Comments

  1. Hi! i just bought a basic plan in icomoon, and i already create my icons and everything but i don’t know how to insert into my Adobe Muse website proyect, could you help me?

  2. The fonts are not rendered correctly on Google Chrome. Any ideas?

  3. Thanks a lot my friend! It’s just what I looking for!

Trackbacks/Pingbacks

  1. 20 Adobe Illustrator CC and CS6 Tutorials - […] How to create symbol fonts with Illustrator CC […]

Submit a Comment

Your email address will not be published. Required fields are marked *