Sort of ‘animation’ table in OTVar

LeMo aka PatternMan aka Frank E Blokland

I was just wondering whether it would be possible to implement a sort of ‘animation’ table in variable fonts, which would contain a sequence of settings for the axes –in some way connected with an interval definition. Basically exactly the same as if one makes a screen recording of a series of changes via sliders. One could make such a meta table programmable, and hence ‘non-fixed’ animations with fonts (which, of course, don’t have to contain letters by definition), for, for example, web purposes or in any other environment that supports variable fonts. Changing the animation would just mean changing the axes-settings in the table (with, for example, OTM). This way lightweight animations can be made, I reckon.

Undoubtedly some of you know (much) more about these kind of things than I do, especially when it comes to the complexity involved. One could also argue that non-professional end users do not want to play around with sliders and parameters, and consequently also not with such tables. However, I can imagine that such an ‘animation’ table could offer a lot of options for the somewhat more tech-savvy designers.

What do you think?

Ray Larabie

I like it. Maybe someday there could be an official TIME axis that can be looped or ping-ponged so it can be standardized.

John Hudson

It's unnecessary for this to be in the font itself, since it is so easy to create an animation of any variable font within CSS.

Thomas Phinney

I agree that it's easy in CSS. The only reason to encode such things in the font would be if there was some particular non-obvious demo that one wanted to ensconce in the font.

I guess it seems non-crazy. After all, you can put a custom sample text string in the font....

Georg Seifert

We are speaking abou Meta Axes for some time. This proposal goes quite a bit further as we had in mind but is a very good generalization and could solve many problems and could lead to a much better user experience. It could replace avar, make HOI possible and many more. 

The term ‘animation’ might be a bit misleading but is actually very fitting. 

One thing I would use this for is to build a size axis from weight and width. If you could have several breakpoints it could be much nicer. 

And there is not always the possibility to have extensiv custom CSS. Like in normal apps. It would be a usage nightmare if you need to send a complex table along with the font that explains what combination of sliders you need to set to get a certain result (one could add a lot of custom instances, but that would beat the purpose of variable fonts)

Dave Crossland

Good to hear pondering how to make an optical size axis from weight and width.

Well, I'm looking forward to when you start thinkingt about type network parametric axes

Cory Maylett

I'm wondering what the practical value of these kinds of animated (for lack of better word) uses of variable fonts might be — CSS-driven or otherwise. The examples I've seen (like this one) are interesting, but the interest is in the novelty, which would soon be lost if it becomes commonplace. If there's a compelling functional use for it, great, but I'm having trouble coming up with many reasons beyond one-off situations, demos and decorative embellishments.

Web browsers already support dynamic, interactive animation using HTML5 canvas and javascript, but canvas, despite its potential, has never been widely adopted to the point of living up to that potential. Canvas can't imitate a variable font, of course, but given the limited interest web designers and developers have shown in it, what would be the compelling use of animations restricted mainly to typography and only to the predetermined and built-in axes of the fonts being used?

I'm not arguing against it, by the way. I'm really just asking what solid reasons exist, beyond it being sort of cool, are there to do it.

Dave Crossland

Icon fonts could use this to add subtle motion design touches to icons, eg when changing state because of a voice event

Georg Seifert

Optical sizes from weight and width? For small sizes add a tiny bit of weight and width and for bigger ones do the opposite. The problem is that usually those adjustments are not linear. So being able to have several breakpoints is really helpful.