Variable Font Morph
A single word rendered with a variable font. On hover, the weight axis slides from 300 to 800, and the text visibly breathes. The easing curve overshoots slightly before settling, giving it physical weight. Built entirely with font-variation-settings and a CSS transition. Drag the slider to explore the weight axis manually.
Variable fonts embed multiple instances of a typeface in a single file. The wght axis is the most common — a single font file contains every weight from 100 to 900. This experiment makes that axis tactile.
font-variation-settings. This CSS property directly addresses font axes by their four-character tag. 'wght' 600 sets the weight axis to 600. Unlike font-weight, which maps to discrete named stops, font-variation-settings accepts any value the axis supports — including 347, or 812.5.
The easing curve. cubic-bezier(.34, 1.3, .64, 1) has an overshoot — the weight briefly exceeds 800 before settling. On a variable font this is visible: the text momentarily appears heavier than the target weight, then relaxes. This is what makes it feel alive rather than mechanical.
Transitioning font axes. CSS transition: font-variation-settings 400ms cubic-bezier(...) works on all modern browsers. The browser interpolates between the two axis values, rendering every intermediate weight. The font file doesn't contain these intermediate renders — the OpenType engine generates them on the fly from the variation data.
The range slider. Drag the slider to explore any weight between 100 and 900. At 100, the strokes are hairline-thin. At 900, the letterforms fill their space. This is the design space the type designer defined — one file, infinite weights.