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

http://www.typicons.com/

by vacipr • 14 years ago

86 18 14 years ago

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

typicons4• 14 years ago

Thanks Cristian! I'll consider it.

pedelman• 14 years ago

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.

Groxx• 14 years ago

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

typicons4• 14 years ago

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.

chevas• 14 years ago

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

johanbrook• 14 years ago

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

ahoge2• 14 years ago

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

pbhjpbhj• 14 years ago

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.

typicons4• 14 years ago

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/

ck22• 14 years ago

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?

ahoge2• 14 years ago

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.

ck22• 14 years ago

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.

DigitalSea2• 14 years ago

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.

kartoffelmos• 14 years ago

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

typicons4• 14 years ago

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.

DigitalSea2• 14 years ago

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.

heydonworks• 14 years ago

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

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

Related Stories