Took a closer look at font-icons, SVG and their sharpness.
39 plus ones
Shared publicly•View activity
View 7 previous comments
- Of course, you can change SVG filter easily in CSS: http://jsfiddle.net/pawelf/epZVt/Mar 26, 2012
- 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
- 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