font-size based on BOTH viewport width & height

Question

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?

Answer 1

Take a look of vmin and vmax .

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

Answer 2

There is another solution for that, but it needs some calculations to be done. I've had to fit a text to some predesigned space, and it's viewport size is, let's say, 300*200px. It can resize to fit another container. Font size was selected as 18px.

So, in order to translate the font size to size relative to viewport:

[font size]*100/[viewport size]

18*100/300 = 6vw
18*100/200 = 9vh

Now just use half of each size:

font-size: calc(3vw+4.5vh);

That's it.