Better Fluid type with custom properties

nicely-named-fluid-typography-with-custom-properties.css

:root {
  /* CONSTANTS */
  --FONT-SIZE-MIN: 16;
  --FONT-SIZE-MAX: 26;
  
  /* Notice, no calcs used yet */
  --FONT-SIZE-MIN-PX: (var(--FONT-SIZE-MIN) * 1px);
  --FONT-SIZE-MAX-PX: (var(--FONT-SIZE-MAX) * 1px);
  
  --BROWSER-WIDTH-MIN: 300;
  --BROWSER-WIDTH-MAX: 1600;
  
  --BROWSER-WIDTH-MIN-PX: (var(--BROWSER-WIDTH-MIN) * 1px);
  --BROWSER-WIDTH-MAX-PX: (var(--BROWSER-WIDTH-MAX) * 1px);
  
  --FONT-SIZE-DIFFERENCE: (var(--FONT-SIZE-MAX) - var(--FONT-SIZE-MIN));
  
  --FONT-SIZE-LOCK: ((100vw - var(--BROWSER-WIDTH-MIN-PX)) / (var(--BROWSER-WIDTH-MAX) - var(--BROWSER-WIDTH-MIN)));
}

html {
  font-size: var(--font-size);
}

@media screen
  and (min-width: 300px) /* Limitation of custom properties */
  and (max-width: 1600px) { /* - cant use in media queries. */
    html {
      --font-size: calc( /* Only one calc() used */
        var(--FONT-SIZE-MIN-PX) + var(--FONT-SIZE-DIFFERENCE)
        * var(--FONT-SIZE-LOCK)
      );
    }
}