Dynamic Metrics Inter font postcss

main.css

/* css variables does't work in math... */
/* using postcss-simple-vars */
$a: -0.0223;
$b: 0.185;
$c: -0.1745;
$lineHeight: 1.4;
$fontSize: 16;

@import url('https://rsms.me/inter/inter.css');

html { 
  font-family: 'Inter', sans-serif;
  /*
    InterDynamicLineHeight produces the line height 
    for the given font size

    function InterDynamicLineHeight(fontSize) {
      const l = 1.4
      return Math.round(fontSize * l)
    }
  */
  font-size: $(fontSize)px;
  line-height: resolve(round($(fontSize) * $(lineHeight)))px;
  /*
    InterDynamicTracking takes the font size in points 
    or pixels and returns the compensating tracking in EM.

    function InterDynamicTracking(fontSize) {
      const a = -0.0223
      const b = 0.185
      const c = -0.1745;
      // tracking = a + b * e ^ (c * fontSize)
      return a + b * Math.pow(Math.E, c * fontSize)
    }
  */
  letter-spacing: resolve(round(resolve($(a) + $(b) * pow(E, resolve($(c) * $(fontSize)))), 3))em;
}

@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}