Why is my variable font morph not visibly changing?

The loaded font may not expose the axis you are animating. Check the font file or provider options for wght, wdth, slnt, opsz, or other axes, and test the exact browser-rendered font stack.

Why does morphing text cause layout shift?

Axis changes can alter glyph width and line metrics. Put the animated word in a reserved inline track, then animate inside that track instead of letting the line remeasure on every frame.

Can I use transform: scaleX() instead of a width axis?

It is a visual shortcut, not a variable font morph. scaleX distorts the glyph geometry and also scales shadows and hit areas. Use wdth when the font supports it, and fall back to static text when it does not.

Are font-variation animations expensive?

They can trigger text rasterization work, especially at large sizes or on many elements. Keep them short, limit the number of simultaneously morphing words, and avoid combining them with heavy blur filters.

Which browsers support font-variation-settings?

Modern Chromium, Firefox, and Safari support CSS variable font settings, but axis availability depends on the actual font. Use @supports for fallback styling and keep the text readable without animation.

← Back to gallery

Variable Font Weight Morph

Live text morphs through font-variation-settings axes (wght, wdth, slnt) inside a reserved track — no scale transforms, no layout shift. Three axis programs: a weight pulse, an elastic width breathe, and a multi-axis morph.

variable-fontfont-variation-settingswghtwdthslntno-layout-shiftprefers-reduced-motion

wght axis · stable track

Weight Pulse

A boldness morph cycles the weight axis from regular up to heavy and back. The preview stage reserves enough inline width for the heaviest frame so neighboring content never shifts as the weight changes.

wdth axis · no scaleX

Width Breathing

Width variation breathes through font-variation-settings rather than geometric `transform: scaleX()` — the glyph design itself widens, no distortion. The reserved text track prevents axis changes from pushing neighboring content around.

slnt axis · controlled tilt

Editorial Slant

A restrained slant + weight morph creates motion without distorting glyph geometry. Slant values stay conservative; strong tilt can degrade reading even when the axis is technically supported.

Cycle duration3.0s

Glow intensity1.00×

Helped you ship something? 🐟 Send my cat a churu

.varfont-word {
  display: inline-block;
  /* Reserve enough inline space for the heaviest / widest frame so
     the morph never shifts neighboring layout. */
  min-width: min(100%, 12ch);
  padding: 0 0.08em;
  overflow: hidden;
  color: #fff7ed;
  font-variation-settings: "wght" 360, "wdth" 100, "slnt" 0;
  text-shadow: 0 0 22px rgba(251, 191, 36, 0.13);
  animation: varfont-axis 3.00s ease-in-out infinite alternate;
}

@keyframes varfont-axis {
  from { font-variation-settings: "wght" 360, "wdth" 100, "slnt" 0; }
  to   { font-variation-settings: "wght" 880, "wdth" 100, "slnt" 0; }
}

@media (prefers-reduced-motion: reduce) {
  .varfont-word {
    animation: none;
    /* Pin to a balanced static axis state for readability. */
    font-variation-settings: "wght" 360, "wdth" 100, "slnt" 0;
  }
}

How to make this

A variable font morph animates real font axes inside a reserved text track, so weight, width, or slant can move without pushing nearby layout.

