Symbolset - symbol font using clever opentype ligature hack

http://symbolset.com/

by iamaracinghorse • 14 years ago

167 60 14 years ago

symbolset.com

snprbob86• 14 years ago

Very clever. Looks like a nice symbol set too.

Side note: I found the fast moving image carousels to be extremely distracting while trying to read the copy.

trebuch3t• 14 years ago

Agreed. I assume this is font ligature magic, like when you type "Zapfino" in Zapfino?

duaneb2• 14 years ago

Zapfino is actually much more complex than what this is doing. Zapfino has glyph variants - that is, it can display the same set of glyphs multiple ways. Ligatures just combine specific successive glyphs into a new glyph.

crazygringo2• 14 years ago

> On the web, Symbolsets are supported in all major browsers. ...They work in modern browsers..."

Does anybody know exactly what browsers and operating systems? IE6 on XP, for example? There's no chart, which makes me hesitant.

duopixel4• 14 years ago

Seems to work where font-feature works (late versions of Chrome, Firefox and Safari, IE10).

http://caniuse.com/font-feature

It includes a shim for older versions of IE. The shim seems to be able to work for Opera, but it's not loaded. It shouldn't be too difficult to add a Modernizr test for font-feature to fix support for Opera and older versions of modern browsers.

rhplus• 14 years ago

It only works for me in IE10 when Compatibility Mode is enabled.

marshray2• 14 years ago

If by "work" you mean do something interesting when one of the suggested words are typed, I can report it doesn't work on my up-to-date Ubuntu.

crazygringo2• 14 years ago

Thanks, that's the kind of thing I was wondering about. I don't have any idea what OS+versions support OpenType ligatures, and what browsers on those OS's support them when the OS does, and both appear necessary.

rmc2• 14 years ago

IE6 is not considered a modern browser.

pithon• 14 years ago

this one doesn't work so well:

glue abusers suck at checkers

dangrossman• 14 years ago

You only apply the symbol font-face to the words you intend to appear as symbols (but be read as words by screen-readers), not your entire document.

duopixel4• 14 years ago

Perhaps it should also include a non-ligature way of displaying icons. In current accessibility practices, when you place a description after its image you are supposed to include an empty alt attribute.

So say you have social icons...

  ◈ Facebook

  ◈ Twitter

You are supposed to write

  <img alt="" /> Facebook

  <img alt="" /> Twitter

As to cue screen readers to not read out loud filename or the alt attribute.

In this case Symbolset works as the alt property of images, so you would do something like...

  <span class="icon">Facebook</span> Facebook

  <span class="icon">Twitter</span> Twitter

Which wouldn't be right.

tylermenezes• 14 years ago

    .icon {
        speak: none;
    }

duopixel4• 14 years ago

Ah, nice, didn't know about speak: none;

ejdyksen• 14 years ago

Last I checked, aural stylesheets aren't broadly supported.

You'd be much better off using ARIA (which has pretty broad support from browser vendors and assistive technology vendors):

  <span class="icon" aria-hidden="true">Facebook</span> Facebook
  <span class="icon" aria-hidden="true">Twitter</span> Twitter

This keeps assistive technologies from rendering the text (not just screen readers, but Braille displays, etc).

http://www.w3.org/TR/wai-aria/

lloeki• 14 years ago

Looks nice having CSS supporting non-visual presentation. Sounds like a job for @media queries too, so I looked up on the w3c website [0] and there are a bunch of non-visual targets along 'print' and 'screen', like 'aural' and 'braille'.

[0] http://www.w3.org/TR/css3-mediaqueries/

biftek2• 14 years ago

You can also just use Unicode values. See the icons on the blog page.

So something like "ģ" or "\0123" will also work.

PawelDecowski• 14 years ago

    <img alt="" /> Facebook

You’re not supposed to use the <img> element for presentation (which icons are).

Instead, you should use CSS:

    <li class="facebook">Facebook</li>

    .facebook {
        background-image: (...)
        padding-left: (...)
    }

<img> element should be used for graphics that are part of the content: photos, illustrations, etc.

dkulchenko2• 14 years ago

Having trouble figuring out the license (http://symbolset.com/license/), specifically: "You may not under any circumstances embed the licensed fonts into software or hardware products in which the fonts will be used by the purchasers of such products."

By that are they only restricting adding the font as a selectable font for writing (i.e. WYSIWYG editors) or can you not use the font in your own software in any case?

sskylar• 14 years ago

Thanks for your comment, we'll clarify that in the license.

In short, the license covers your use in the software, websites, mobile apps, etc you create. The limitation is to prevent distribution to your software's users. For example, if your product was a CMS, you could embed SS in your app's UI, but you couldn't give it to your users to embed in their own websites without an extended license.

dkulchenko2• 14 years ago

The limitation is to prevent distribution to your software's users.

Isn't that an inherent requirement of using the font in software/websites/etc? If I have, say, an open source CMS, I'd have to ship the font somewhere with the code to be able to use it in the UI, no?

dt7• 14 years ago

Is there a limit to the number of products one licensee can embed the font into?

SomeCallMeTim• 14 years ago

Most font licenses get this badly wrong.

It LOOKS like they're trying to prevent WYSIWYG editors from using this font, but it also looks like they'd prevent me from adding it to an app I was shipping, by virtue of only allowing it to be embedded in a DOCUMENT.

Even most free font licenses get this wrong; they seem to WANT me to use it and redistribute it, but the way it's worded I can't. Sigh.

At least most new free fonts are using OFL now [1].

[1] http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&...

imajes2• 14 years ago

This appears to be the current list of keywords:

  info
  subtract
  delete
  heart
  alert
  checkmark
  replay
  cart
  dropdown
  navigateup
  navigatedown
  twitter
  globe
  view
  user
  creditcard
  desktop
  cell
  search
  link
  reply

biftek2• 14 years ago

We're using a subset of the font that only includes the icons we're using on the site. The distributed font contains much more. :)

