7

I am trying to make my own icons and embed them in a custom Web font. For that, I'm using Illustrator & Icomoon.

I design the icons in a 14x14px square, then I create my Web font using Icomoon and when I see the result in Chrome it looks pixel-perfect but only at font-size: 14px;.

If I scale the font-size to 16px or 23px or whatever number that is not a multiple of 14px, then the icons do not look crisp:

At 14px, the icons looks crisp:

icons at 14px, look crisp

At 18px, could be better...

icons at 18px

I know this is kind of expected, but I noticed that icons like FontAwsome or Glyphicons scale way better than my custom font.

Notes (in Illustrator):

  • I'm using the "Grid"
  • I'm using the "Snap to Pixel" setting
  • I'm using the "Pixel Preview" setting

So I was asking myself if I'm missing some setting in Illustrator when saving the icon as SVG?

Or if I'm missing something in Icomoon, or maybe should I use another program?

How can I make my custom web font able to scale better when not scaling exactly proportionate to its origin size?

Improve this question
3
  • 1
    There might be some font-specific tricks (something to do with hinting maybe?) but failing that, might it work better if you get them pixel-perfect at 16px? 16 is much more divisible than 14 and any whole-pixel increase can be done in 1/2, 1/4, 1/8 etc etc which might be cleaner than the odd fractions from 14
    – user56reinstatemonica8
    Apr 1, 2014 at 14:46
  • Yeah, your point about 16px vs 14px makes a lot of sense. But I'm still wondering why FontAwesome (pixel-perfect/designed at 14px) scales well..?
    – eightyfive
    Apr 2, 2014 at 11:15
  • 1
    just a hunch, but it sounds like the web font is hinting at 14px but no other sizes. Can you change the hinting sizes when creating the fonts?
    – DA01
    May 9, 2014 at 21:20

2 Answers 2

Reset to default
2

It's my understanding this is about Font Hinting. When a font is designed it needs to have specific rules to look great at different size. Most icon-fonts don't have this hinting for lot's of sizes and thus will have 'rounding' errors which give you half-pixel lines. This makes the icon blurry. With correct hinting the icons 'snap' to pixels.

At larger sizes there is usually no problem. IMHO there's not really anything you can do.

In answer to the Chrome fix: Chrome uses the Windows Graphic Device Interface(?) now for fonts, so it looks the same as in IE.

Maybe you should look into an offical font application for creating fonts like Fontographer? That way you can control hinting.'

Improve this answer
0

if you are using windows and chrome, then there is a slight difference in font rendering (compared to OSX and Linux based systems). I'm not entierly sure that this will help you but, check this following link out (the code forces -webkit browsers to use SVG fonts).

FIXED! Font-Face Chrome Rendering

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.