b_b

#Fluid #Responsive #Typography With #CSS Poly Fluid Sizing
▻https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing

Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Up until now, most developers’ idea of fluid typography is simply using Viewport units maybe with some minimum and maximum sizes.

https://www.smashingmagazine.com/wp-content/uploads/2017/05/2-scatter-plot-font-size-opt.png

That’s called a trendline. It’s a way to find an interpolated font-size value for any viewport width, based on the data provided.

The are several methods for determining the slope and y-intercept. When multiple values are involved, a common method is the Least Squares fit:

https://www.smashingmagazine.com/wp-content/uploads/2017/05/4-least-squares-fit-opt.png

You can use the trendline equation like this:

h1 {
  font-size: calc({slope}*100vw + {y-intercept}px);
}

Once you find your slope and y-intercept you just plug them in!