Search code examples
cssfont-sizecalc

Perfect formula for window-size based font size?


Recently I've discovered this site: https://varagon.com/

They are using some interesting calc formula for calculating window size based font size. Formula is as following:

font-size: calc(22px + 54 * ((53vw + 53vh) - 600px) / 820);

For screen dimensions 1920x1126 px computed font-size value is 88.8006px. Could you explain what every value in formula is for?

EDIT:

Maybe I didn't express my question properly - I know what VH and VW are, my question is about whole calc formula. Ie. why are they adding 22px to sum of half of heigh and width, etc. :) I tried to reverse engineer/math it, unsuccessfully for now.


Solution

  • I found possible answer - this formula is some kind of 'vmax' polyfill (as for lack of IE11 support for this value).

    Polyfill that I found looks very similar formula I was asking about: https://gist.github.com/uto-usui/ea9836aa92d334e7694fb31d8e93a4f4