Believe it or not, symbol fonts –also known as icon fonts- are quite useful when it comes to utilizing markup. Of course, they come with their own set of strengths and weaknesses, or perhaps more importantly there are some issues that arise while using them. If you’re well-versed in HTML, CSS and the like chances are pretty high that you already know this.
What you may not know, is that a lot of modern browsers have evolved to the point where they work hand-in-hand with icon fonts. The world of web design is evolving once again, just as it originally did when moving from inline markup to CSS, excessive image files to CSS sprites, and converting smaller images from HTML into a single background image, and supporting responsive web design.
Apple, for example, has introduced a new multicolor font rightfully dubbed the Apple Color Emoji. The idea is to allow designers the option to embed vector based graphics onto a page. This practice is in its infancy which means there won’t be a lot of browser support for a while, but eventually that will change.
Remarkably, a new world of symbol fonts is blooming- so to speak, and some universities are beginning to prepare. Vista College may be the first to spend portions of its design curriculum focused on symbol typography.
Ligatures Work Best
In most cases, ligatures can be exclusively substituted for glyphs. While this concept may seem a bit daunting, I assure you it’s really not.
In practice, ligatures are subtle alterations of fonts designed specifically to make reading a bit easier on the eyes. Some examples include using the letter “f” in succession such as “ff”, or when using it in combination with similar letters such as “fl” or “fi”. The font looks at such strings and then substitutes a more pleasing alternative.
The way ligatures work in markup constitutes a perfect method for substituting your own symbol fonts. Because the font is designed to recognize a particular string, you could pair icons to phrases like “A List Apart”.
For Now, Icon Fonts Must be a Single Color
Yes, I did just point out that Apple is working on a multicolored symbol font but it’s going to be some time before that is widely adopted. For now, symbol fonts are confined to one solid color. That fact certainly impedes on style more than anything, but depending on the design of the site in question it can also cause consistency issues.
With that simple point however, comes a few advantages to using icon fonts with a solid color. For one, you can very easily change the size, or color to match your needs. Additionally, you can easily add a shadow behind their shape through one of several different methods.
Even better, since they are image based you can alter or manage the symbols just as you would any other image by changing opacity, rotating them or even adding a transparent background.
With Symbol Fonts, Size Rarely Matters
When designing a normal icon, logo or even favicon most graphic artists will create concepts for varying sizes. Often, larger sizes will have a little more detail whereas smaller resolution images will have some of it removed. More importantly, this allows you to call upon different types depending on the situation or need.
With symbol fonts, size does not matter because the design stays the same, it’s finite. It doesn’t matter if you use a 30 point or 140 point font you’ll get the same image every time. There are ways of assigning different font sizes, but the work is a bit much for the outcome. Especially when you consider the fact that you’ll never know how end users are seeing your icons.
Never fear, for symbol icons scale quite well whether that be to lower or higher resolutions.
You Can Create Your Own Symbol Fonts
The tools aren’t quite as advanced as they should be, but they will get there in time. Working with symbol and icon fonts is a little different than what most web designers are used to. Instead of working with Photoshop, Fireworks, Gimp and similar image editing tools you have to use something new: a font editor.
Font editor tools are quite sparse when compared to image editors, but that’s no matter. Applications do exist that allow you to create your very own symbol or icon fonts. Icomoon, is one such platform.
To use it, you upload SVG files which can be directly mapped to Unicode characters. After, you can export the entire font set and call upon them for your own websites.
Other tools like FontForge exist which allow you to create your own icons too. FontForge is free, but there are premium applications out there if you don’t mind paying for a more user friendly experience.
Shane Patrick Jones is a CRO and Conversion Design expert who loves to share his inspirations and opinions on all design related matters. Follow Shane on Google+ and Twitter.
Photo By: smashingmagazine.com
