Scale font size based on screen height with only CSS

Question

Is it possible to scale font size based on screen height with only CSS?

For example, I have a sentence like this:

HELLO
WORLD
YOU ROCKS

Using this as my home page title and it is sitting inside a div that with 100vh.

What's is the calculation to make sure this text will scale and fit inside the div height? And if this is viewing in portrait mode, the font size will also keep to the max-width.

Answer 1

You can use

<p>HELLO
    WORLD
    YOU ROCKS</p>

<style>
p{
    font-size:20vh;
    line-height: 18vh;
}
</style>

Answer 2

limiting it to CSS using @media would likely be the easiest solution, create a rule for the popular screen-heights and change the font-size to a size you prefer:

@media only screen and (max-height: 600px) {
  #div {
    font-size: 80%;
  }
}

Answer 3

Responsive Text Resize the browser window to see how the text size scales.

Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.