Creating Icon font

oldnick
23 Sep 2012 — 9:46pm

It's called “scaling”; scaling is best executed by a professional.

Login or register to post comments

Frode Bo Helland
24 Sep 2012 — 2:22am

I haven’t seen a thread that deals with this, but here’s my workflow:

Initial symbol sketches.
Get the basic dimensions right in relationship to the UPM and the vertical metrics (and the context in which it will be used).
Consider the intended size. Symbols needs to be simplified, exaggerated and unitized to work at small sizes in low resolution environments. Some “hacking” (and by that I mean deviating from a strict pixel grid) is helpful in reducing blur. A test page showing a range of sizes is helpful in this process.
Study how the various rasterizers interpret negative shapes, positive shapes, overshots, diagonals. Keep in mind medium resolution displays like Apple’s Retina.
Convert curves to TrueType.
Windows dependes on TrueType hinting. In addition to that, I often find my self correcting adjustments done for other platforms (#4) with TrueType hinting. This might be the biggest hurdle.

(Autohinting does not work well enough for my standards.)

Encoding. Encoding an icon as another glyph breaks one of the fundamental rules of the web. You should ideally find an equivalent in Unicode, or use the PUA area. What happens if someone doesn’t have the font? What will they see then?
Exporting: FontSquirrel is helpful in generating correct files, and getting vertical metrics right across multiple browsers. If the icon is intended to be displayed large, you might want to consider Postscript outlines (go back to #5). FontSquirrel can’t handle WOFF’s with Postscript outlines, so then you need to use another tool for exporting.
Serving: How heavy are the final files? Too heavy for a website? Can I reduce the file size?

Login or register to post comments

kongur
24 Sep 2012 — 12:34pm

I really appreciated your advice on the workflow Frode!

Thank you so much. We did a test page already. I edited the font file saved as .ttf then my colleague worked on converting it via fontsquirrel to webfonts then created an html sample to display the set. But what struck us were how large pix size we need to use for the icons in order to keep the appearance consistent with our Photoshop comps.

Immediately we decided to work in context with our webfonts (Proxima Nova Soft) and re-test it with the content blocks from the site.

I will re-iterate and work on the file, applying the steps you recommend.

Thank you very much again!

Login or register to post comments

Frode Bo Helland
24 Sep 2012 — 3:06pm

Let me know if you need any help. Espc. with the hinting.

Login or register to post comments

Si_Daniels
4 Oct 2012 — 10:02am

#7 is super important in my opinion. Unicode has thousands of encoded symbols, and mapping your icons appropriately will help ensure meaningful fallback in places where @font-face isn't supported or fails.

Login or register to post comments

kongur
6 Nov 2012 — 8:21am

Many thanks for your reply Si!

I am working on it at the moment whilst researching I've come across another set of icons http://symbolset.com/ which are designed for semantic web in mind.

Login or register to post comments

alexfjelldal
7 Nov 2012 — 6:57am

Just starting to get into icon webfonts – how do I encode the fonts so that my icons end in the PUA?

Login or register to post comments

Karl Stange
7 Nov 2012 — 7:12am

Just starting to get into icon webfonts – how do I encode the fonts so that my icons end in the PUA?

What software are you using?

Login or register to post comments

alexfjelldal
7 Nov 2012 — 11:54pm

@karl Planning to use Inkscape

Login or register to post comments

Karl Stange
8 Nov 2012 — 12:10am

I have no experience using Inkscape but have seen it mentioned here several times recently so will have to experiment. Are you going to move the artwork into a font editing tool to export?

Login or register to post comments

fabien_
16 Nov 2012 — 7:17am

Hi,

@frode frank :
Yous said :
8 .Exporting: FontSquirrel is helpful in generating correct files, and getting vertical metrics right across multiple browsers. If the icon is intended to be displayed large, you might want to consider Postscript outlines (go back to #5). FontSquirrel can’t handle WOFF’s with Postscript outlines, so then you need to use another tool for exporting.

FontSquirrel can't export WOFF with Postscript outlines, but do you know a tool that do it ? I'm working on web icons too and I'd like them do be rendered weel.