

The Era of Symbol Fonts - robin_reala
http://alistapart.com/article/the-era-of-symbol-fonts
For what it’s worth the Timepiece ligature demo appears to have been hacked - I’ve let ALA know and submitted it to Google’s malware checker. Would probably avoid visiting that link for the time being.
======
Samuel_Michon
Using icons in a navbar instead of labels tends to make it harder to use, not
easier.

Look at the example this article uses. It shows a house without a door, a
calculator, a multi-story building and a shopping cart.

The house usually means 'Home', 'Exit', or 'Location'. The shopping cart
usually means 'Purchase', 'Cart' or 'Checkout'. Those are fairly clear. But
then, why would you use a calculator for 'Contact'? And how is the multi-story
building different from the house?

More often than not, when I visit a website that uses symbols in its navbar
instead of text, I need to mouseover to find out what the heck the buttons are
for.

When symbols are used in tandem with text links, I do find it often makes
navbars easier to use, but to replace the text links altogether, the symbols
need to be completely unambiguous – and that's hard to accomplish if your
navbar consists of multiple similar links like 'order', 'checkout', 'cart',
'currency', 'shipping', etc.

~~~
calinet6
Yeah yeah, everyone should know about the perils of "Mystery Meat Navigation"
from the 1996 book "Web Pages That Suck."

I'm sure that the icons were being used only as demonstration here, and that
no one would actually do such a thing in this day and age.

~~~
Samuel_Michon
_"no one would actually do such a thing in this day and age"_

You'd think!

<http://www.cardiffcontemporary.co.uk/content.asp> (Do try the 'Accessibility'
link)

Also: <http://explore.bfi.org.uk/> (Keep scrolling...)

------
potatolicious
I've been away from the frontlines of webdev for a few years now - is there a
reason why we're not all using SVGs yet?

Symbol fonts (even though I use them myself in native mobile apps) seem like a
bridge hack, not a sustainable, long-term thing.

It seems incredibly silly to model images as characters when we already have
the concept of images built into HTML. I'd very happily ditch symbol fonts as
soon as iOS supports SVGs...

~~~
rjh29
If you copy and paste the clock (or if a non-JS supporting screen reader or
search engine encounters it), you get a time such as 12:04:37. That's pretty
cool, and I'd be interested to know if SVG can do something similar.

~~~
potatolicious
That seems to be an _incredibly_ fringe use case to justify the "wrong"
implementation (i.e., modeling images as text when your protocol already has
affordances for images).

------
cbr
I'm skeptical that most websites would see a performance improvement in
switching from images to symbol fonts. Github is doing it close to optimally:

\- custom webfont that has exactly what they need (26k)

\- loaded in js to minimize downloads (only one of woff and eot)

\- served with very long cache lifetime

\- served via cdn

But even then they have the problem that all text display has to wait for the
font to download.

Most sites are going to skip some of these, so I expect the change to symbol
fonts to hurt most websites that try it.

If you do try it, definitely A/B test it to make sure it really is speeding up
pageloads for your users.

~~~
crazygringo
For me, the #1 concern is mobile zooming and retina displays.

No more blurry pixellated edges that suddenly make your site look like total
crap. Instead, it's as sharp as a printed page!

For me, improving page loading speeds are a secondary concern -- and as long
as symbol fonts don't make the page noticeably _slower_ to load, all is good.

~~~
cbr
I agree: the vector sharpness of symbol fonts is their strongest selling
point. I'm just worried that the article leading with "improving performance
is a constant process" is going to make people think symbol fonts will speed
up their pages.

------
iconfinder
I still believe using fonts to show icons is a hack. When we have better
support for SVG files in browsers I believe that will be the most popular way
of displaying icons. Simply because icon fonts are harder to user and edit.
With SVG files the icons are delivered in XML format that can easily be
manipulated by eg. JS. The downside is of course the many server requests it
will require - one per icon.

~~~
robin_reala
Not if you use fragment URLs: a single SVG with all your icons then reference
icons.svg#telephone_icon or whatever. More info at [http://www.broken-
links.com/2012/08/14/better-svg-sprites-wi...](http://www.broken-
links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/)

~~~
cbr
This is Firefox and IE10 only so far: <http://caniuse.com/#feat=svg-fragment>

------
brazzy
Whoa! First time I've heard of using ligatures to render meaningful text as
icons. That's a pretty cool hack!

Probably not fit for mainstream use though - hard to maintain, especially if
you factor in i18n...

------
protomyth
Although we keep saying SVG will fix this, doesn't this seem like SVG has
failed and maybe we need to come up with a new way to do vector on the web?

~~~
lignuist
I think SVG is finally arriving. Look at D3 for instance.

