Differentiable Variable Fonts

Abstract Typography is an essential component of visual communication. Editing and animating text appearance for graphic designs, title sequences, commercials, and logos remain highly skilled tasks requiring detailed, hands‐on efforts from pro artists. Automating these challenging manual workflows requires balancing the competing goals of maintaining a text's legibility and aesthetics, while enabling creative expression. Variable fonts, recent parametric extensions to traditional fonts, offer the promise of new ways to ease and automate typographic design and animation. Variable fonts provide custom‐constructed parameters along which fonts can be smoothly varied. These parameterizations could then potentially serve as high‐value continuous design spaces, opening the door to modern automated design‐optimization tools. However, currently variable fonts are underutilized in creative applications, exactly because artists so far still need to manually tune font parameters. Our work provides intuitive and automated font design and animation workflows with differentiable variable fonts. To do so we distill the current variable font specification to a compact mathematical formulation that differentiably connects the highly non‐linear, non‐invertible mapping of variable font parameters to the underlying vector graphics representing the text. In turn, this enables us to construct a differentiable framework, with respect to variable font parameters, that allows us to perform gradient‐based optimization of energies defined on vector graphics control points, and likewise, via differentiable SVG rasterization, on target rasterized images. We demonstrate the utility of this framework with a range of applications, including direct shape manipulation, overlap aware modeling, physics‐based text animation, and automated font‐design optimization. Our work now enables leveraging the carefully designed affordances of variable fonts with differentiability to use modern design‐optimization technologies, and so opens new possibilities for easy, intuitive and expressive typographic design workflows.