jakobsen / fluid-typography

Find the perfect CSS values for your fluid heading, and control how it scales across different viewport widths.
https://fluid-typography.netlify.app/
MIT License
92 stars 6 forks source link

calculation with rem and container query units #10

Closed Anunnaki26 closed 1 year ago

Anunnaki26 commented 1 year ago

It would be better if the font size was calculated using a linear function in my opinion. For example: If the width of the container is 14rem then the font size should be 1rem. If the container is 60rem wide, then the font size should be 1.25rem. Then you could calculate a linear function using the two points (14/1) and (60/1.25) and the font size should then change depending on the width of the container and the font size set by the user in the browser. What do you say to this?

e.g.

p { font-size: calc((100cqi/280) + 17px) / 16 * 1rem; }