Live font interpolation with SVG

Live interpolation of fonts in the browser promises to be The Hot Next Thing in font technology (see Nick Sherman’s inspiring ATypI 2013 talk (this video link sadly seems broken), his A List Apart article, and Andrew Johnson’s article and proof-of-concept on the same platform). The idea is massively exciting to me; when I found myself with some time today, I played around with live interpolation on the basis of SVG.

You can see the result, a little proof-of-concept, above (and in the current typologic nameplate). The code reads font data (path definitions and widths of glyphs) from an SVG font file, and animates the interpolation between the two extremes, with a little bouncy extrapolation happening around the edges.

This sort of thing is relatively easy. SVG is not only a vector graphics format for the web, but also an (almost-obsolete) font format. The interesting thing about SVG here is that it’s XML-based, hence human-readable and, unlike other webfont formats, accessible by scripts running in browsers. Conveniently, there are JavaScript libraries for working with SVG graphics, which can also be used with SVG fonts. I used Snap.svg (the newer brother of Raphaël). Many of Snap’s bells and whistles may be over the top for type work, but it has the nice feature of being able to load existing SVG files (exported from Illustrator, or in our case, font editors) that can then be edited, animated etc. via JavaScript. Including, yes, interpolation.

Now, seriously though – while it does interpolate, this does of course not come very close to solving the bigger problem. It’s more of a party trick that I’m throwing at a much bigger building site. (Also insert necessary disclaimer that I am not a developer, and am sure this can be done more elegantly. For one thing, in this implementation the result is displayed as a series of graphics, and not searchable/crawlable as text.) For actual body text, there are good reasons why SVG is not commonly used for webfonts; for one thing, I’m not sure kerning in SVG fonts is generally supported; OpenType features are not, and nevermind hinting.

So overall, I’m dreaming of a new web font format down the road, optimized for live interpolation. In the meantime, maybe SVG could be interesting for people who want to play around with interpolation of just a little bunch of letters? It’s a bit messy, but fun. Please feel free to have a look at the code (standalone page here), re-use, improve, discuss.

Update 21 Feb: Very cool demo page by Jeremie Hornus with a wonderfully subtle and effective, live-interpolated logotype for responsive design. This uses the same tools as described above (SVG with Snap.svg).

Update 18 June: A fantastic collection of responsive + animated lettering examples by Erik van Blokland (also made with Snap.svg) as presented at Typographics 2015.