Scroll-Driven Variable Fonts

CSS font-variation-settings is an animatable property, which means scroll-driven animations can control variable font axes like weight, tracking, and optical size directly from scroll position — no JavaScript required. The post covers why font-variation-settings interpolates smoothly, the critical overflow: clip fix that prevents scroll container resolution bugs, the sticky wrapper pattern using view-timeline-name for composable named timelines, and a 'weight lens' technique that staggers multiple animation ranges so each word peaks at bold as scroll passes through it. Browser support table and a reference to all standard variable font axes (wght, wdth, opsz, slnt, ital) are included.