Variable Font Animation
also known asvariable font morph · variable axis animation · animated weight · font interpolation · OpenType animation
Animating a font's design axes — weight, width, slant, optical size — over time, so a single typeface morphs without swapping files.
Variable fonts ship a single file containing a continuous range across one or more design axes (weight, width, slant, optical size, plus custom axes the type designer defines). Animating those axes — interpolating `font-variation-settings` over time — produces type that breathes, swells, leans, or morphs without any character substitution.
The effect is distinct from kinetic typography: nothing moves through space. The letterforms themselves change shape. A logo can pulse from light to black on hover; a headline can grow narrower as the viewport shrinks; a hover state can subtly lean italic without swapping a file. Because the morph is interpolated by the font engine, it's always perfectly on-curve and stays crisp at any size.
The technique requires a font with named or custom axes (Recursive, Fraunces, Inter, Roboto Flex, Decovar are common picks) and a CSS `transition` on `font-variation-settings`. Performance is excellent — one font file, one declaration — but the design discipline is harder than it looks: most weight ranges are not designed to be animated through, so the middle values can feel awkward.
Variable fonts were introduced as part of OpenType 1.8 in 2016, jointly developed by Adobe, Apple, Google, and Microsoft. Browser support landed across all major engines by 2018, and animated `font-variation-settings` became a recognized technique on type foundry and studio sites soon after.
- Logo and wordmark hover states
- Headlines that respond to scroll, hover, or viewport size
- Type specimens and foundry sites showcasing a variable family
- Brands where the wordmark itself is the animated element
- Body copy — axis animation distracts from reading
- Long animations — even a 500ms morph on a heading can feel sluggish
- Fonts whose axes are not designed for smooth interpolation
- +Use `transition: font-variation-settings 250ms ease`
- +Stay near named axis stops — designed positions look better than midpoints
- +Combine 2 axes max (e.g. weight + slant); more reads as chaos
- +Honor `prefers-reduced-motion` and snap to a static state
- −Don't animate body copy axes — only display sizes
- −Don't interpolate across the full weight range continuously — pick a tight band
- −Don't use static fonts and fake the morph with multiple files — defeats the point
Build a wordmark hover effect using a variable font in React + Tailwind. Font: load a variable font with both weight + width axes (Recursive, Roboto Flex, or Inter Variable) via `@font-face` with `font-weight: 100 900` and (if available) `font-stretch: 75% 125%`. Markup: a single `<a>` or `<h1>` containing the wordmark, e.g. "STUDIO". CSS: ```css .wordmark { font-family: 'Roboto Flex', sans-serif; font-size: clamp(48px, 8vw, 120px); letter-spacing: -0.02em; font-variation-settings: 'wght' 400, 'wdth' 100; transition: font-variation-settings 280ms cubic-bezier(0.22, 1, 0.36, 1); cursor: pointer; } .wordmark:hover { font-variation-settings: 'wght' 800, 'wdth' 110; } @media (prefers-reduced-motion: reduce) { .wordmark { transition: none; } } ``` Do: stay near designed axis stops, combine max 2 axes, use only on display sizes. Don't: animate body copy, interpolate across the full weight range, or fake it with multiple static font files. Acceptance: on hover the letterforms physically morph (get heavier and slightly wider) — nothing translates or scales. With reduced-motion, hover snaps to the final state instantly.
Paste into Claude Code, Cursor, or Lovable to apply variable font animation to your project.
People also ask
What's the difference between variable font animation and kinetic typography?
Kinetic typography moves type through space — slides, fades, masks. Variable font animation changes the shape of the letterforms themselves while they sit still. They combine well, but they're different techniques.
Which fonts are good for variable axis animation?
Recursive, Fraunces, Roboto Flex, Inter, and Decovar are designed for it. Most foundry-published variable fonts only expose a weight axis, which is fine for hover effects but limits the design range.
Does variable font animation work in all browsers?
Yes — variable fonts and animated `font-variation-settings` are supported in all current Chromium, Firefox, and Safari versions. Older browsers fall back to the closest static instance.