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?

  • Off-topic. This is a question for graphic artists, not UI experts. – Charles Boyung Jan 26 '11 at 16:22
  • Linked: graphicdesign.stackexchange.com/q/265/70 – 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. w3.org/TR/SVG/fonts.html#SVGFontsOverview – 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: http://www.typophile.com/node/60577

@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. http://www.komodomedia.com/download/

I hope that helps!

| 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
  • 1
    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 clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy