[rustypotato]

It's probably easier to express this sort of scale as a linear function y = mx + b, where y is the font size and x is the screen size. If you have:

  minFont = 12
  maxFont = 18
  minScreen = 320
  maxScreen = 2400

Then you calculate the slope (m) using the ol' (y - y) / (x - x):

  m = (maxFont - minFont) / (maxScreen - minScreen)

Then plug one of the (font, screen) pairs into the equation and solve for b. Use that as --linear-font-size.

Once you have the linear equation for your font size, you use clamp() to bound the screen size between the min and max that you set before.

  font-size: clamp(var(--minScreen), var(--linear-font-size), var(--maxScreen))

I think this basically has the same effect as the blog post produces, but it fits in my head better when the dynamic part is expressed as the equation for a line.