[HN Gopher] Responsive type scales with composable CSS utilities
       ___________________________________________________________________
        
       Responsive type scales with composable CSS utilities
        
       Author : danielskogly
       Score  : 19 points
       Date   : 2023-09-22 14:28 UTC (1 days ago)
        
 (HTM) web link (tobiasahlin.com)
 (TXT) w3m dump (tobiasahlin.com)
        
       | rustypotato wrote:
       | 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.
        
       ___________________________________________________________________
       (page generated 2023-09-23 23:00 UTC)