title: ZURB Foundation - How to change font sizes?
body: <p>I am confused about how to implement font-sizes in ZURB.</p>
  
  <p>I have a page with:</p>
  
  <p>Header:</p>
  
  <blockquote>
    <p>[2-col][2-col][2-col][2-col][4-col]</p>
  </blockquote>
  
  <p>Main:</p>
  
  <blockquote>
    <p>[4-col][4-col][4-col]</p>
  </blockquote>
  
  <p>The default font-size is 16px, but I would like the 'Header' type to be 21px. However, changing the <code>Header</code> font-size causes it to break out of the grid (I suppose it is affecting the width of the row somehow).</p>
  
  <p><strong>How does one make the type bigger in the header without affecting the row width?</strong></p>
  
  <p>I have made an <a href="http://jsbin.com/uSETen/2/" rel="nofollow noreferrer">example jsbin here</a> demonstrating the issue.</p>
  
  <p><img src="https://i.stack.imgur.com/jI9Nn.png" alt="**Screenshot of Problem**"></p>