Typicons - free-to-use vector icons embedded in a webfont kit | Hacker News Reader

Typicons - free-to-use vector icons embedded in a webfont kit

typicons.com

86 pointsvacipr18 comments

Reminds me of Font Awesome: http://fortawesome.github.com/Font-Awesome/

What's the license?

Note that Font Awesome has the license and details of the attribution requirements plainly displayed on the front page - "free-to-use" is not nearly clear enough.

Sorry, this should be more clear. (At the moment it is only referenced in the download.) The licence is the Creative Commons Attribution Share Alike. The licence can be found at http://creativecommons.org/licenses/by-sa/3.0/

My opinion is that the fonts are definitely not correctly optimised. I think they require some serious hinting, the anti-aliasing on a lot of the vertical lines is really really bad. Great idea and I applaud the effort, but Typicons need some serious work before I'd consider using them.

As already pointed out, reminds me of Font Awesome: http://fortawesome.github.com/Font-Awesome/ - which did it correctly in my opinion and perhaps Typicons can learn a thing or two from that.

Would love any pointers on the anti-aliasing side. Most of my testing was in webkit on Mac, and still need to make a few optimisations. Would love to here more from you. You can grab me on Twitter @Typicons.

No worries Typicons, good to see you engaging with the community for feedback. Mac's tend to render things much nicer than their Windows counterparts where there are numerous things to consider like system anti-aliasing being different across different browsers and operating systems.

Typicons renders a whole lot better on my Opera+WinXP setup than Font Awseome, especially on smaller sizes.

Ironic that the site creator has deactivated zooming on iOS devices, so the font icons' vector capability is in vain.

Well, you get more pixels if your display has 1.5x or 2x DPI.

Not sure if it's just a problem with this particular demo or font icons in general but they are not anti-aliased for me in Firefox 16 on Windows XP - the rss icon is the best one to examine for the problem.

I guess we are a year away from these being ready for mainstream?

Firefox + XP = the GDI flavor of ClearType, which only does horizontal anti-aliasing. This only looks good with text at small to normal font sizes.

Firefox + Vista/Win7 = the new Direct Draw flavor of Cleartype, which anti-aliases on both axis.

Good tech info, but the 340px demo here displays perfectly

http://fortawesome.github.com/Font-Awesome/#icon/icon-rss

so I suspect antialias is turned off below a certain font size in firefox - I cannot find a modern setting to change it though

all sizes except 340px are a little wonky in Firefox + Windows XP

Same demo in Chrome looks perfect for all sizes EXCEPT 20px and 12px.

So Chrome also has some kind of setting to regulates when it's turned off, but a lower default.

This is a good looking set. Maybe the creator should consider contributing some of them to the FontAwesome collection. Just a thought!

Thanks Cristian! I'll consider it.

For people interested in treating fonts as vectors, check this out: http://keyamoon.com/icomoon/

Also allows you to upload SVG files to create your own fonts. I have had mixed results with the upload, but I plan on using this for most of my upcoming projects.

My two icon font sets (a generic set and a complementary set for app designers) have been hinted using Font Squirrel's algorithm. You may find these of some use: http://www.heydonworks.com/article/an-app-icon-font

I get pretty bad AA on many vertical lines, once it zooms in on mouseover. Seems like it needs hinting?

The mouseover anti-aliasing might be affected by the GPU rendering on your device. Some browsers don't re-render text after a scale transform.

Reply on news.ycombinator.com