A other thing to consider when designing your icons is localisation. One icon may mean something to us in the western world but is meaningless to a person in an Asian country.
Sadly there are some problems with using fonts not mentioned…
1. Font hinting – Google Chrome on Windows does not do font-hinting correctly meaning that your lovely symbols can start looking blocky. Maybe this will be fixed in a future release?
2. Example – http://timepiece.inostudio.de/ does not work, appears to have some bing ad search breaking it in FF and IE9, and Chrome does not appear to render the font at all.
3. Alignment – I have found that correct vertical alignment of symbol fonts is normally harder to achieve cross browser than images, I cannot give any solid examples, but I found switching to using symbol fonts required a lot more conditional css than images.
Copy & paste the code below to embed this comment.
Jeff Kaufman
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.
I have been using icon fonts for a little while now, but creating ligatures instead is genius! I wish you had elaborated a bit more on how to actually create and use them though. According to Icomoon and caniuse.com IE9, Opera, and the Android browser don’t support ligatures at all, so it seems like implementing them reliably might not really be an option yet.
Copy & paste the code below to embed this comment.
Martijn van der Ven
The timepiece site (http://timepiece.inostudio.de) triggers Kaspersky Security, blocking the website because it detected ‘Trojan.JS.Redirector.xb’. Just a heads up.
Just wanted to note that our corporate proxy is currently detecting an embedded Trojan on the http://timepiece.inostudio.de/ page. Not sure if this is a false positive, but please exercise caution when going to that site.
tesmond is correct, symbol fonts have a vertical alignment bug between PC and Mac. Learn more – http://www.icavia.com/2010/09/solving-font-face-alignment-issues/
You have to use OS sniffing to fix it. And not all fonts are created equal. I was using the free symbol font Entypo and it has a large height (not the icon itself, the space that the icon resides), which causes this alignment bug to have a pretty significant vertical shift between PC/Mac. In my case the icon was positioned 40 pixels higher on Mac.
The color you assign to background-color and the color in the filter has to be the color that’s behind the font, so you might have to make multiple classes for multiple colors.
Good article! However, like tesmond mentioned, differences between browsers / OS in rendering the fonts are a major problem.
For http://www.nowyteatr.org/en I’ve used a custom symbol font for all of the nav icons and as well as for the mobile version logo [basically everything I’d normally use a SVG file for].
The fact that the fonts are white further attributed to rendering issues. I can imagine you might actually need to create a dark and a light symbol version in some cases.
I experienced no problems with the font vertical alignment, and if you create the font correctly I don’t see why you should get such issues.
Copy & paste the code below to embed this comment.
pieroxy
In my experience, custom fonts are only as good as you don’t count WebKit. Unfortunately, WebKit is powering 100% of mobile devices and about 30-40% of computers. That’s a lot.
WebKit will introduce a lag between pages where you will see your text rendered with the default font before displaying the custom font. Even of the custom font is already cached and downloaded. This is not the case with a png.
For me, advocating custom fonts for graphics is doing a disservice to your users. It just doesn’t work with WebKit.
This is a good summary of the basics of icon webfonts, but I should point out a few points that aren’t 100% true …
You say “a good font will convert that ‘ff’ into a single ligature where the fs connect smoothly”, but this is a bit misleading. If a font doesn’t have an ff ligature, it doesn’t necessarily mean it is not a good font. It may just mean its f was designed in a way that might not require a ligature when set next to itself. Also, not all ff ligatures necessarily connect the two f’s together. Some ligatures simply modify the shape to work better in that context, without connecting anything.
You also say “you can’t have alternative designs for different font sizes”, but theoretically one could add hinting instructions to their icon font to adjust the design for different sizes in Windows. Granted, those adjustments would be all but ignored in Mac though, so you are right that there isn’t a reliable cross-platform way to have size-specific variations. (This is the kind of problem I discussed in my piece on font hinting, explaining how a more general implementation of responsive typefaces would be helpful.)
These are relatively small corrections in the grand scheme of your article, but I figured it was worth pointing them out.
Also worth mentioning as a reference for existing icon webfonts, Stephen Coles put together the Icons as Webfonts list on Listgeeks.
I have to mention Font Awesome here: a great, free symbol font used by Twitter Bootstrap, which features 249 symbols – usually covers most of my iconic needs.
I understand that at the moment icon fonts seems like a good solution, but it still a hack. It’s like using tables for layout: temporary workaround due to immaturity of technology. You want vector icons? SVG is a standard for this. Don’t be mistaken: hack is a hack.
@Dmitry – Symbol fonts have been around since the dawn of typography. There is nothing wrong with this approach. Its not a hack, but rather a natural extension of typography. As someone that was in the desktop publishing industry and taught traditional print folks (around the country) to come into the digital age, I can tell you there are probably more folks out there that would think this is completely natural than the other way around (but I’ll admit maybe less who are digital-only folks).
To see why this makes much sense, you should stop separating the ideas of ‘ideogram’ and ‘glyph’. The copyright symbol is an ideogram (icon) because it conveys meaning of a concept. Should it not be included in fonts? Icons display meaning. They shouldn’t be in fonts? If you say only glyphs should be in fonts, then we have a big problem and we’ll have to remove all sorts of ‘characters’ that are treated as glyphs but should not be in fonts because they are really ideagrams.
Browser tech will probably never get an elegant UNIFIED solution for associating a symbol with a block of text. Wrapping a symbol with some text inside nested div tags is really the hack when you think about it. Using CSS psuedo elements (:before + content:) to embed an icon in a block of text is also a hack.
No, fonts and ligatures are acutally much better for several reasons: You get automatic scaling and alignment of the symbol with text, both sharing the same baseline, with an expectation of consistent rendering – this is huge! The ability to associate a semantic meaning with a symbol through the built in ligature feature of font definition files is huge! The ability of the community to strong arm browser companies to follow the font standard to support ligatures will enable designers to use this very powerful tool, a tool that won’t be replaced for possibly decades!
I love this idea, but there is an accessibility bug about it. If you consider people with learning disabilities in your design, you should be showing the icon with the word as they may struggle with the meaning of the icon.
With that in mind, if I use the ligature method to show an icon of a house followed by the word Home the code would be <li><a><span class=“icon”>Home</span> Home</a></li>. Which isn’t a problem until someone using a screen reader comes along and looks at the nav which is then read as “List element, link, Home, Home”. It becomes annoying redundant redundancy.
Greg - I agree this is sticky. At the risk of being seen as suggesting a hack(!) I would say that wrapping symbols in a span tag allows you keep the inline nature of the rendering (blocks have much different rendering aspects) and then you can hide the symbol for the screen media type:<br />
media speech {.symbol { display: none; } }
Maybe some change will come along that will allow you to select just the text of the symbol font (attribute property selection) ala:
@media screen { .menu_item[style::font-family=my_symbol_font] { display: none; } }
Wouldn’t that be cool! There are also a couple of ways to select span elements of a given font family with jQuery.
The only gripe is that I wish that you had also talked about the method used for Glyphicons in Twitter Boostrap (and now Font Awesome), which seems pretty brilliant to me. The icon sits in a semantically neutral tag while you can make the link text say whatever you want (with accessibility in mind).
While developing our free icon font http://www.webhostinghub.com/glyphs/ (as far as I know the largest free icon font available out there) we have encountered an important issue – ligatures do not work in Internet Explorer below version 10 which makes it difficult to call this technique mainstream at this point.
Good article!
I experienced no problems with the font vertical alignment, and if you create the font correctly I don’t see why you should get such issues—-<a >handbags</a>
Good article!
I experienced no problems with the font vertical alignment, and if you create the font correctly I don’t see why you should get such issues—-handbags
“Apple is proposing multicolor fonts, which would let you create and embed pure vector graphics into any web page. Its first foray into this field is the Apple Color Emoji font”
AFAIK, Apple Emoji is a bitmap font, not a vector font. I didn’t dig enough in the color font extension to know if it supports vector font though.
Font symbols are great and I use them a lot. I have noticed that if using PUA (unicode) characters of your own, on an iPhone it’ll swap out your own font for the Emoji characters (if they’re installed). Only font pack I can get to override this is FontAwesome, but can’t for the life of me work out why! Embedding the woff as Base64 seems to help, but only sometimes…any ideas?
38 Reader Comments
Back to the ArticleThomas Brasington
A other thing to consider when designing your icons is localisation. One icon may mean something to us in the western world but is meaningless to a person in an Asian country.
tesmond
Some nice ideas, thanks.
Sadly there are some problems with using fonts not mentioned…
1. Font hinting – Google Chrome on Windows does not do font-hinting correctly meaning that your lovely symbols can start looking blocky. Maybe this will be fixed in a future release?
2. Example – http://timepiece.inostudio.de/ does not work, appears to have some bing ad search breaking it in FF and IE9, and Chrome does not appear to render the font at all.
3. Alignment – I have found that correct vertical alignment of symbol fonts is normally harder to achieve cross browser than images, I cannot give any solid examples, but I found switching to using symbol fonts required a lot more conditional css than images.
Lee Johnson 1
Great Article. I have just added fonts instead of images but I think I still get the same message across. http://lee-johnson.com
Jeff Kaufman
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.
Justin Menking
I have been using icon fonts for a little while now, but creating ligatures instead is genius! I wish you had elaborated a bit more on how to actually create and use them though. According to Icomoon and caniuse.com IE9, Opera, and the Android browser don’t support ligatures at all, so it seems like implementing them reliably might not really be an option yet.
Martijn van der Ven
The timepiece site (
http://timepiece.inostudio.de) triggers Kaspersky Security, blocking the website because it detected ‘Trojan.JS.Redirector.xb’. Just a heads up.Stephen Belyea
Just wanted to note that our corporate proxy is currently detecting an embedded Trojan on the http://timepiece.inostudio.de/ page. Not sure if this is a false positive, but please exercise caution when going to that site.
Content contained “Trojan.JS.Redirector.xb” virus. Details: Virus: Trojan.JS.Redirector.xb; File: No file name available; Sub File: Memory region; Vendor: Kaspersky Labs; Engine error code: 0×00010000; Engine version: 8.1.8.79; Pattern version: 130312.121800.9678883; Pattern date: 2013.03.12 12:18:00
Francis Villanueva
Just moved to using symbol fonts instead of sprite sheets. I’m currently using this tool called FontCustom: http://fontcustom.com
Drop a bunch of svgs into a folder, run the command, and poof, fonts in all the required formats as well as the css.
Tim Murtaugh
Thanks for the malware reports — we’ve pulled the link.
Update: The site has been cleaned, and we’ve restored the link.
Vladimir Starkov
You just forget to mention fontello — the great tool
Alejandro Rodriguez
tesmond is correct, symbol fonts have a vertical alignment bug between PC and Mac. Learn more – http://www.icavia.com/2010/09/solving-font-face-alignment-issues/
You have to use OS sniffing to fix it. And not all fonts are created equal. I was using the free symbol font Entypo and it has a large height (not the icon itself, the space that the icon resides), which causes this alignment bug to have a pretty significant vertical shift between PC/Mac. In my case the icon was positioned 40 pixels higher on Mac.
Christopher Mischler
I’m using a custom-made symbol font, and I found that a line-height of 0.6 renders fairly consistently across browsers and Mac & PC.
Also for IE 8 & down, if you use a filter to turn off ClearType on your text, the symbol-fonts will render much smoother:
.lt-ie9 .old-ie-font-fix {
background-color: white;
opacity: 0.99;
/* IE 8 */
-ms-filter: “progid:DXImageTransform.Microsoft.Chroma(color=‘white’) progid:DXImageTransform.Microsoft.Alpha(opacity=99)”;
/* IE 6,7 */
filter: progid:DXImageTransform.Microsoft.Chroma(color=‘white’) progid:DXImageTransform.Microsoft.Alpha(opacity=99);
}
The color you assign to background-color and the color in the filter has to be the color that’s behind the font, so you might have to make multiple classes for multiple colors.
Simon Boudrias
Unfortunately, icon as text ligature is a pretty big concern concerning internationalization.
Metallic Dust
If only we can just finally rid ourselves of Android 2.x so that we can just start using SVGs like any other (raster) image format.
Markus Greve
Great article, reminds me of my talk at the Webfontday late last year (http://de.slideshare.net/markusgreve/wbfntdy-2012).
inostudio’s »Timepiece« saw the light of day at this event, too. I contacted Chris, he takes care of the Kaspersky message already.
Jon Richter
Trello’s blog recently had an entry about icon fonts, which was a little more technical.
Go ahead and check it out, too.
Talking ‘bout Trello : Fontello appears to be great!
Adam Widmanski
Good article! However, like tesmond mentioned, differences between browsers / OS in rendering the fonts are a major problem.
For http://www.nowyteatr.org/en I’ve used a custom symbol font for all of the nav icons and as well as for the mobile version logo [basically everything I’d normally use a SVG file for].
The fact that the fonts are white further attributed to rendering issues. I can imagine you might actually need to create a dark and a light symbol version in some cases.
I experienced no problems with the font vertical alignment, and if you create the font correctly I don’t see why you should get such issues.
Christian Riss
Thanks to everybody who notified us of the trojan issue – we fixed the problem today! – it is save to visit timepiece now.
pieroxy
In my experience, custom fonts are only as good as you don’t count WebKit. Unfortunately, WebKit is powering 100% of mobile devices and about 30-40% of computers. That’s a lot.
WebKit will introduce a lag between pages where you will see your text rendered with the default font before displaying the custom font. Even of the custom font is already cached and downloaded. This is not the case with a png.
For me, advocating custom fonts for graphics is doing a disservice to your users. It just doesn’t work with WebKit.
Jeffrey Zeldman
@pieroxy:
I believe you’re talking about what Mozilla does.
In our experience, Webkit displays no font until the font loads. Then it displays the web font. No harm, no foul, no problem.
Nick Sherman
This is a good summary of the basics of icon webfonts, but I should point out a few points that aren’t 100% true …
You say “a good font will convert that ‘ff’ into a single ligature where the fs connect smoothly”, but this is a bit misleading. If a font doesn’t have an ff ligature, it doesn’t necessarily mean it is not a good font. It may just mean its f was designed in a way that might not require a ligature when set next to itself. Also, not all ff ligatures necessarily connect the two f’s together. Some ligatures simply modify the shape to work better in that context, without connecting anything.
You also say “you can’t have alternative designs for different font sizes”, but theoretically one could add hinting instructions to their icon font to adjust the design for different sizes in Windows. Granted, those adjustments would be all but ignored in Mac though, so you are right that there isn’t a reliable cross-platform way to have size-specific variations. (This is the kind of problem I discussed in my piece on font hinting, explaining how a more general implementation of responsive typefaces would be helpful.)
These are relatively small corrections in the grand scheme of your article, but I figured it was worth pointing them out.
Also worth mentioning as a reference for existing icon webfonts, Stephen Coles put together the Icons as Webfonts list on Listgeeks.
Mads Nedergaard
I have to mention Font Awesome here: a great, free symbol font used by Twitter Bootstrap, which features 249 symbols – usually covers most of my iconic needs.
Matthew Darnell 1
It seems ligatures are only supported in Firefox on the PC so this is far from ready for prime time.
Dmitry Baranovskiy 1
I understand that at the moment icon fonts seems like a good solution, but it still a hack. It’s like using tables for layout: temporary workaround due to immaturity of technology. You want vector icons? SVG is a standard for this. Don’t be mistaken: hack is a hack.
Sean Smith
@Dmitry – Symbol fonts have been around since the dawn of typography. There is nothing wrong with this approach. Its not a hack, but rather a natural extension of typography. As someone that was in the desktop publishing industry and taught traditional print folks (around the country) to come into the digital age, I can tell you there are probably more folks out there that would think this is completely natural than the other way around (but I’ll admit maybe less who are digital-only folks).
To see why this makes much sense, you should stop separating the ideas of ‘ideogram’ and ‘glyph’. The copyright symbol is an ideogram (icon) because it conveys meaning of a concept. Should it not be included in fonts? Icons display meaning. They shouldn’t be in fonts? If you say only glyphs should be in fonts, then we have a big problem and we’ll have to remove all sorts of ‘characters’ that are treated as glyphs but should not be in fonts because they are really ideagrams.
Browser tech will probably never get an elegant UNIFIED solution for associating a symbol with a block of text. Wrapping a symbol with some text inside nested div tags is really the hack when you think about it. Using CSS psuedo elements (:before + content:) to embed an icon in a block of text is also a hack.
No, fonts and ligatures are acutally much better for several reasons: You get automatic scaling and alignment of the symbol with text, both sharing the same baseline, with an expectation of consistent rendering – this is huge! The ability to associate a semantic meaning with a symbol through the built in ligature feature of font definition files is huge! The ability of the community to strong arm browser companies to follow the font standard to support ligatures will enable designers to use this very powerful tool, a tool that won’t be replaced for possibly decades!
Greg Tarnoff
I love this idea, but there is an accessibility bug about it. If you consider people with learning disabilities in your design, you should be showing the icon with the word as they may struggle with the meaning of the icon.
With that in mind, if I use the ligature method to show an icon of a house followed by the word Home the code would be <li><a><span class=“icon”>Home</span> Home</a></li>. Which isn’t a problem until someone using a screen reader comes along and looks at the nav which is then read as “List element, link, Home, Home”. It becomes annoying redundant redundancy.
Sean Smith
Greg - I agree this is sticky. At the risk of being seen as suggesting a hack(!) I would say that wrapping symbols in a span tag allows you keep the inline nature of the rendering (blocks have much different rendering aspects) and then you can hide the symbol for the screen media type:<br />media speech {.symbol { display: none; } }Maybe some change will come along that will allow you to select just the text of the symbol font (attribute property selection) ala:
@media screen { .menu_item[style::font-family=my_symbol_font] { display: none; } }
Wouldn’t that be cool! There are also a couple of ways to select span elements of a given font family with jQuery.
4edges
Hi There,
Thanks for the great article.
The only gripe is that I wish that you had also talked about the method used for Glyphicons in Twitter Boostrap (and now Font Awesome), which seems pretty brilliant to me. The icon sits in a semantically neutral tag while you can make the link text say whatever you want (with accessibility in mind).
<a href="index.htm"><i class="icon-home"></i> Home</a>
It seems to me that this technique has a lot of advantages. What do you think?
WebHostingHub Glyphs
While developing our free icon font http://www.webhostinghub.com/glyphs/ (as far as I know the largest free icon font available out there) we have encountered an important issue – ligatures do not work in Internet Explorer below version 10 which makes it difficult to call this technique mainstream at this point.
Bijay Pakhrin
I actually find Icomoon to be really useful tool for this.
Don Elliott
Using symbol fonts in responsive design can improve mobile performance. Very scalable with a relatively small footprint.
shoes and sunglasses for sale
Good article!
I experienced no problems with the font vertical alignment, and if you create the font correctly I don’t see why you should get such issues—-<a >handbags</a>
shoes and sunglasses for sale
Good article!
I experienced no problems with the font vertical alignment, and if you create the font correctly I don’t see why you should get such issues—-handbags
Pål Eivind Nes
Excellent article! Thanks for all the links; that really got me started.
Just expanding on ligatures and the clock. Would it not be better with a different ligature for each hand, then superimposing them with CSS.
<div class=“clock”>
<span class=“hours”>11</span>:
<span class=“minutes”>22</span>:
<span class=“seconds”>33</span>:
</div>
:)
Jean-Daniel
“Apple is proposing multicolor fonts, which would let you create and embed pure vector graphics into any web page. Its first foray into this field is the Apple Color Emoji font”
AFAIK, Apple Emoji is a bitmap font, not a vector font. I didn’t dig enough in the color font extension to know if it supports vector font though.
Pete Blakemore
Font symbols are great and I use them a lot. I have noticed that if using PUA (unicode) characters of your own, on an iPhone it’ll swap out your own font for the Emoji characters (if they’re installed). Only font pack I can get to override this is FontAwesome, but can’t for the life of me work out why! Embedding the woff as Base64 seems to help, but only sometimes…any ideas?
Johandesilva
This sounds like a bad idea. Mainly multi language issues. The solution is base64 encoded something… SVG?
Artem Sapegin ಠ_ಠ
You can also use grunt-webfont to generate webfont from set of SVGs. It’s like mentioned above Fontcustom but for Grunt.