Working With Symbol Fonts


What are symbol fonts?

Do you remember it now? Back in the 1990s Microsoft developed a font called Wingdings which was a series of symbols for each letter. This gave the operating system and applications the ability to display vector images such as arrows, smiley faces, warning signs and various other symbols. This was probably the first introduction to symbol fonts available to the general public, and we abused it. Wingdings was followed by Webdings, which is part of the larger Dingbat family of typefaces. Dingbats are ornamental rather than alphabetic. The place of ornaments made sense when they were part of a printers case of metal or wooden blocks, but when typography was translated into the digital world, all of the letters on the keyboard were given digital equivalents and there was no room for these wayward extra symbols. So they got stuck in a font of their own, thereby abusing font semantics and what is to be considered a letter.

What is the benefit?

There are obvious advantages of using a custom typeface on your own site. It keeps things visually cohesive by using specialized custom icons, but it also has benefits on multiple devices and screen resolutions. Behind the scenes, by replacing images with text, you are also increasing the content to markup ratio which search engines use in their ranking algorithms.

Beyond the branding and marketing advantages, a single font file is very similar to a CSS sprite. The reader only needs to download a single file and all references to it are sped up through caching. If you are frugal, font files can also be very small in size, which gives them an advantage over JPG, GIF and PNG files.

Below are additional recourses for creating your own symbol font and implementing it on the web.

Kick some raster and go forth and vectorise!

Enjoy what you’re reading? Sign up for the AYC Media newsletter and receive updates on our posts.