Share:
Twitter
Facebook

Web Symbols typeface
November 18, 2011 4:25 PM Subscribe

There are those points in every interactive designer’s career when he becomes fed up with producing the same set of graphics all over again for every website he designs. It could be the social network icons or gallery arrows. Similar for interactive developers that have to slice the same GIFs and PNGs each time the art director asks them to. Until now. Just Be Nice Studio came up with a typeface that includes frequently used iconographics and symbols. Although, the idea is not unique — Webdings and Windings have been around for quite some time — all of them have a lot of unnecessary symbols. Web Symbols is a set of vector html-compliant typefaces, so it might be used in any size, color and browser (okay, mostly — but IE7 for sure).
posted by netbros (37 comments total) 55 users marked this as a favorite

Hover states without sprites! Nice.
posted by hamandcheese at 4:32 PM on November 18, 2011 [3 favorites]

Cool. I don't know why they just didn't put these in the Private Use regions of Unicode though, that's what those are for so that you don't end up with the Webdings/Windings sorta typefaces that end up being gibberish to search engines. (Or, well, it still ends up being gibberish, just not anything that will be mistaken for an obscure language.)
posted by XMLicious at 4:36 PM on November 18, 2011 [2 favorites]

I was curious how the loader glyph (characters 0-7) animates. It looks like there are eight separate characters for each of the individual loader glyph frames, and the demo page uses a bit of JavaScript to recursively call each frame. Clever.
posted by Blazecock Pileon at 4:38 PM on November 18, 2011

I didn't know that animated typefaces were possible. That introduces entirely new ways to be annoying.
posted by roll truck roll at 4:40 PM on November 18, 2011

Ah, nevermind.
posted by roll truck roll at 4:40 PM on November 18, 2011

If you have your Firefox set to disable allowing sites to choose their own fonts all you see is a standard alphabet when you go to the Web Symbols link. Took me a minute to figure out what was wrong.
posted by Babblesort at 4:44 PM on November 18, 2011 [1 favorite]

hmm, all I see is a bunch of letters. I'd say that's a more painful fate for a web designer than having to re-do graphics.

on preview, Babblesort probably has the reason!
posted by vorfeed at 4:45 PM on November 18, 2011

It's awesome that all these symbols are instantly understandable, highly legible, and easily discernible from one another so as to avoid any unnecessary obfuscation.
posted by scrowdid at 4:48 PM on November 18, 2011

I'm a print designer, but I can think of about a bazillion projects that could have used this in the past year. (animations aside, of course)
posted by lekvar at 4:59 PM on November 18, 2011

I like it!
posted by odinsdream at 5:43 PM on November 18, 2011

If you have your Firefox set to disable allowing sites to choose their own fonts .

IF YOU TURN OFF YER JAVASCRIPT AND BROWSE WITH THE LYNX, THE INTERNET DONT WORK.
posted by xmutex at 5:59 PM on November 18, 2011 [17 favorites]

I brought up an idea for this a few years ago and everyone at work looked at me like I was bananas. Bananas.
posted by sweetkid at 6:09 PM on November 18, 2011

"I didn't know that animated typefaces were possible. That introduces entirely new ways to be annoying."

FINALLY! A good replacement for the BLINK tag!
posted by markkraft at 6:19 PM on November 18, 2011 [1 favorite]

This is super cool if you work with ePubs at all. With this license and the OTF fonts you can embed these in a project and style at will.
posted by cjorgensen at 6:19 PM on November 18, 2011 [1 favorite]

"I brought up an idea for this a few years ago and everyone at work looked at me like I was bananas. Bananas."

Well, you were, then. I used to work with a designer who was really formally trained as a typographer including an internship in Holland at a type foundry and he was bananas but he also is really smart and good and he, too, had this basic idea. So, you are probably good bananas, like bananas Foster or similar.

I'm disappointed that in the "social networking" section they neglected to include my fave, intersect.
posted by bz at 6:33 PM on November 18, 2011 [2 favorites]

...how is having them in a font going to help you?

Because these can by styled? But I do get your point. With CSS transitions and such you can probably do a lot more neater things with a font than an image.

I was also trying to figure out what this would do for page weight. A downloaded font over downloaded graphics. Which wins here?
posted by cjorgensen at 6:37 PM on November 18, 2011

If you have to "produce" these images for every site, how is having them in a font going to help you? I mean, if you could just re-use an existing one again, you would do that. And if you can't, the font doesn't apply.

Well, the advantage that jumps out at me is you have, basically, images in an essentially unlimited range of sizes and colors. You can easily make image changes like hovers and rollovers without making sprites, and you can change and rechange them easily.

I think this rocks so hard I might try making my own font. I could think of ten or twelve characters this would come in really handy for.
posted by Benny Andajetz at 6:41 PM on November 18, 2011

This kind of thing may be useful for quickly mocking up a site in HTML, but for real sites this is an accessibility nightmare.

This HTML:



<span>R</span>

yields a picture of a star? What the fuck? Don't do this. Your markup becomes shitty to anyone using an old school browser, disabled people using screen readers, web crawlers, etc.

Yes, you can avoid putting this stuff in your markup via CSS :before and :after pseudo selectors using the content property... but which is easier to understand and debug?



.element_with_webfont {

  content: "d";

}

.element_with_background_image {

  background: url(/images/chat-bubble.png);

}

Hell, even sprites make more sense to me.

And no, I'm not some neck-beard or accessibility guru. I'm a Ruby on Rails developing, MacBook Pro toting quasi-hipster who appreciates clean code that doesn't pull any clever tricks. Coming on to someone else's project where they've set things up using these webfonts is going to be a brainfuck.

