The Era of Symbol Fonts

by Brian Suda

43 Reader Comments

Back to the Article
  1. 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.

    Copy & paste the code below to embed this comment.
  2. 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.

    Copy & paste the code below to embed this comment.
  3. Great Article. I have just added fonts instead of images but I think I still get the same message across. http://lee-johnson.com

    Copy & paste the code below to embed this comment.
  4. 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.

    Copy & paste the code below to embed this comment.
  5. 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.
  6. The timepiece site (http://timepiece.inostudio.de) triggers Kaspersky Security, blocking the website because it detected ‘Trojan.JS.Redirector.xb’. Just a heads up.

    Copy & paste the code below to embed this comment.
  7. 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

    Copy & paste the code below to embed this comment.
  8. 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.

    Copy & paste the code below to embed this comment.
  9. Thanks for the malware reports — we’ve pulled the link.

    Update: The site has been cleaned, and we’ve restored the link.

    Copy & paste the code below to embed this comment.
  10. You just forget to mention fontello — the great tool

    Copy & paste the code below to embed this comment.
  11. 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.

    Copy & paste the code below to embed this comment.
  12. 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.

    Copy & paste the code below to embed this comment.
  13. Unfortunately, icon as text ligature is a pretty big concern concerning internationalization.

    Copy & paste the code below to embed this comment.
  14. 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.

    Copy & paste the code below to embed this comment.
  15. 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.

    Copy & paste the code below to embed this comment.
  16. 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!

    Copy & paste the code below to embed this comment.
  17. 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.
  18. Thanks to everybody who notified us of the trojan issue – we fixed the problem today! – it is save to visit timepiece now.

    Copy & paste the code below to embed this comment.
  19. 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.

    Copy & paste the code below to embed this comment.
  20. @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.

    Copy & paste the code below to embed this comment.
  21. 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.

    Copy & paste the code below to embed this comment.
  22. 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.

    Copy & paste the code below to embed this comment.
  23. It seems ligatures are only supported in Firefox on the PC so this is far from ready for prime time.

    Copy & paste the code below to embed this comment.
  24. 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.

    Copy & paste the code below to embed this comment.
  25. @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!

    Copy & paste the code below to embed this comment.
  26. 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.

    Copy & paste the code below to embed this comment.
  27. 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.

    Copy & paste the code below to embed this comment.
  28. 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?

    Copy & paste the code below to embed this comment.
  29. 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.

    Copy & paste the code below to embed this comment.
  30. I actually find Icomoon to be really useful tool for this.

    Copy & paste the code below to embed this comment.
  31. Using symbol fonts in responsive design can improve mobile performance. Very scalable with a relatively small footprint.

    Copy & paste the code below to embed this comment.
  32. 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>

    Copy & paste the code below to embed this comment.
  33. 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

    Copy & paste the code below to embed this comment.
  34. 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>

    :)

    Copy & paste the code below to embed this comment.
  35. “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.

    Copy & paste the code below to embed this comment.
  36. 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?

    Copy & paste the code below to embed this comment.
  37. This sounds like a bad idea. Mainly multi language issues. The solution is base64 encoded something… SVG?

    Copy & paste the code below to embed this comment.
  38. You can also use grunt-webfont to generate webfont from set of SVGs. It’s like mentioned above Fontcustom but for Grunt.

    Copy & paste the code below to embed this comment.
  39. Font symbols are great and I use them to. Thx for this article.

    Copy & paste the code below to embed this comment.
  40. I’ve created the appearance of a multi-color glyph by using two elements. Simply negatively position the second element and set its z-index value to a number that’s higher than the first element. For example:
    <div>
    <span class=“icon-user” title=“user”  z-index:2; font-size:2em;”></span>
    <span class=“icon-warning” title=“warning”  left:-1em; color:#DE2525; z-index:3;”></span>
    </div>

    Copy & paste the code below to embed this comment.
  41. I’ve been designing dashicons for WordPress.com and the MP6 plugin. One of the biggest challenges is making sure icons align to the pixel grid. -webkit-font-smoothing:antialiased goes a long way toward ensuring crisp icons on most devices; however, FireFox just doesn’t get font smoothing right.

    Copy & paste the code below to embed this comment.
  42. … and one more thing: Unicode 6.0+ now supports more icons, implemented in this font:
    http://richstyle.org/font.php

    Copy & paste the code below to embed this comment.
  43. Managed to create my very own duo of symbol fonts for the first time this year!
    http://funzeye.github.io/County/

    Copy & paste the code below to embed this comment.