I use a similar approach with linear mapping to gain known boundaries.

  body {
  
    --scrollbar-width: 0px;
  
    --320-to-1440: ( 100vw - ( 320px + var( --scrollbar-width ) ) ) / 1120;
  
  }
  
  h1 {
  
    font-size: clamp( 20px, calc( 20px + var( --320-to-1440 ) * 10 ), 30px );
  
  }

While accounting for the scrollbar width via JavaScript.

  document.body.style.setProperty(
  
    '--scrollbar-width',
  
    `${ window.innerWidth - document.documentElement.clientWidth }px`
  
  );

This will be easier when user-defined functions arrive.