There is currently no way to interpolate font variation settings fluidly across widths (viewport or element widths). This is expected behavior from many font authors but is impossible to do in CSS.

This can not be done in calc() (via clamp or CSS locks) due to CSS unit typing as font variation settings require a type of <number> and viewport units are incompatible <length> typed.

Proposals

• I would propose adding a way to bind viewport/element dimensions to animations, allowing people to interpolate properties across sizes. This is related to the CSS Scroll Linked Animations draft, but expands it to bind to width. This dramatically expands the scope of this issue, but allows interpolation of all properties across varying widths and enabling far more control around style changes across page and element scaling than media queries or element queries allow.
• Allow for some sort of unit logic in calc() that can re-type a value, although this seems kind of clumsy to me as it is limited in use cases, and the math has the potential to be concluded and cumbersome. Calc() functions are also shifted as the user’s base font size changes making it unreliable.