imajes2• 14 years ago

right. i'm excited to try it.

Kerrick• 14 years ago

Do you have a preview of all 139 glyphs? I don't care if they're bitmapped and watermarked, I just want to see what's available before I pre-order.

mrspeaker• 14 years ago

Thanks! I was getting a strong "old school text adventure" vibe from this interesting UX choice!

  YOU CAN TYPE TO SEE THE SYMBOLS.
  > facebook
  IM SORRY, I DONT UNDERSTAND 'facebook'.
  > music
  IM SORRY, I DONT UNDERSTAND 'music'.
  > help
  IM SORRY, I DONT UNDERSTAND 'help'.
  > f*#(@&F!!!

StavrosK2• 14 years ago

Well? Did it understand "f*#(@&F!!!"? Don't leave us hanging!

blahedo• 14 years ago

Thanks; I was especially thrown because I tried "home", which was the first example in the example image (!) but it didn't work and I thought I'd misunderstood what was going on. I guess I should have blindly tried others from that list, hoping for a different result. :P

soulclap• 14 years ago

I see 'Svmbolset (heart)s vou' here on Chrome beta. (Lower parts of 'y', 'p' etc. cut off.)

Bjoern• 14 years ago

Doesn't work for Uzbl unfortuately.

widyakumara• 14 years ago

HTML predefined icon-like symbols (W3C Working Draft 29 Jul 1996) http://www.w3.org/pub/WWW/TR/WD-wwwicn.html

thirdsun• 14 years ago

Looks interesting, however I would like to see a Paypal payment option - european customers are less likely to have a credit card and that includes me.

Uchikoma• 14 years ago

Nice, wanted to buy but I'm not entering my CC data into random websites.

metaphorical• 14 years ago

Great concept. But some icons (e.g. twitter) render poorly at 16px.

wiradikusuma• 14 years ago

how is it different than the free Font-Awesome (fortawesome.github.com/Font-Awesome)?

piranha• 14 years ago

Font-Awesome uses a single character for an icon, while this combines a word 'user' into a ligature, which is icon.

worldimperator2• 14 years ago

You might also want to check out FF Chartwell, a font that transforms numbers into charts:

https://www.fontfont.com/how-to-use-ff-chartwell

runn1ng• 14 years ago

Wow, this is so hacky and yet so cool :)

worldimperator2• 14 years ago

It's actually not such a big hack - it just uses technology that is meant to be used for writing systems that have to put together characters as pieces, because there are so many of them, like many asian languages require :-)

jawr• 14 years ago

Site seems very broken for me: http://i.imgur.com/2gLhE.png

User-Agent:Mozilla/5.0 (X11; Linux x86_64; rv:8.0.1) Gecko/20100101 Firefox/8.0.1

quarterto2• 14 years ago

Firefox 8? Thirteen came out last week.

masukomi• 14 years ago

and "v.8.0, offered to release channel users on November 8th, 2011" the fact that FF has no concept of how to use version numbers means a difference of FIVE version numbers is ... well... meaningless. The only thing worth considering when it comes to FF versions these days is time since release, and eight months is not notably old.

kevingadd• 14 years ago

If the social set is going to include common social media icons and logos, does that mean it's going to be free? Charging money for a font that is made out of other people's trademarks doesn't seem like it would be legal unless you got their express permission.

jahewson2• 14 years ago

This probably falls under "nominative fair use", where use of a trademark to simply refer to a product is allowed. Given that the icons are clearly intended to be used as social media buttons, the de facto manner of linking to a social media site, I don't see selling them being a problem. From a copyright perspective, one might also argue that their conversion into a font is "transformative", but that's a much more subjective issue.

georgemcbay• 14 years ago

I'm pretty sure it isn't legal even if they don't charge for it.

While there are nominative fair use rules for trademarks, that defense is generally used to protect simple uses of the trademarked word and not a trademarked graphical logo. Saying your Cola is "Cheaper than Coca-Cola" is fine (if provably true) even though "Coca-Cola" is trademarked, but including the Coke logo with its distinctive typeface and red color is not fine since it arguably implies Coke's endorsement.

It is possible nobody will C&D them over the social set (bad PR), but it is on very shaky legal ground and a C&D/lawsuit is far more likely if they charge for the font since having it be a commercial offering would likely offset a lot of the bad PR.

rmc2• 14 years ago

This is interesting, but I couldn't find out how it works. Can anyone explain what "opentype ligature" is?

StavrosK2• 14 years ago

A ligature is a glyph that is inserted when two or more letters are used. For example, LaTeX inserts ligatures when you type "tt" to make the lines of the two "t"s join. It's a separate symbol that's "activated" when you type the right combination of characters.

Here, the combination "user" has a "user icon" ligature. It's really very simple, and clever.

slurgfest• 14 years ago

So I have a complicated, license-encumbered mechanism for doing what I could do more simply and flexibly with small optimized PNGs?

Sign me up!

Symbolset - symbol font using clever opentype ligature hack

Related Stories