font-size based on BOTH viewport width & height

4
votes

I'll keep it short and straight forward, So I understand:

  • VW changes the font-size based in the viewport width.

  • VH changes the font-size based on the viewport height.

My question is;

Is there a way of scaling my font-size based on BOTH viewport width AND height? So changing both the height and width of your browser would scale my font-size appropriately.

I ask because I would like to scale my text size appropriately to the container they are inside, my problem is that the container scales to 100% width and 100% height. So scaling the text size based on both the height and width would seem logical, unless there is a way to size based on the dimensions of its parent container?

Any help or advice is appreciated, thank you in advance

I tried using percentages and looked at various font-sizing syntax yet i can't seem to find anything that scales based on both the width and height, is there a reason for this?

1
javascripthtmlcsssass
See here for more on this: css-tricks.com/almanac/properties/f/font-size. Font size is static, and based on either a static unit, or relative to a parent unit, and it doesn't change based on width or height of its container. In fact, fonts are quite strict in this way. But you can resize them based on vh or vw and this post shows how: css-tricks.com/viewport-sized-typography. You can also mimic responsive font resizing with FitText.js: fittextjs.com – Nathaniel Flick

1 Answers

3
votes

Take a look of vmin and vmax.

  • 1vmin = 1vw or 1vh, whichever is smaller
  • 1vmax = 1vw or 1vh, whichever is larger