One of the coolest features in SVG is the SVG font.

To truly appreciate the virtues of such an amazing technology, it’s worthwhile to step back in time to appreciate how this feature came to be.

Back in the eighties when laser printers were just beginning to become popular, the single biggest improvement in typography was the introduction of scalable fonts. Finally a type designer could specify the outline of each font glyph and have it drawn at any size. Prior to that, fonts were limited to bitmaps – pixelized images that were restricted to a single size. Needless to say, the introduction of a font outline that could be scaled suddenly enabled a type design to be used at any size and the result would be nice crisp edges no matter how zoomed the glyph was.

But scaling an outline wasn’t without its own problems. When fonts were made from bitmaps, a font designer would hand-tune the pixels painted by the font in order for it to look good. By automatically scaling a font, the process of generating the pixels was automated and so, no such tuning was possible. On laser printers of the day each pixel was either on or off, so the visual result was usually sub-optimal. Things like the vertical bars in an ‘M’ for example could end up a different number of pixels thick which looks bad. So, some smart font guys came up with the idea of ‘hinting’. A ‘hint’ tells the pixel generator how to ‘massage’ the outline of the font to make sure things like the number of pixels in the vertical bars of an ‘M’ are the same number of pixels wide.

With pixels that are on or off, hinting made a huge difference and the laser printers of the day became wildly popular with their scalable typefaces.

As time went on, laser printers started to support multiple grey levels at each pixel, much like your screen does. The multi-level pixels allowed a new form of pixel generation using what’s called anti-aliasing. Depending on how well an anti-aliasing algorithm works it can be very hard to distinguish between a hinted font outline and an unhinted font outline when it is drawn using anti-aliasing. At small font sizes experts can tell the differences, but the differences can be minor. Nevertheless for clear legible black and white text it is hard to outdo a hinted font. That is what OpenType excels at. There are auto-hinting algorithms in existence today that can match the visual output of a hinted font and so hinting is an old technology that isn’t really necessary with modern displays that have both multi-level pixels and high pixel densities such as the iPhone 4.

In the early nineties, a bunch of smart people working with page description languages began to experiment with fonts that go beyond a boring outline that just gets filled with a single color or color blend. The Postscript language used in laser printers allowed a designer to specify any graphical elements as the content in a font glyph. This enabled unrivalled flexibility for type and graphic designers. Another language called OpenPage introduced the concept of Porter-Duff compositing into a laser printer language as well as introducing the idea of animation of font glyphs if the language was used for display to a screen. Animating the font glyphs allowed a font designer to make font glpyhs with whipping flames, cogs that turn, etc.

The shift from a font being an imitation of melted metal type ideas from the printing press era into the modern world of computer graphics was a paradigm shift in flexibility available to font designers, typographers and graphic artists alike.

Being able to design any graphic and make it a font glyph provides unparalled flexibility to represent company logos, ancient manuscript characters, cartoon like glyphs etc. The effects possible using these sort of fonts are bounded only by the artists imagination. Of course it’s possible to draw plain graphics that look like the fancy fonts too, but the problem with that sort of approach is that vision impaired people wouldn’t be able to use tools that let the textual content of a document be extracted and made available to them to read.

The font glyph made the transition from the metal ages into the digital age by virtue of the maturation of computer graphics and the notion of what a font glyph actually is.

So what’s this got to do with SVG fonts?

SVG fonts provide this exact capability. It is possible to define any arbitrary graphic as the glyph in an SVG font and use/re-use the graphic to represent text in an SVG document. This means that an artist, designer or typographer can use this capability to maximize the design flexibility of their artwork or document. This is a powerful tool in the arsenal of any designer.

A number of SVG viewers support this type of font, it’s really something worth learning about and experimenting with.

At the upcoming SVG Open 2010 conference there will be a workshop on SVG Fonts on the final day to teach aspects of SVG Fonts and how they can be created and used. We hope to post some examples of SVG Fonts on this site some time in the future as well.

If you’re interested in typography and moving into the digital age of fonts then SVG Fonts deserve your attention.