I was looking for a solution for a responsive hero, and came across this blog. This solution is like really good bourbon in a manhattan, it just makes everything smooth.
There are plenty of situations where we might want to change the font-size property of an element as the screen width changes. This makes sense. Someone viewing content on a smaller phone screen might be holding the device closer to their face whereas someone viewing that same content on a large desktop screen would be sitting further away. In each case, changing the size of the text can be a helpful tool to improve the overall user experience by improving the legibility of the content.
CSS Solution
body {
font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}