How can I reduce the aliasing that occurs around my custom icon web font when it is scaled?

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?


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

Source : Link , Question Author : eightyfive , Answer Author : Community

Leave a Comment