
Symbolset - symbol font using clever opentype ligature hack - iamaracinghorse
http://symbolset.com/
======
dkulchenko
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
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.

~~~
dkulchenko
_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?

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

~~~
chii
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?

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

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

        .icon {
            speak: none;
        }

~~~
ejdyksen
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/>

~~~
bill-nordwall
Support for aria-hidden is still pretty spotty:
[http://www.456bereastreet.com/archive/201205/hiding_visible_...](http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-
hidden/)

------
worldimperator
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
Wow, this is so hacky and yet so cool :)

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

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

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

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

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

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

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

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

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

~~~
duopixel
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
It only works for me in IE10 when Compatibility Mode is enabled.

~~~
duopixel
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?

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

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

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

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

~~~
quarterto
Firefox _8_? Thirteen came out last week.

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

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

------
snprbob86
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
Agreed. I assume this is font ligature magic, like when you type "Zapfino" in
Zapfino?

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

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

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

------
Bjoern
Doesn't work for Uzbl unfortuately.

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

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

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

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

------
pithon
this one doesn't work so well:

glue abusers suck at checkers

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

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

