Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a set of icons as a custom font and am using them in place of an image sprite.

The issue is the icons alias terribly at low sizes; i.e. the size that they are meant to be in the majority of cases (around 24 x 24).

It is an SVG file, so they scale up nicely when the user increases browser text-size, but for the majority of users - viewing the site at default size - the icons render poorly.

What techniques are there to prevent this from happening?

share|improve this question

migrated from Jan 26 '11 at 20:24

This question came from our site for user experience researchers and experts.

Off-topic. This is a question for graphic artists, not UI experts. – Charles Boyung Jan 26 '11 at 16:22
Linked: – e100 Jan 26 '11 at 21:01
Interesting approach (there was a discussion about this in a question on Pro Webmasters), but is there any advantage to using a font instead of a sprite map? And have you considered the accessibility implications of using a custom dingbat font instead of images? – Calvin Huang Jan 26 '11 at 23:52
I'm not familiar with the technique and am confused whether you're embedding a custom font or an SVG graphic. Could you clarify? – e100 Jan 27 '11 at 8:38
e100: It's an SVG font. So it's sort of both. – Calvin Huang Jan 27 '11 at 10:51

I believe what you're looking for is subpixel rendering. It's a way of tricking the eye and the display into rendering images sharply at smaller sizes.

In your case, I would have 2 files, one for < 24px and one for > 24px. A lot of the details you put into a smaller icon don't translate to smaller sizes.

subpixel rendering:

@rogie at Komodo Media does a lot with the differences between super-small and large icon sizes. Download some of his icons for examples of what you should do to make small icons render well.

I hope that helps!

share|improve this answer
Nice finds. Unfortunately, since he's using SVG, there's no subpixel rendering/hinting built into the format (a huge oversight IMO). It's probably better to use something like .otf or just create raster images like the examples you posted. – Calvin Huang Jan 27 '11 at 0:22
There might not be any subpixel rendering, but that doesn't mean you can't modify the svg to work better at smaller sizes, eg remove shadows, simplify gradients, etc. I should have said more about that and less about the subpixel rendering. – MikeNGarrett Jan 27 '11 at 5:23
Well, both approaches are valid. And usually when you see "fonts", you think subpixel rendering. It's just that he chose to use svg fonts instead of the more conventional formats. – Calvin Huang Jan 27 '11 at 8:55
Sorry for downvote - fat fingers - mobile phone.It's now locked, but if you edit, I think I can change my vote? – e100 Jan 27 '11 at 13:19

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.