minFont = 12 maxFont = 18 minScreen = 320 maxScreen = 2400
m = (maxFont - minFont) / (maxScreen - minScreen)
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))
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.
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.