Responsive font size in CSS

Question

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

body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em; font-weight: 500; }

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->