Symbolset - symbol font using clever opentype ligature hack | Hacker News Reader

Symbolset - symbol font using clever opentype ligature hack

symbolset.com

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?

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.

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?

yes, but you cant give other people the ability to compose (use) these fonts...... they aren't yours to license.

They are licensed to you for use in your own apps, to display them, but you don't have the right to pass that on to others - pretty straightforward. Bad legalese, that's all.

So in other words, a developer can display menu/text in their app in this font, but is not allowed to give the user a way to enter their own text and have this font rendered for them. Am i interpreting it correctly?

No, the font can be used in any way inside the app, such as rendering a text box where the user would enter their own text. What's not allowed is the redistribution of the font outside the app. e.g. If your app generated CSS for users to paste into their own sites, then including the font as a @fontface hosted on your server, or as a data-url would not be allowed.

But if I use it in my web-based app it is downloaded automatically (thus passed to others) by the browser. Any user that has a tiny bit of knowledge about technology is simply able to get it.

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

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&...

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.

    .icon {
        speak: none;
    }

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

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/

Support for aria-hidden is still pretty spotty: http://www.456bereastreet.com/archive/201205/hiding_visible_...

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/

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

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

    <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.

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

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

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 :-)

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

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. :)

right. i'm excited to try it.

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.

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!!!

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

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

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.

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.

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.

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.

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!

> 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.

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.

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

That would be because the shim is kicking in in Compatibility Mode. Looking at the CSS it seems everything is set up correctly for IE10, perhaps they haven't implemented it yet in the beta?

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.

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.

Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:13.0) Gecko/20100101 Firefox/13.0

IE6 is not considered a modern browser.

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

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.

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

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

Firefox 8? Thirteen came out last week.

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.

No, but it's still old. There is no excuse to be using an old browser, especially in the age of painless auto-update.

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.

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

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.

Yes, but the word "Zapfino" in Zapfino is one long ligature. That's what the GP was talking about.

I understood that - I wanted to dispel the idea of anything more complex than a ligature.

Doesn't work for Uzbl unfortuately.

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

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

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

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

this one doesn't work so well:

glue abusers suck at checkers

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.

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

Reply on news.ycombinator.com