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; }
}

Why did you pick a dynamic way to mention line height and tracking? Can you refer me to a place where I can read more about these equations and the reasons to use these over others?

@jerriclynsjohn https://d.rsms.me/inter-website/v3/dynmetrics/

I've created small postcss plugin to insert dynamic metrics, see https://www.npmjs.com/package/postcss-dynamic-metrics

@NikolayFrantsev please credit @rsms in npm package.

@daliborgogic I do believe what links to original author and idea are already there in source code and documentation, do you want something more?

@NikolayFrantsev it's ok from my side 👍🏻. I think @rsms will agree