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.
For what it’s worth the Timepiece ligature demo linked to from this article 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.
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.
What's your toolchain for creating svgs? Seems like every time I look at doing this I still have to download some weird third party shareware to convert my photoshop stuff to SVG.
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...
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.
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).
With images you can use alt-text to support screen readers and search engines. I would be surprised if someone tried to copy-paste a clock, and if they did I think they would be expecting to get the picture and not a text representation of the time.
Neither does Android. But for both Android and iOS there are libs that can convert SVG into usable objects.
For example: https://github.com/SVGKit/SVGKit
Individual SVG files take more bandwidth and requests than a single "iconic font" (SVG fragments are pretty much unsupported), and fonts can be hinted (though I've seen pretty little hinting for now) in order to alter the detail level as the font size increases.
Pretty much the only drawback of iconic font is that they're uniform-color (or bicolor if you play with the background)
is there a reason why we're not all using SVGs yet?
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.
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.
A lot of UI designers are doing this actually. They got the idea from using Facebook, Twitter logos with no labels. It doesn't work for icons that aren't commonly used.
To play devil's advocate, let's consider that it might actually be important to push new icons into the public icon lexicon.
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.
"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'."
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.
"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."
Nope, that's not obvious either. Also a result of convention.
It does require people to know what a traffic light is, and those colors are a convention, that's true. However, if they know what a traffic light is, and if they've used Windows before, no explanation is necessary. There are plenty of things that switchers have difficulty with (like the fact that 'minimize' and 'zoom' behave differently in OS X than they do in Windows), but this isn't one of them.
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 (+).
In isolation, you could say Windows and OS X both use an X on a red background (on mouseover). However, we're not talking about just one button and one hover state, it's part of a set of three (plus hover states).
'Cat, Dog, Rabbit' makes sense, 'Cat, Sonic boom, Carpentry' does not.
Highly amusing. In my experience, even Mac users do not know what the green button does. I've heard people say, "Every time I click it, the size of the window changes somewhat, but I'm not sure in what way.".
Yes, that confuses a lot of people. 'Zoom' toggles between the 'standard state' and the 'user state'.
"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."
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.
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.
44 comments
[ 6.3 ms ] story [ 133 ms ] threadTo me, using photoshop to design svgs is only going to cause you headaches.
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.
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.
[1] https://www.google.com/search?q=share+icon
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
[2] http://bit.ly/10IELWe
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...
- 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.
Probably not fit for mainstream use though - hard to maintain, especially if you factor in i18n...