Scale font size based on screen height with only CSS

0
votes

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.

3
htmlcssfonts
Yes, you can also specify font size and line-height in vh. What problems do you run into when you try this? By the way, your remark about portrait mode makes me think you need vmin instead. - Mr Lister

3 Answers

0
votes

You can use 

<p>HELLO
    WORLD
    YOU ROCKS</p>

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

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%;
  }
}