How to resize text based on browser window size

Question

I would like to know how to set the size of text based on the browser window. My current code for my piece of text:

#quoteField{
letter-spacing:5px;
position:relative;
top:20%;
left:10%;
xtop:325px;
xleft:200px;
font-size:50px;

line-height:20px;
width:500;

color:#ffffff;
}

.quote{
font-family: Merriweather, serif;
}

.quoteHeavier{
font-family: Merriweather, serif;
font-weight:600;
}

Alternatively, you could check out this JSfiddle.

Answer 1

You can try with css property font-size: 4vw; where you can learn about here