Suda - A Pocket Guide to Creating Symbol Fonts

A Pocket Guide to Creating symbol fonts
by Brian Suda

Published in 2013 by Five Simple Steps

Studio Two, The Coach House
Stanwell Road
Penarth
CF64 3EU
United Kingdom

On the web: fivesimplesteps.com
and: suda.co.uk
Please send errors to

Publisher: Five Simple Steps
Editor: Owen Gregory
Production Manager: Jo Brewer
Art Director: Nick Boulton
Designer: Nick Boulton, Colin Kersley

Copyright 2013 Brian Suda
All rights reserved. No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording or any information storage and retrieval system, without prior permission in writing from the publisher.
ISBN: 978-1-907828-10-2
A catalogue record of this book is available from the British Library.

We all know what a font is. Some of us mighteven have a favourite or deplore a certain comical, whimsical font, but you might not know what a symbol font is.

Do you remember the Wingdings font?

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.

Fast-forward to 2012, and the new symbol fonts are replicating the same intentions. Its amazing how history repeats itself and sometimes how offbeat innovations, even if they did come from Microsoft, were before their time. Recently, many of the pieces of the puzzle have fallen into place well enough for embedded icon symbol fonts to be viable for display on the web. With browsers support of CSS standards, web fonts, OpenType, JavaScript and other rendering technologies, what was a dream in the mid 1990s is now a reality.

It has taken a while to get here, but the power of smooth vector graphics on the web is a reality.

Symbol fonts make use of existing font structure and formats. Instead of the characters we expect to be output when we type an A, we get an alternative graphic that could be anything. What we usually call a character, typographers call a glyph. Thats because once you leave the Roman alphabet behind and move into Arabic, Cyrillic, Kanji and others, their symbols are not always characters, but glyphs instead.

Glyph symbols can be thought of as more like hieroglyphs, where each glyph is a picture. I apologise to the ancient Egyptians and Jean-Franois Champollion for an oversimplification of a complex language. For such fonts, encoded in each of our normal keyboard presses is an image, sometimes representing a letter, sometimes a picture. Dont over-think it, though; as Freud said, sometimes a cigar is just a cigar why the Wingdings right arrow uses the 4-key and not R is reading too much into the allocation of glyphs.

By the end of this Pocket Guide, you will understand:

• the pros and cons of symbol fonts
• how to create your own custom symbol fonts
• the correct way to embed them into HTML to create visual cohesion
• what we can expect in future for symbol typography on the web

Just because a technology is new doesnt automatically make it better. But embedding a font into your webpages has settled down and offers some very interesting possibilities.

Recently, several pieces of the online typography puzzle have fallen into place so we can use and appreciate embedded fonts on the web: symbol fonts have been around digitally since at least 1990; IE6 was launched in August 2001; several online font hosting services have appeared; and, most recently, Apple has released high-resolution displays on their mobile devices and laptops.

When I first started coding websites, I foolishly created tiny images for each arrow, icon and other glyph I needed. (I probably even used a spinning e for email and a little construction worker, too). It worked well back then, but as time progressed the industry became smarter and we began to use CSS background images instead. It was an incremental step that didnt change the way we created graphics but, rather, how we coded sites. CSS background images took the img element out of the flow and improved the text-to-markup ratio; helped devices like screen readers; better divided structure, presentation and behaviour into HTML, CSS and JavaScript; and arguably helped search engine results.

After a while we took the next step, because we were concerned with the number of requests the browser made to fetch all the page assets. Separately saved images required the browser to fetch each one individually, causing delays. The solution: CSS sprites.

CSS sprites take all these tiny images and put them into a single file, cropped as necessary by CSS background image positioning. This reduces the total number of requests, aids in caching, and reduces the total file size of all your images. For a few years this was how we eked out performance gains on our websites. Now font embedding has hit the mainstream and we can take the next incremental step.

Embedded fonts enable you to use just about any typeface on your website. The purists gasp in horror at the thought of ransom note style designs with thirty different typefaces on a page, and those do exist, but for the most part, professionals have used embedded fonts to accent the design, create the right atmosphere, and keep designs visually cohesive.

Several companies have sprung up that host fonts, making the process of embedding them easier for developers and designers. To some you pay a monthly fee and get access to a treasure trove of fonts, while others are free but with the list of typefaces limited to a series of open source contributions.

What people tend to forget is that you can host your own fonts. Most fonts are copyrighted, so you cant just put any on your server without some legal issues, but if you control the copyright, then anythings possible.

The reason for wanting to use an embedded font over a CSS sprite is only really apparent when we get to new high pixel density displays. They render type so cleanly that it looks almost like it is printed on paper; the pixels become smooth and indistinguishable. Vectors can take advantage of this higher density with very smooth curves, whereas rasterised, pixel-based graphics are blocky and stick out when compared with the smoothness of the fonts. What if there was a way to make the icons just as smooth as the fonts? There is make them fonts too!

A few sites have done this. GitHub.com is one that, except for a fewavatar images, completely uses symbol fonts. Go ahead: try zoomingin on your favourite website; see how blocky and pixelated the iconimages look. Now try the same thing on GitHub and youll see how smooth everything looks.