2

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?

Improve this question
5
  • Off-topic. This is a question for graphic artists, not UI experts.
    – Charles Boyung
    Jan 26, 2011 at 16:22
  • Linked: graphicdesign.stackexchange.com/q/265/70
    – e100
    Jan 26, 2011 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, 2011 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, 2011 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, 2011 at 10:51

1 Answer 1

Reset to default
2

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
4
  • 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, 2011 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, 2011 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, 2011 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, 2011 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.