Took a closer look at font-icons, SVG and their sharpness.
39 plus ones
Shared publicly•View activity
View 8 previous comments
- Check this out with firefox and choose a size of 130px: http://jsfiddle.net/pawelf/JBbzx/
Yes, the slider don't work, but svg-filter are very powerful.Mar 26, 2012
- Hi Sim, couldn't the 'canvas' object be a solution. Of course transfering vector data to canvas might be overkill and I'm not sure if shadows work fine, but it is widely available and seems quite powerful.Mar 26, 2012
- Canvas is not a good solution for crisp, scalable graphics. It has the same problem as other pixel formats that the article talked about. SVG is the right approach :)Mar 26, 2012
- The Silver bullet will come with an improvement of the img container, the browser should start developing towards a High Density screen. Most of the cases scaling down will work if we were able to do it on the img instead of the background. So our only concern will be to check if the scaling down works or if we require a redo of the low-res icon.Apr 9, 2012
- Hinting is not silver bullet, but can be completely automated http://www.freetype.org/ttfautohint/ with reasonable level of quality. Here are iconic fonts, that i regenerate for fontomas https://github.com/fontello . All with demo pages. Hinting doesn't work with android/ios, but that's not a serious problem with retina displays.Apr 10, 2012
- I've been using Inkscape to create an SVG icon set, then generating WOFF, EOT, and TTF from that via FontSquirrel. In Inkscape, I do the art with a 1024x1024 base canvas size and a 64px grid. That gives me a 16x16 area in which to create shapes, which means that the resulting graphics render crisply at 16px multiples even after being transformed from SVG to the other representations. I use no hinting whatsoever.
Something to be careful with when using icon fonts in a browser - WebKit in particular - is that sometimes fractional pixels mess up the rendering. This can happen when you're doing positioning sometimes with fraction-of-an-em measurement.May 31, 2012