title: Responsive font size in CSS
body: <p>I've created a site using the <strong>Zurb Foundation 3</strong> grid. Each page has a large <code>h1</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-size: 100%
  }
  
  /* Headers */
  
  h1 {
    font-size: 6.2em;
    font-weight: 500;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="twelve columns text-center"&gt;
      &lt;h1&gt; LARGE HEADER TAGLINE &lt;/h1&gt;
    &lt;/div&gt;
    &lt;!-- End Tagline --&gt;
  &lt;/div&gt;
  &lt;!-- End Row --&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for the large text.</p>
  
  <p>I've noticed that on the <strong>Zurb Foundation 3</strong> Typography <a href="http://foundation.zurb.com/sites/docs/v/3.2.5/typography.php" rel="noreferrer">example page</a>, the headers adapt to the browser as it is compressed and expanded. </p>
  
  <p>Am I missing something really obvious? How do I achieve this?</p>