Web Platform Team Blog

Adobe

decor

Making the web awesome

Icons and Icon Fonts

The explosion of devices and screen sizes has had an interesting effect on how designers and developers use icons on the web. Used well, icons can pack a lot of information into a small amount of visual real estate. They can help UIs communicate efficiently. For example, consider

32
vs.
32 Comments

The ‘conversation bubble’ icon is not only smaller than the word ‘Comments’, it is also easier to pick out in a sea of text.

One of the primary challenges facing icon designers is that their icons must display crisply when sized for different screens. When resized, especially to small areas, icons can become fuzzy or illegible. For the pixel aficionado, the only possible solution may be to hand tweak each icon for each display size. Even for a simple case (phone, tablet, and desktop screen sizes at low and high pixel densities), you may wind up with 6+ different versions of an icon. When you combine these variations with the need to style icons for different use cases (hovered, selected, disabled, etc), the number of icon renderings can quickly spiral out of control.

A 24x24 icon becomes blurry when resized to a 32x32 or 16x16 size
A 24×24 icon becomes blurry when resized to a 32×32 or 16×16 size.
Bookmark icon courtesy of PJ Onori from The Noun Project.
The above 32x32 icon and a pixel-aligned version, shown at actual size
Resizing vs pixel-aligning at 32×32
The bookmark icon, used as part of a styled button
The bookmark icon, used as part of a styled button

Traditionally, there have been two ways to cut down on the number of icon files. The first, using SVG icons, replaces the resolution-dependent versions of an icon with a single vector. The second, combining multiple icons into a single sprite sheet, cuts down the number of files to manage during development and load during runtime. More recently, web fonts have become a convenient way of packaging vector icons into a single file. At their most basic, fonts just contain a bunch of glyphs, or vector shapes. For example, the Edge Web Font Strumpf contains the shape C to represent a capital ‘C’. Instead of storing glyphs for characters, icon fonts store glyphs for — you guessed it — icons. Since font glyphs are vector based, they will scale more cleanly than their rasterized counterparts. Although icons from an icon font must be monochromatic (unlike their SVG counterparts), they can be styled using CSS, just like any other text on a web page. Instead of rasterizing an icon at different sizes, using different colors, opacities and filters, you can simply style them.

Character Fonts

Under the hood, there are three main mechanisms icon fonts use to replace markup with font glyphs. The first, and simplest, just maps standard latin characters to the icon glyphs. Instead of replacing the character ‘C’ with C, replace it with . You can use an icon font like this the same way you would use any other web font.

<style>
@font-face {
    font-family: 'IconFont';
    src: url('icon-font.ttf');
    font-weight: normal;
    font-style: normal;
}
</style>
<span style='font-family: IconFont'>C</span>

Note that the above web font incantation has been simplified from the full version. The weather icon font Meteocons uses this type of font encoding, substituting, say, a sunshine icon for the letter ‘B’.

Private Use Fonts

While these fonts display correctly, they can cause a disconnect between a page’s markup and visual representation. After all, the letter ‘B’ doesn’t really map to our idea of sunshine. This disconnect can cause problems for developers trying to understand the code, search engines attempting to parse it, and screen readers assisting the visually impaired. The second method of icon font encoding gets around this problem by using characters that have no semantic meaning. The Unicode standard defines some characters for private use. These characters have no standardized meaning, and font developers can assign custom glyphs to them. When developers, screen readers, or search engines encounter one these characters, they should either ignore it, or interpret it as having a custom meaning within the markup. The markup using this method would look something like:

<style>
@font-face {
    font-family: 'IconFont';
    src: url('icon-font.ttf');
    font-weight: normal;
    font-style: normal;
}
</style>
<span style='font-family: IconFont'>&#xE02D;</span>

There are two small annoyances to this method (think of them as opportunities for improvement). The first is that these characters need to be escaped as numbers, since you can’t type them on your keyboard. The second is that each icon does have a meaning we are unable to convey through the markup. If you saw ‘&#xE02D;’ in some HTML, I’m guessing your first reaction wouldn’t be “Oh, that must be a comment icon.” Unicode does provide some icon entities that can help machines parse markup, and the best of these icon fonts tend to map to them when possible. Most also provide human-friendly classnames that utilize pseudo-elements and the content property under the hood. For example, the markup might look like

<style>
.icon-comment:before {
     font-family: IconFont;
     content: '\e02d';
}
</style>
<span class='icon-comment'></span>

Examples of these types of icon fonts include Iconic and Font Awesome.

Ligature Fonts

There is an alternative solution to the problem of creating more human-friendly markup using ligatures, part of the new CSS3 Font Specification. Ligatures enable a font to substitute a single font glyph for multiple markup characters. Used in the traditional sense, ligatures combine adjacent characters into more visually pleasant forms.


Traditional ligature example from Wikipedia

However, ligatures also make it possible to replace, say, ‘comment’, with the glyph . You have a literal description of the icon as part of the markup, which makes it easier to understand for developers, screen readers and search engines.

<style>
@font-face {
    font-family: 'IconFont';
    src: url('icon-font.ttf');
    font-weight: normal;
    font-style: normal;
}
</style>
<span style='font-family: IconFont'>comment</span>

A couple icon fonts are already experimenting with this method, including SymbolSet and Ligature Symbols. It is important to note that because they are a new feature, ligatures are not yet fully supported across browsers.

Icon fonts offer an interesting solution to the problem of icon management. They do have certain strengths and weaknesses to consider when looking at them for a project. They are stylable, scale well, and can help reduce the clutter of individual files. On the other hand, people are used to working with individual image assets because the workflow can be simple and fast. Right now, the biggest challenge may simply be that icons are more frequently distributed as individual assets rather than packaged as a font. As more and more icon fonts become available, however, I think we’ll see them playing an increasing role in web development. If you’re interested in learning more, check out one of the previously listed icon fonts, or create your own over at Icomoon.

3 Comments

  1. January 16, 2013 at 5:07 am, Adrian said:

    I’m happy that big company write about font icons. I hope Google chrome will make a few updates to browser for better render font icons.

  2. January 24, 2013 at 8:21 am, sorin said:

    thx guys, best take on this subject so far ;)

  3. February 10, 2013 at 3:18 am, Robert Hughey said:

    I’m very much inclined to agree with the above and take it further that, from a design point, Google Chrome continues to lag behind the others.

    …he wrote while actually using Chrome this morning for some reason…

    But thanks for the informative post, and I’ve got quite a few tabs open now to go and check out these services/sites you’ve provided. It should be a blast. :)