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

  1. 1
    Making the Transition from Development to Design
    4 people · 9 points · first shared 2012 · discussion on HN
  2. 2
  3. 3
    Cue: A different approach towards gestural icons
    2 people · 10 points · first shared 2011 · 1 comments on HN
  4. 4
    Iconic
    2 people · first shared 2012
  5. 5
  6. 6
  7. 7
    Iconic is Now Open Source
    1 people · 2 points · first shared 2012 · discussion on HN
  8. 8
    RSS vs RSS – A Tale of Two Icons
    1 people · 2 points · first shared 2014 · discussion on HN
  9. 9
    Designing Icons Around Privacy
    1 people · 2 points · first shared 2012 · discussion on HN
  10. 10
    Redesigning Gesture Icons – A Proposed System
    1 people · 2 points · first shared 2011 · 1 comments on HN
  11. 11
    Write like you design
    1 people · 2 points · first shared 2012 · discussion on HN
  12. 12
    Why Redesigning the Save Icon is Important
    1 people · 1 points · first shared 2013 · 1 comments on HN
  13. 13
    The Dichotomy of “Simple”
    1 people · 1 points · first shared 2012 · discussion on HN
  14. 14
    Iconic
    1 people · first shared 2010
  15. 15
    Font embedding icons
    1 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
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/

Keyboard shortcuts

/Search
j kNext / previous blog
EnterOpen selected blog
vVisit the blog site
fFollow / unfollow
lSwitch grid / list view
dSwitch dark mode
g hHome
g pTop posts
g tTopics
g fFollowing
g lLiked
g yHistory
g qFAQ
EscBack / close