Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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 ui.stackexchange.com 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: 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
add comment

1 Answer

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!

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
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
add comment

Your Answer

 
discard

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