Variable Font Weight Morph

A variable typography morph that changes weight, width, and slant axes inside a reserved text track instead of using scale transforms.

Duration: 4s
Resolution: 1440×900
Format: CSS

variable-fontfont-variation-settingswghtwdthslnt

Variable Typography / Axis Morph

Variable Font Weight Morph

Font variation settings interpolate weight and width inside a reserved text track so morphing type does not cause nearby layout shift.

weight pulse axis morph - 2.6s cycle · 1.00 intensity

Weight

wght axis · stable track

Weight Pulse

A boldness morph changes emphasis while the preview stage reserves enough width for the heaviest frame.

The axis values change inside a fixed inline track with overflow containment.

Elastic Width

wdth axis · no scaleX

Width Breathing

Width variation breathes through font settings rather than geometric scaling.

The track sets a max-content-like allowance, then clips any browser-specific axis expansion.

Axis Morph

slnt axis · controlled tilt

Editorial Slant

A restrained slant and weight morph creates motion without distorting glyph geometry.

Variation settings change the glyph design while the containing line box stays fixed.

Weight

Motion contract: The axis values change inside a fixed inline track with overflow containment.
Accessibility: The word is still live text and reduced motion freezes a mid-weight readable state.

Cycle duration2.6s

Motion intensity1.00

Use actual font axes when available; do not fake variable type with scale transforms.

.variable-word {
  display: inline-block;
  min-width: 8ch;
  overflow: hidden;
  font-variation-settings:
    "wght" calc(420 + 360 * 1.00),
    "wdth" calc(88 + 18 * 1.00);
  animation: variableAxis 2.60s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .variable-word { animation: none; font-variation-settings: "wght" 650, "wdth" 100; }
}