The Era of Symbol Fonts
alistapart.com
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.
alistapart.com
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.
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.
You'd think!
http://www.cardiffcontemporary.co.uk/content.asp (Do try the 'Accessibility' link)
Also: http://explore.bfi.org.uk/ (Keep scrolling...)
It's best to do both, an Icon and a label. Street signs got it right 30+ years ago.
Right now I'm typing this comment in a browser window that has three icons at the top right: a little line like this _, two layered squares []], and an X. What do those do? Obviously, they minimize, 'restore', and close the window. Why 'obviously'? These symbols are not intrinsically 'obvious'. They have become a standard since roughly the days of Windows 3.1. We expect them to be there, and I prefer the icons to a little status bar that says "Minimize, Restore, Close."
Then there are three icons below that, a left-facing arrow (<-), a right-facing arrow (->) and an arrow that loops back on itself in a circle. Again, the meanings are 'obvious', insofar as they are not obvious but are part of the public icon lexicon. It can be said this is "common knowledge" that these represent the 'navigate back', 'navigate forward', and 'reload' functionalities of my browser.
How did these icons become standard? Through initial experimentation, then widespread acceptance and propagation.
The good ideas caught on, and bad ones were lost to the sands of time. There are some crappy icons out there that didn't make it.
Consider a recent example - the share icon[1]. A decade ago this thing didn't exist. Now it's everywhere. It's beginning to become commonplace. These days, many applications have a basic 'share' functionality, and few use an icon that looks different from this. So is it a standard at this point? Maybe.
True, they make no sense. A Mac user who has never used Windows will not understand them. On OS X, the buttons have the colors of a traffic light (red=close, yellow=minimize, green=zoom). Windows users trying a Mac for the first time understand this instantly.
"They have become a standard since roughly the days of Windows 3.1."
No, Windows 3.1 had different buttons [1]. The 'standard' you're referring to was introduced 3 years later, in Windows 95.
"We expect them to be there, and I prefer the icons to a little status bar that says "Minimize, Restore, Close.""
Sure, you can get used to anything, just like you can learn what math symbols and traffic signs mean. That doesn't make it intuitive, quite the opposite.
"Consider a recent example - the share icon"
There is no such thing as 'the share icon'. Looking at the Google Image results, there are tons of different icons that are supposed to mean 'share'. If there is one share icon that I see a lot, it's "arrow jumping out of a window frame" [2].
"Let's consider that it might actually be important to push new icons into the public icon lexicon."
Sure, but that only works if everyone implements them and even then, those buttons will need to be accompanied by text labels for at least five years.
[1] http://www.microsoft.com/typography/ttfinst/ttfinst8.gif
Nope, that's not obvious either. Also a result of convention.
Also, even if people didn't understand the traffic light metaphor, a quick mouseover would clear it up: if you hover over the red button, it turns into a (X), if you hover over the yellow button, it turns into a (–), if you hover over the green button, it turns into a (+).
'Cat, Dog, Rabbit' makes sense, 'Cat, Sonic boom, Carpentry' does not.
"Your app determines the initial size and position of a window, which is called the standard state. If the user changes a window’s size or location by at least 7 points, the new size and location is the called the user state. The user can toggle between the standard state and the user state by clicking the zoom button in the title bar. Follow the guidelines in this section so that users can have the zoom experience they expect."
https://developer.apple.com/library/mac/#documentation/UserE...
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...
Maybe this page will help: http://www.schepers.cc/svg/blendups/embedding.html
Pretty much the only drawback of iconic font is that they're uniform-color (or bicolor if you play with the background)
In a word: hinting. For the same reasons that fonts designed for screen use are hinted, so it can be useful to hint icons that will be displayed at small sizes, and of course using a font format allows that but unfortunately SVG doesn’t.
Other practical reasons can include the ability to apply things like CSS shadow effects consistently to both the icon and any label text next to it, and backward compatibility with older IE versions that don’t fully support SVG.
Of course there are downsides as well. The use of tiny icons as UI elements tends to create more usability problems than it solves unless the icons are immediately recognisable, yet being restricted to the completely monochrome, flat appearance supported by font formats severely limits how distinctive you can make each icon. You also can’t swap out a highly detailed icon for a simplified version of the same idea at smaller sizes/lower resolutions. The article touches on these points, but SVG only really helps with the first one anyway.
So personally I’m a bit of a sceptic about the whole icon fonts idea, but it does have some technical advantages over using SVG icons in the limited niche where the icon font technique applies.
- 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.
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.
To me, using photoshop to design svgs is only going to cause you headaches.
Probably not fit for mainstream use though - hard to maintain, especially if you factor in i18n...