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?

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

1 Answer 1

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!

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. Commented 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. Commented 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. Commented 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
    Commented Jan 27, 2011 at 13:19

Your Answer

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