Variable Font Weight Breathe Animation — CSS JS

A variable font weight breathe animates the "wght" axis of a variable font continuously between light and bold, so a headline appears to inhale and exhale rather than sitting at a single static weight — an effect only possible because modern variable fonts expose weight as a continuously interpolatable axis instead of a fixed set of separate font files. This snippet also demonstrates binding that same axis to scroll position, which is a common pattern on editorial and type-forward portfolio sites. For an animation of font size instead of weight, see CSS clamp responsive type demo; for a shimmering color treatment rather than a weight change, see animated gradient text.

The font-variation-settings property

Variable fonts expose one or more axes — most commonly wght (weight), but also wdth (width), slnt (slant), and custom axes depending on the font. font-variation-settings: "wght" 400 sets the weight axis to exactly 400, and unlike swapping between separate font-weight: 400 and font-weight: 700 font files, this value can be any number between the font's declared minimum and maximum — 437, 612, 890, anything — with the glyph outlines smoothly interpolated by the font renderer itself.

Driving the axis from a requestAnimationFrame loop

breatheLoop() increments a phase value by a small amount every frame and computes 400 + Math.sin(phase) * 260, producing a smooth oscillation between roughly 140 and 660 that repeats indefinitely. setWeight(w) clamps that value to the safe 100-900 range and writes it into heading.style.fontVariationSettings = "'wght' " + clamped. Because Math.sin naturally eases in and out of its peaks and troughs, the breathing has organic acceleration and deceleration without needing a separate CSS easing curve.

Interrupting the breathe with manual and scroll control

A breathing boolean gate lets the user take over: dragging the range <input> sets breathing = false and calls setWeight() directly from the slider's value, pinning the headline's weight to a chosen number. A scroll listener does the same thing but computes the target weight from scroll progress — window.scrollY divided by the maximum scrollable distance — mapped into the 150 to 850 range, so scrolling down the page visibly bulks up the headline's weight. Both interactions permanently disable the idle breathing loop by flipping the same breathing flag, since breatheLoop checks it before writing a new weight every frame.

Font compatibility note

This demo uses the system Arial fallback stack, which on most modern operating systems resolves to a font with variable weight support in current browsers; for production use, load an explicit variable font file (@font-face with font-weight: 100 900 and src: url(...) format("woff2-variations")) such as Inter Variable or Roboto Flex so the effect is guaranteed to work identically across browsers and platforms.