1<p class="varfont-demo">2  <span class="varfont-demo__label">Current mode</span>3  <span class="varfont-demo__word">Axis Morph</span>4</p>5 6<style>7.varfont-demo {8  display: grid;9  gap: .5rem;10  width: min(100%, 18rem);11  margin: 0;12  color: #f8fafc;13  font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;14}15.varfont-demo__label {16  color: #93c5fd;17  font: 700 .72rem/1.2 ui-sans-serif, system-ui;18  letter-spacing: .08em;19  text-transform: uppercase;20}21.varfont-demo__word {22  display: inline-block;23  width: min(100%, 14ch);24  overflow: hidden;25  color: #fff7ed;26  font-size: clamp(2rem, 9vw, 4rem);27  font-weight: 430;28  font-variation-settings: "wght" 430, "wdth" 96, "slnt" 0;29  text-shadow: 0 0 24px rgba(251, 191, 36, .2);30  animation: varfont-morph-recipe-axis 3s ease-in-out infinite alternate;31}32@keyframes varfont-morph-recipe-axis {33  from {34    font-weight: 430;35    font-variation-settings: "wght" 430, "wdth" 96, "slnt" 0;36  }37  to {38    font-weight: 860;39    font-variation-settings: "wght" 860, "wdth" 112, "slnt" -6;40  }41}42@supports not (font-variation-settings: normal) {43  .varfont-demo__word { font-weight: 760; }44}45@media (prefers-reduced-motion: reduce) {46  .varfont-demo__word {47    animation: none;48    font-weight: 650;49    font-variation-settings: "wght" 650, "wdth" 100, "slnt" 0;50  }51}52</style>

Annotated snippet

Line 1The animated word is still live text, not an image or canvas. It remains selectable, copyable, and exposed as ordinary text content.
PitfallWhy is my variable font morph not visibly changing?
The loaded font may not expose the axis you are animating. Check the font file or provider options for wght, wdth, slnt, opsz, or other axes, and test the exact browser-rendered font stack.
Line 13The font stack must include a variable font with the axes you animate. Weight usually works first; width and slant need a font that actually exposes wdth and slnt.
PitfallWhy is my variable font morph not visibly changing?
The loaded font may not expose the axis you are animating. Check the font file or provider options for wght, wdth, slnt, opsz, or other axes, and test the exact browser-rendered font stack.
Line 22Reserve the widest expected inline track before animation starts. Axis changes can alter glyph metrics, so the track prevents nearby text from reflowing.
Watch the trailing arrow. Without a reserved track, the wght+wdth axis changes alter glyph width every frame, so the row reflows and the arrow oscillates left and right. With width: 4ch reserved, the word renders inside a fixed track and the arrow stays put.
PitfallWhy does morphing text cause layout shift?
Axis changes can alter glyph width and line metrics. Put the animated word in a reserved inline track, then animate inside that track instead of letting the line remeasure on every frame.
Line 28font-weight is kept in sync as a fallback and as a readable declaration. font-variation-settings carries the exact multi-axis values.
PitfallWhich browsers support font-variation-settings?
Modern Chromium, Firefox, and Safari support CSS variable font settings, but axis availability depends on the actual font. Use @supports for fallback styling and keep the text readable without animation.
Line 32The keyframe changes axis values, not transforms. That preserves glyph drawing quality and avoids scaling text shadows, focus outlines, or hit areas.
Both words start identical. scaleX(1.8) stretches the existing glyph horizontally and ALSO scales the underline, drop-shadow, and outline — strokes thin out, the underline becomes a fat smear. Animating the wght axis from 300 to 900 makes the font redraw at a heavier weight, so the strokes thicken naturally while the underline and shadow stay sharp.
PitfallCan I use transform: scaleX() instead of a width axis?
It is a visual shortcut, not a variable font morph. scaleX distorts the glyph geometry and also scales shadows and hit areas. Use wdth when the font supports it, and fall back to static text when it does not.
Line 42Unsupported browsers get a stable heavy weight. The fallback should be readable static type, not invisible text waiting for unsupported axes.
PitfallWhich browsers support font-variation-settings?
Modern Chromium, Firefox, and Safari support CSS variable font settings, but axis availability depends on the actual font. Use @supports for fallback styling and keep the text readable without animation.
Line 45Reduced motion pins a balanced static axis state. It removes the repeated morph while keeping the same word and layout footprint.
PitfallAre font-variation animations expensive?
They can trigger text rasterization work, especially at large sizes or on many elements. Keep them short, limit the number of simultaneously morphing words, and avoid combining them with heavy blur filters.

Advanced

Stagger the axis morph per character so the wave ripples through the word

Same font, same wght/wdth/slnt keyframe values, same 3s ease-in-out cycle. BEFORE runs the keyframe on the whole word as one unit — every glyph hits peak weight together and the morph reads as a synchronized pulse. AFTER wraps each character in its own span and applies the SAME keyframe with 60ms stagger per nth-child. The wave of axis change ripples left-to-right through the word — same variable-font technique, just at glyph granularity instead of word granularity.

View explanation and full code67 lines

The base recipe animates font-variation-settings on the whole word as a single block — every glyph hits peak weight + width together. Production variable-font headlines (Stripe, Vercel, GitHub Octicons docs) wrap each character in its own span and stagger the SAME keyframe by ~60ms per glyph. The wave of axis change ripples left-to-right through the word, like the wght/wdth/slnt values are being typed in real time. Pure CSS extension — same font-variation-settings keyframe, same axes; just applied at glyph granularity instead of word granularity, with animation-delay per nth-child.

Paste this as a complete alternative to the base recipe — the word HTML changes from one <span>Axis Morph</span> to one <span> per character, and the animation moves from the wrapper down to each character.

1<p class="varfont-demo">2  <span class="varfont-demo__label">Current mode</span>3  <span class="varfont-demo__word" aria-label="Axis Morph">4    <span aria-hidden="true">A</span><span aria-hidden="true">x</span><span aria-hidden="true">i</span><span aria-hidden="true">s</span><span aria-hidden="true">&nbsp;</span><span aria-hidden="true">M</span><span aria-hidden="true">o</span><span aria-hidden="true">r</span><span aria-hidden="true">p</span><span aria-hidden="true">h</span>5  </span>6</p>7 8<style>9.varfont-demo {10  display: grid;11  gap: .5rem;12  width: min(100%, 18rem);13  margin: 0;14  color: #f8fafc;15  font-family: "Roboto Flex", ui-sans-serif, system-ui, sans-serif;16}17.varfont-demo__label {18  color: #93c5fd;19  font: 700 .72rem/1.2 ui-sans-serif, system-ui;20  letter-spacing: .08em;21  text-transform: uppercase;22}23.varfont-demo__word {24  display: inline-block;25  width: min(100%, 14ch);26  overflow: hidden;27  color: #fff7ed;28  font-size: clamp(2rem, 9vw, 4rem);29  text-shadow: 0 0 24px rgba(251, 191, 36, .2);30}31.varfont-demo__word > span {32  display: inline-block;33  font-weight: 430;34  font-variation-settings: "wght" 430, "wdth" 96, "slnt" 0;35  animation: varfont-morph-recipe-axis 3s ease-in-out infinite alternate;36}37.varfont-demo__word > span:nth-child(1)  { animation-delay:  0ms; }38.varfont-demo__word > span:nth-child(2)  { animation-delay: 60ms; }39.varfont-demo__word > span:nth-child(3)  { animation-delay: 120ms; }40.varfont-demo__word > span:nth-child(4)  { animation-delay: 180ms; }41.varfont-demo__word > span:nth-child(5)  { animation-delay: 240ms; }42.varfont-demo__word > span:nth-child(6)  { animation-delay: 300ms; }43.varfont-demo__word > span:nth-child(7)  { animation-delay: 360ms; }44.varfont-demo__word > span:nth-child(8)  { animation-delay: 420ms; }45.varfont-demo__word > span:nth-child(9)  { animation-delay: 480ms; }46.varfont-demo__word > span:nth-child(10) { animation-delay: 540ms; }47@keyframes varfont-morph-recipe-axis {48  from {49    font-weight: 430;50    font-variation-settings: "wght" 430, "wdth" 96, "slnt" 0;51  }52  to {53    font-weight: 860;54    font-variation-settings: "wght" 860, "wdth" 112, "slnt" -6;55  }56}57@supports not (font-variation-settings: normal) {58  .varfont-demo__word > span { font-weight: 760; }59}60@media (prefers-reduced-motion: reduce) {61  .varfont-demo__word > span {62    animation: none;63    font-weight: 650;64    font-variation-settings: "wght" 650, "wdth" 100, "slnt" 0;65  }66}67</style>

Notes

Overview

Variable typography lets a single font file expose continuous axes — wght (weight), wdth (width), slnt (slant). Animating font-variation-settings across these axes morphs the glyph shape live without layout shift (because the track reserves the heaviest / widest frame ahead of time).

When to use it

Reach for variable-font morph on hero headlines, animated logos, and editorial pull-quotes that want type-design personality. Skip it for body copy — the morph reads as noise at reading sizes. Skip it for content that ships without the matching variable font — the morph silently degrades to nothing.

How it works

Set the variable font as a CSS @font-face with font-variation-settings: "wght" 400 as base. Animate via a @keyframes rule that transitions font-variation-settings: "wght" 100 through "wght" 900 and back. The browser interpolates the axis value continuously; the font binary contains every intermediate weight as part of a single file. The track reserves layout for the heaviest weight ahead of time via font-synthesis-weight: none and a generous letter-spacing buffer.

Production gotchas

Browsers still cannot interpolate font-variation-settings by individual axis name — you must list all animated axes in every keyframe, in the same order, or the interpolation breaks and the font snaps. Variable fonts can be 2–3x larger than a static cut; subset aggressively for production. Layout shift between weights is the silent killer: the heaviest weight is wider, so without explicit width reservation the line reflows mid-animation. Use font-variation-settings: "wght" 900 as your reservation baseline.

Accessibility

The morph is purely visual — screen readers see unchanged text. Under prefers-reduced-motion: reduce drop the animation and pin the font to a mid-axis value (e.g. weight 500). Some readers with custom typography (e.g. OpenDyslexic) override the font entirely; the morph silently disappears, which is the correct behavior — do not fight reader customization.

References

Implementation depth

Variable font morphing is strongest when it changes emphasis without changing layout. Animate font-variation-settings across wght or wdth axes while reserving enough inline space for the widest state.

Do not assume every font exposes the same axes. Feature-detect the chosen family, avoid swapping fonts mid-animation, and use reduced motion to pin the most readable weight rather than the most dramatic one.

Variable Font Weight Morph