The proposal is to add a new function to css-values-4 that calculates the progress between two <length> values in percent. The new function could be used together with the new mix function to improve readability of fluid sizes.

The syntax of the progress functions could be as follows:

progress(<input-length> ','  <min-length> ',' <max-length>)

All arguments are <length> values, while the return value would be a <percentage> value representing the progress of the input between the min and max values. Progress would be clamped between 0% and 100%.

The function could then be used together with mix() to calculate fluid sizes:

--progress: progress(100vw, 375px, 1920px);
font-size: mix(var(--progress), 24px, 32px);

This would work well with container query units as well

--progress: progress(100qw, 200px, 800px);
font-size: mix(--progress, 18px, 22px);

The proposed function is not new functionality, but would be syntactic sugar for

clamp(0%, 100% * (<input-length> - <min-length>) / (<max-length> - <min-length>), 100%)

Name to be bikeshedded.

Motivation

Fluid typography has been around for years, but the css necessary to achieve it is hard to create and read.

The clamp() function makes it possible to create fluid typography with less bloat: Example copied from article above:

font-size: clamp(2.25rem, 2vw + 1.5rem, 3.25rem);

It is still complicated to calculate the slope and intercept values necessary to create a fluid type that scales from a minimum to a maximum viewport size. It is not possible understand the min and max viewport sizes from reading the notation.

Preprocessors or other tools can be used to calculate the values, but this does not improve the readability.

The new mix funcion could let us interpolate between two font-sizes, as long as we have a progress argument:

--progress: progress(100vw, 375px, 1920px);
font-size: mix(var(--progress), 24px, 32px);