6 ms·

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

86 points by vacipr 14y ago

cristianpascu 14y ago
This is a good looking set. Maybe the creator should consider contributing some of them to the FontAwesome collection. Just a thought!
- typicons 14y ago
  Thanks Cristian! I'll consider it.
pedelman 14y ago
For people interested in treating fonts as vectors, check this out: http://keyamoon.com/icomoon/ 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 14y ago
I get pretty bad AA on many vertical lines, once it zooms in on mouseover. Seems like it needs hinting?
- typicons 14y 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 14y ago
Reminds me of Font Awesome: http://fortawesome.github.com/Font-Awesome/ http://fortawesome.github.com/Font-Awesome/
johanbrook 14y ago
Ironic that the site creator has deactivated zooming on iOS devices, so the font icons' vector capability is in vain.
- ahoge 14y ago
  Well, you get more pixels if your display has 1.5x or 2x DPI.
pbhjpbhj 14y 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.
- typicons 14y 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/ http://creativecommons.org/licenses/by-sa/3.0/
ck2 14y 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?
- ahoge 14y 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.
  - ck2 14y ago
    Good tech info, but the 340px demo here displays perfectly http://fortawesome.github.com/Font-Awesome/#icon/icon-rss 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.
DigitalSea 14y 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/ 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 14y ago
  Typicons renders a whole lot better on my Opera+WinXP setup than Font Awseome, especially on smaller sizes.
- typicons 14y 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.
  - DigitalSea 14y 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 14y 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 http://www.heydonworks.com/article/an-app-icon-font

86 points by vacipr 14y ago

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

typicons 14y ago
Thanks Cristian! I'll consider it.

pedelman 14y ago

For people interested in treating fonts as vectors, check this out: http://keyamoon.com/icomoon/ 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 14y ago

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

typicons 14y 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 14y ago

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

johanbrook 14y ago

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

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

pbhjpbhj 14y 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.

typicons 14y 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/ http://creativecommons.org/licenses/by-sa/3.0/

ck2 14y 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?

ahoge 14y 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.
- ck2 14y ago
  Good tech info, but the 340px demo here displays perfectly http://fortawesome.github.com/Font-Awesome/#icon/icon-rss 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.

DigitalSea 14y 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/ 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 14y ago
Typicons renders a whole lot better on my Opera+WinXP setup than Font Awseome, especially on smaller sizes.
typicons 14y 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.
- DigitalSea 14y 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 14y 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 http://www.heydonworks.com/article/an-app-icon-font