Variable fonts ship multiple typographic instances in a single file. A traditional font family — Regular, Medium, Bold, Italic — requires four files. A variable font with weight and italic axes requires one. The performance case is straightforward. The accessibility case — being able to increase font weight for users who need higher contrast — is equally clear.
But there is a third use case that the performance and accessibility conversations have largely crowded out. Variable fonts are, at their core, a parametric system. Every axis is a number. Numbers can be animated. And when you animate type, you get something that no other medium can produce.
The axes that matter for motion
Most variable fonts ship with a weight axis (wght) and sometimes a width axis (wdth). These are the obvious ones. But the more interesting axes for motion work are the optical size axis (opsz), the grade axis (GRAD), and — for the handful of fonts that have it — the slant axis (slnt).
The grade axis is particularly underused. Grade adjusts the visual weight of a typeface without changing its metrics — the letters get heavier or lighter without affecting line length or layout. This means you can animate grade in response to user interaction without causing layout shift. A heading that gets heavier on hover. A label that pulses with grade to indicate loading state. A score that animates its grade as a value changes.
/* Base state */
.headline {
font-variation-settings: 'wght' 400, 'GRAD' 0;
transition: font-variation-settings 200ms ease-out;
}
/* Hover state — weight and grade shift together */
.headline:hover {
font-variation-settings: 'wght' 700, 'GRAD' 150;
}
/* Loading state — grade pulses without layout shift */
@keyframes grade-pulse {
0%, 100% { font-variation-settings: 'wght' 400, 'GRAD' -50; }
50% { font-variation-settings: 'wght' 400, 'GRAD' 150; }
}
.loading {
animation: grade-pulse 1.2s ease-in-out infinite;
}Every axis is a number. Numbers can be animated. And when you animate type, you get something that no other medium can produce.
Scroll-driven typography
The CSS scroll-driven animations specification — now shipping in all major browsers — makes variable font animation genuinely practical at scale. You can bind font-variation-settings directly to scroll position without a single line of JavaScript.
The effect is subtle when done well. A hero headline that gains weight as you scroll past it. A navigation label that shifts optical size as the viewport narrows. A pull quote that increases grade as it enters the viewport. None of these are dramatic. All of them are felt.
@keyframes weight-on-scroll {
from { font-variation-settings: 'wght' 300; }
to { font-variation-settings: 'wght' 800; }
}
.scroll-headline {
animation: weight-on-scroll linear;
animation-timeline: scroll(root);
animation-range: entry 0% entry 100%;
}The fonts worth using
Not all variable fonts are created equal for motion work. The axes need to be well-designed — a poorly interpolated weight axis will produce ugly intermediate states. The fonts we return to most often for motion work are Fraunces (optical size and softness axes), Inter (weight and optical size), and Recursive (which has a monospace-to-sans axis that is genuinely unlike anything else).
Fraunces in particular has a 'wonk' axis — a custom axis that controls the degree of optical irregularity in the letterforms. Animating wonk produces a handmade-to-refined transition that is unlike anything you can achieve with static type. It is the kind of detail that makes a typographer stop scrolling.
The constraint
Variable font animation is powerful enough to be abused. The constraint we apply is this: the animation must serve the content, not the other way around. A headline that gains weight on scroll should gain weight because that weight communicates something — emphasis, arrival, resolution. Not because it looks impressive.
The best variable font animations are the ones users don't consciously notice. They feel the page. They don't see the technique. That is the standard we hold ourselves to, and the standard we'd encourage anyone working in this space to adopt.