title: How does Zurb's Foundation 4 calculate Typography?
body: <p>I've been digging through a lot of articles on Golden Ratio and Modular Scale trying to understand how typography works on a technical level. I can't say I fully understand it, but I'm even more confused now with Zurb's Foundation 4.</p>
  
  <p>In their <a href="http://foundation.zurb.com/docs/components/type.html" rel="noreferrer">docs</a> they've stated they no longer depend/use modular scale for typography. So I'm curious to know how they came up with the numbers, particularly in their heading elements.</p>
  
  <p>Eg: this is how their headings are written in their <strong>_type.SCSS</strong></p>
  
  <pre><code>$h1-font-size:                         emCalc(44px) !default;
  $h2-font-size:                         emCalc(37px) !default;
  $h3-font-size:                         emCalc(27px) !default;
  $h4-font-size:                         emCalc(23px) !default;
  $h5-font-size:                         emCalc(18px) !default;
  $h6-font-size:                         1em !default;
  
  // Also...
  
  $paragraph-font-size:                  1em !default;
  </code></pre>
  
  <p><strong>My questions;</strong> </p>
  
  <ol>
  <li><p>How did they come to these values, and how to they relate to each other mathematically? The Docs don't seem to specify how it works.</p></li>
  <li><p>I want to change the paragraph font-size (base-line?) to 18px (1.125em) instead of the 16px (1em) - how would I go about calculating the heading elements so they're an appropriate / mathematically-sound distance apart?</p></li>
  <li><p>Am I right to assume changing heading sizes begins with choosing the body font size and then calculating up from there?</p></li>
  </ol>
  
  <p>I'd greatly appreciate any advice on this topic, I'm not the most math minded person so.. be gentle. </p>
  
  <p>Thanks!</p>