Responsive font size in CSS

Question

I\'ve created a site using the Zurb Foundation 3 grid. Each page has a large h1:

Answer 1

I've been playing around with ways to overcome this issue, and believe I have found a solution:

If you can write your application for Internet Explorer 9 (and later) and all other modern browsers that support CSS calc(), rem units, and vmin units. You can use this to achieve scalable text without media queries:

body {
  font-size: calc(0.75em + 1vmin);
}

Here it is in action: http://codepen.io/csuwldcat/pen/qOqVNO