Creating Icon font

kongur's picture

Hi there,

I am looking for sources and suggestions on creating a font consisting custom icons. It will be for an e-commerce web site. Approx. 30, site specific artworks have to be drawn and executed as a webfont. The icon webfont seems a clear solution for the developers who think to use the full advantage of a leaner CSS.

I am using Fontforge since I have started to draw my own projects with it. But I just can't make any sense on the baseline for artworks. The glyph proportions and icon proportions seem to differ greatly.

Any suggestions or threads directing me to a solution are highly appreciated!

Thanks,
Ayse

oldnick's picture

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

Frode Bo Helland's picture

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

  1. Initial symbol sketches.
  2. Get the basic dimensions right in relationship to the UPM and the vertical metrics (and the context in which it will be used).
  3. 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.
  4. Study how the various rasterizers interpret negative shapes, positive shapes, overshots, diagonals. Keep in mind medium resolution displays like Apple’s Retina.
  5. Convert curves to TrueType.
  6. 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.
  7. (Autohinting does not work well enough for my standards.)

  8. 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?
  9. 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.
  10. Serving: How heavy are the final files? Too heavy for a website? Can I reduce the file size?
kongur's picture

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!

Frode Bo Helland's picture

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

Si_Daniels's picture

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

kongur's picture

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.

alexfjelldal's picture

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

Karl Stange's picture

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?

alexfjelldal's picture

@karl Planning to use Inkscape

Karl Stange's picture

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?

fabien_'s picture

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.

riccard0's picture

Related, a comprehensive list of icons-as-webfonts systems: http://listgeeks.com/view/icons-as-webfonts/by/stewf

jennyhilton123-spammer's picture

I will recommend just hire a professional designer.

Military Challenge Coins

Syndicate content Syndicate content