title: Setting the font-size of a body tag
body: <p>I've been trying to configure a basic CSS template that I can use to start working with REM. I see the method of setting the following <code>body { font-size: 62.5% };</code> so that the math is easier (1rem = 10px as 16px is the default font-size).</p>
  
  <p>I'm not sure I like this way as it involves having to specify the size of <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> as well as <code>&lt;p&gt;</code> tags if a font-size of 10px isn't my baseline.</p>
  
  <p>I've been experimenting with some different ways and have been very confused with how <code>px</code> and <code>%</code> relates in terms of font size. Take the following example:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;body&gt;
  
    &lt;header&gt;
      &lt;h1&gt;Testing h1&lt;/h1&gt;
      &lt;h2&gt;Testing h2&lt;/h2&gt;
    &lt;/header&gt;
  
    &lt;main&gt;
      &lt;p&gt;Random paragraph&lt;/p&gt;
    &lt;/main&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Consider the following css: </p>
  
  <pre><code>body {
   font-size: 100%;
  }
  </code></pre>
  
  <p>I expected the browser to render font in their default size, which is 16px. Anything in a <code>&lt;p&gt;</code> tag is 16px still, but <code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code> revert to their original size as specified in the browser stylesheet. Why isn't ALL text set to 16px?</p>
  
  <p>Another example:</p>
  
  <pre><code>body {
    font-size: 12px;
  }
  </code></pre>
  
  <p>Why doesn't <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code> take this font size of <code>12px</code>? <code>&lt;h1&gt;</code>-<code>&lt;h6&gt;</code>  does get smaller (by 75% as 12/16 = 0.75). I'd expect h1 to be either 12px or stay the same default value because the value specified for h1-h6 in the user agent stylesheets is MORE specific.</p>
  
  <p>How do the rules work in terms of specifying percentages? What is the best practice in terms of setting up a stylesheet so that REM can be used?</p>