S
Some Random Dude
somerandomdude.com · Personal blog · on HN since 2010
A developer-turned-designer writes about icon design, font-embedded icons, open source, and moving from development into design.
What HN saysHN commenters cite its font-icon articles as an early, practical way to use vector icons as web fonts, and recommend its development-to-design post.
19HN people shared it
7linked it in comments
15stories submitted
276story points
12 years agolast shared
2010people per year2026
Most-shared posts
- 1Making the Transition from Development to Design4 people · 9 points · first shared 2012 · discussion on HN
- 2Web Designers should all be using this idea by now: Font Icons.3 people · 211 points · first shared 2010 · 76 comments on HN
- 3Cue: A different approach towards gestural icons2 people · 10 points · first shared 2011 · 1 comments on HN
- 4Iconic2 people · first shared 2012
- 5Font-Embedding Icons the Right Way—A Legitimate Alternative to Images1 people · 31 points · first shared 2012 · 4 comments on HN
- 6How Open Source Projects Must be Bigger than the Languages They’re Written In1 people · 3 points · first shared 2013 · discussion on HN
- 7Iconic is Now Open Source1 people · 2 points · first shared 2012 · discussion on HN
- 8RSS vs RSS – A Tale of Two Icons1 people · 2 points · first shared 2014 · discussion on HN
- 9Designing Icons Around Privacy1 people · 2 points · first shared 2012 · discussion on HN
- 10Redesigning Gesture Icons – A Proposed System1 people · 2 points · first shared 2011 · 1 comments on HN
- 11Write like you design1 people · 2 points · first shared 2012 · discussion on HN
- 12Why Redesigning the Save Icon is Important1 people · 1 points · first shared 2013 · 1 comments on HN
- 13The Dichotomy of “Simple”1 people · 1 points · first shared 2012 · discussion on HN
- 14Iconic1 people · first shared 2010
- 15Font embedding icons1 people · first shared 2012
What HN people wrote when they linked it
masklinn · 2012-03-18
> I wonder if one could implement vector icons as fonts in order to properly hint them.
That's exactly what is happening these days with custom font embedding having become practical (in web pages): http://somerandomdude.com/2010/05/04/font-embedding-icons/ (that was in 2010, but this thing is really gaining traction these days following the release of "Font Awesome" for Twitter's Bootstrap[0])
In desktop OS, that is in fact a very old technique, that's why the Marlett font exists in Windows [1].
It does have a significant inconvenient though: the icon can only have one color for the glyph and one for the background. This provides a crisp look but lowers the expressivity of the icons. On the other hand, if the color scheme changes for some reason (or can vary from one page to an other), it is very easy to match the icons's color scheme to that of the application.
[0] http://fortawesome.github.com/Font-Awesome/
[1] http://blogs.msdn.com/b/oldnewthing/archive/2012/01/16/10256947.aspx
lgmspb · 2014-06-24
Here is a good link to start from http://somerandomdude.com/2012/01/10/transition-from-development-to-de…
charlieirish · 2012-10-29
Icon(ic) Fonts have come along way recently. These resources may be of use to some.
http://icomoon.io/app/
http://fontello.com/
http://symbolset.com/
http://somerandomdude.com/work/iconic/
Benefits include:
- Consistent Interface Fonts across all modern browsers
- Variety (not the same old bootstrapped site)
- Loading Time (sometimes faster than using images for headlines)
- SEO Friendly (it's just text)
- Better rendering for high resolution devices like retina displays
Disadvantages:
- Loading Time (additional download resource for clients)
equark · 2010-11-19
For monochrome icons, using font-face seems like a better idea than CSS. You get a ton of icons in one cacheable packet and can easily change the color, drop-shadow, opacity, etc using standard css.
http://somerandomdude.com/articles/design-technology/font-embedding-ic…
bryanh · 2010-11-19
Reminds me of: http://somerandomdude.com/projects/iconic/, a set of icons done in @fontface.
rjzzleep · 2014-04-10
Programming, drawing, they're all just tools of the trade. It's like a hammer in the hand of a sculptor. Depending on talent and time (not either alone) you might get different results coming out.
People like to think in absolutes. You're either a designer, or you're engineer. You're either a scientist, or you're a philosopher. This attitude is not only wrong, but also completely contrary to what our "hero's" have taught us.
I myself went to art school when I was a kid, I didn't even realize until I thought about it a while back. Does that make me a designer? Not really. Could I pick it up if I put enough effort and time into it? Almost certainly, but will I?
The other thing is environment. The creativity part comes from the environment you're in. Good scientists have scientists around them that help them brainstorm even without brainstorming(not in the business sense of hey let's sit down and brainstorm, and more in the sense of discussing random thoughts at lunch or w/e). It's no different from Github, dribbble, conferences or a lot of other things that can be considered "environment". Part of why people want to work at google is because of the environment.
I attached a blog post of a pretty good designer that made the transition from being an engineer. [1]
[1] http://somerandomdude.com/2012/01/10/transition-from-development-to-de…
mnicole · 2012-08-21
What sells me on Pictonic? I'm not getting anything from the homepage about why I should choose this over the growing amount of free resources. Constantly adding new ones without charge is great, but there have been rumblings about allowing people to submit their own to FontAwesome and letting the community determine if it sticks.
For those of you interested in making your own like I've been doing recently (ignoring the accessibility issues for now), download Inkscape (free, cross-platform), save your vectors out as SVGs either in Illustrator or Inkscape, import into Inkscape and use their glyph font tool to map to your characters. Take that SVG over to freefontconverter.com and grab the TTF, then bring the TTF over to Font Squirrel to convert for web.
And for those of you keeping score of the nice resources already out there (outside of FontAwesome) -
http://somerandomdude.com/work/iconic/
http://www.entypo.com/
http://thedesignoffice.org/project/modern-pictograms/
http://www.alessioatzeni.com/meteocons/ (weather-related)
http://typicons.com/