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
If I scale the
23px or whatever number that is not a multiple of
14px, then the icons do not look crisp:
14px, the icons looks crisp:
18px, could be better...
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?
14pxmakes a lot of sense. But I'm still wondering why FontAwesome (pixel-perfect/designed at 14px) scales well..?