: 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

Posted in: #AdobeIllustrator #AntiAliasing #Resize #Svg #WebFonts

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:

At 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?

10.02% popularity Vote Up Vote Down

: How to tone an image to with a specific color? Like greyscale, but toned I need this image in a grayscale rgb(82, 82, 74), hex: #52524A: How can I do this on Fireworks or Photoshop?

@Turnbaugh909

Posted in: #AdobeFireworks #AdobePhotoshop #Color

5 Comments

: Keep quality when resizing png icons on document and exporting as pdf? On my CV I have added png icons and resized them When export as pdf these icons lose resolution/quality How do I fix

@Turnbaugh909

Posted in: #Png #Resize #Resolution

3 Comments

: Microsoft Surface VS Drawing Tablet Monitor I have used a drawing tablet before in order to draw stuff onto Photoshop, but I did find it quite awkward and strange looking at my monitor, while

@Turnbaugh909

Posted in: #AdobePhotoshop #DrawingTablet #HardwareRecommendation

1 Comments

: Characters design tools My students are creating 2D artwork of characters for integration in a video game. I'm unhappy with the results, because the bodies are "wrong", but I can't really help

@Turnbaugh909

Posted in: #AnatomyForArtists #CharacterDesign #Drawing #Sketching

2 Comments

Login to post a comment!

2 Comments

Sorted by latest first Latest Oldest Best

@Pope1402555

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

10% popularity Vote Up Vote Down

@Cofer715

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

10% popularity Vote Up Vote Down

Feed

: 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

More posts by @Turnbaugh909

: How to tone an image to with a specific color? Like greyscale, but toned I need this image in a grayscale rgb(82, 82, 74), hex: #52524A: How can I do this on Fireworks or Photoshop?

: Keep quality when resizing png icons on document and exporting as pdf? On my CV I have added png icons and resized them When export as pdf these icons lose resolution/quality How do I fix

: Microsoft Surface VS Drawing Tablet Monitor I have used a drawing tablet before in order to draw stuff onto Photoshop, but I did find it quite awkward and strange looking at my monitor, while

: Characters design tools My students are creating 2D artwork of characters for integration in a video game. I'm unhappy with the results, because the bodies are "wrong", but I can't really help

Login to post a comment!

2 Comments

Back to top | Use Dark Theme