Differentiable Variable Fonts

TL;DR

This work addresses the challenge of editing and animating text while preserving legibility and typographic style. It reframes variable fonts as differentiable interpolations by modeling each glyph as a default outline plus delta sets modulated by axis weights $\mathbf{w} \in [-1,1]^n$ through a nonlinear scaling $\gamma(\mathbf{w})$, enabling gradient-based optimization via $\mathcal{E}(\Theta) = \|\mathcal{F}(\mathbf{p}(\Theta))\|^2$. A PyTorch-based implementation demonstrates four applications—direct manipulation, overlap-aware modeling, physics-driven kinetic typography, and font matching—across interactive design, animation, and analysis. The approach promises intuitive, automated typographic design workflows and sets the stage for new authoring tools that exploit differentiable variable-font spaces.

Abstract

Editing and animating text appearance for graphic designs, commercials, etc. remain highly skilled tasks requiring detailed, hands on efforts from artists. Automating these manual workflows requires balancing the competing goals of maintaining legibility and aesthetics of text, 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 automated design optimization tools. However, currently variable fonts are underutilized in creative applications, because artists so far still need to manually tune font parameters. Our work opens the door to 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. This enables us to construct a differentiable framework, with respect to variable font parameters, allowing us to perform gradient based optimization of energies defined on vector graphics control points, and on target rasterized images. We demonstrate the utility of this framework with four applications: 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, opening new possibilities for easy and intuitive typographic design workflows.

Figures (14)

• Figure 1: A variable font with weight and serif as variable axes.
• Figure 2: General-purpose direct manipulation often compromises legibility and stylistic consistency. We compare with Puppet Warp liu2014skinning, default settings with automatically generated pins (see inset). For character T, our method maintains style by cleanly extending the serif when the indicated point is dragged downward, whereas Puppet Warp produces distortions. For the Chinese character 人(person), Puppet Warp deforms the shape into 入(enter), a different character. Our method preserves readability, legibility, stylistic consistency.
• Figure 3: Mapping from user facing slider values to the normalized axes values
• Figure 4: Glyph variations are produced by adding delta sets to the default glyph $\overline{\mathbf{p}}$, with each delta set scaled by a nonlinear support function of $\mathbf{w}$. (a) Example variations of the character ‘a’ from the variable font Afacad Flux at $w_{\text{wght}}=-1$ and $w_{\text{wght}}=0.999$ (other axes at default), showing the contributing delta sets. (b) One-dimensional view of the support functions $\phi$ along the weight axis, indicating the regions of influence of the delta sets in (a).
• Figure 5: The scaling functions of delta sets are highly non-linear and non-invertible as they are defined as products of the support functions across all axes.