See also: Pictos font
posted by adamk at 6:45 PM on November 18, 2011 [19 favorites]

It's awesome that all these symbols are instantly understandable, highly legible, and easily discernible from one another so as to avoid any unnecessary obfuscation.

Indent, outdent and the list types are way too difficult to distinguish from one another. So are the opened and closed lock.

On the other hand, until seeing them laid out next to each other with legends just now, I totally didn't consciously realize that comment and chat were two distinct glyphs with different meanings, but huh, they totally are. That's kind of interesting.
posted by strangely stunted trees at 6:47 PM on November 18, 2011

So, you are probably good bananas, like bananas Foster or similar.

Yeah. I should act on my bananas instead of sitting around like a sad banana.
posted by sweetkid at 6:55 PM on November 18, 2011 [1 favorite]

Needs moar “PILE OF POO”.
posted by scruss at 7:00 PM on November 18, 2011 [2 favorites]

See also: Pictos font

Oooh. While that one isn't free, it does seem to be a lot more complete. Thanks for the link - that may come in handy.
posted by odinsdream at 7:01 PM on November 18, 2011

@odinsdream: glad you took something useful away from my comment.

/shoots self in face
posted by adamk at 7:03 PM on November 18, 2011 [5 favorites]

Nice! Bookmarked. Thanks OP :)
posted by pleasebekind at 7:12 PM on November 18, 2011

Guys, guys - don't get carried away. This isn't a solution. Do not use this. Read adamk's comment please. If you have to, refer to something like the wonderful decodeunicode or the overwhelming Unicode.org.

Read this for more information on why.
posted by june made him a gemini at 7:30 PM on November 18, 2011 [4 favorites]

adamk and june made him a gemini:

You are completely right; this is an accessibility nono .

It's perfect for mocking up, though. And I think it still may be useable with a background-image technique. At the very least you can do your layout and get a decent screenshot of your image at the correct size to work with. I'm gonna play around with it and see what I come up with.
posted by Benny Andajetz at 7:47 PM on November 18, 2011 [2 favorites]

glad you took something useful away from my comment.

Actually, I should have clarified that the cool part was the stock photo set over there, not the font.
posted by odinsdream at 8:04 PM on November 18, 2011 [1 favorite]

appreciates clean code that doesn't pull any clever tricks

Amen, brother. This particular application is not in my wheelhouse so I don't have a critique, but more developers need a clever alarm.
posted by flaterik at 8:23 PM on November 18, 2011

I would not ever, ever use this for its intended purpose, for the reasons outlined above.

What I might do, though, is load it on my own machine to make producing graphics with these icons super-easy in Photoshop. "Hmm, need to make a 'reblog' button here." *keystroke* "Done. I'm goin' to lunch."
posted by webmutant at 9:13 PM on November 18, 2011 [3 favorites]

I'm gonna take this font, open it up in the Shop, style the fuck outta these things and export them as .pngs, which is the only way any professional would use these, for all the reasons already stated.

That said, it's still pretty damn awesome. Most of the free, and many of the paid, stock icon collections are delivered in raster format only, which makes customization a bitch. Having a good, professional looking set of vector icons to work with as a base for creating a custom icon set is a godsend. Icon design and interactive design are very different, and while some people may be skilled at both, I know I'm not.
posted by dvdgee at 9:38 PM on November 18, 2011 [2 favorites]

Just imagine the power of combining this with the BLINK tag.
posted by benzenedream at 9:49 PM on November 18, 2011

Counterpoint: Actually, icon fonts are awesome
posted by MeatLightning at 10:40 PM on November 18, 2011 [2 favorites]

FINALLY! A good replacement for the BLINK tag!

rick

rick

rick

BLINK IS HOW I FEEL INSIDE ALL THE TIME
posted by Mr. Bad Example at 4:18 AM on November 19, 2011 [2 favorites]

I think this is a really terrible idea. It's inaccessible: There's no way to have an 'alt' tag, so it won't work for anyone who needs to make accessible websites. It's also an abuse of Unicode, since you should be using higher order characters like other people mentioned.

IMO this could easily be done server side. You just send a request to generate a 'styled' icon for your site. You could even do it with a CSS sprite. Since you only have to generate it once it's not that big of a deal.

This seems like a 'solution' to a problem that actually makes more work and breaks things.

If you have to "produce" these images for every site, how is having them in a font going to help you? I mean, if you could just re-use an existing one again, you would do that. And if you can't, the font doesn't apply.

Well, presumably you can color these however you want, as well as using the :hover attribute in CSS to change the color/shading. But this could be done with simple, server-side code as well.

---

Speaking of the blink tag... isn't firefox the only browser that supports it nowadays? I don't think chrome does, I have no idea bout safari. IE never did.
posted by delmoi at 6:54 AM on November 19, 2011

Speaking of the blink tag... isn't firefox the only browser that supports it nowadays? I don't think chrome does, I have no idea bout safari. IE never did.

I used one yesterday, so I can report that Firefox still supports it out of the box and WebKit browsers ignore it altogether. You can do

foo {
  text-decoration: blink;
}

in CSS, but clients are allowed to ignore it.

Somehow, this leaves me kind of sad.
posted by brennen at 10:45 AM on November 19, 2011

Hate to suggest it but... needs "font" as a tag.
posted by seanmpuckett at 7:28 PM on November 21, 2011

« Older Guy buys engagement ring. Guy gets dumped. Guy sel... | Tom Samui makes art from junk.... Newer »

This thread has been archived and is closed to new comments

Web Symbols typeface November 18, 2011 4:25 PM Subscribe

Web Symbols typeface
November 18, 2011 4:25 PM Subscribe