title: Calculate the ideal bottom margin for headers
body: <p>I have headers and each have some margin. </p>
  
  <p>I use <a href="http://pxtoem.com/" rel="nofollow noreferrer">http://pxtoem.com/</a> witch is based on the <a href="http://necolas.github.io/normalize.css/" rel="nofollow noreferrer">Normalize CSS project</a>. </p>
  
  <p>I looked on margins, and they are <strong>not proportial</strong> in my opinion.</p>
  
  <h2>Question:</h2>
  
  <p>How to calculate the ideal bottom margin for headers?</p>
  
  <p><em>Note: Looking for some calculator / tool / formula</em></p>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;h1&gt;Header H1&lt;/h1&gt;
  &lt;h2&gt;Header H2&lt;/h2&gt;
  &lt;h3&gt;Header H3&lt;/h3&gt;
  &lt;h4&gt;Header H4&lt;/h4&gt;
  &lt;h5&gt;Header H5&lt;/h5&gt;
  &lt;h6&gt;Header H6&lt;/h6&gt;
  </code></pre>
  
  <h2>CSS:</h2>
  
  <pre><code>/* Base: 1em = 14px */
  
  body {
      font-size: 0.875em;
      -webkit-text-size-adjust: 0.875em;
      -ms-text-size-adjust: 0.875em;
  }
  
  h1 {font-size: 2em; margin: 0.67em 0;}
  h2 {font-size: 1.5em; margin: 0.83em 0;}
  h3 {font-size: 1.17em; margin: 1em 0;}
  h4 {font-size: 1em; margin: 1.33em 0;}
  h5 {font-size: 0.83em; margin: 1.67em 0;}
  h6 {font-size: 0.75em; margin: 2.33em 0;}
  </code></pre>
  
  <h2>Output:</h2>
  
  <p><img src="https://i.stack.imgur.com/0YdVw.png" alt="preview"></p>
  
  <p>Notice margin between H5 and H6.</p>
  
  <p>I am open to your suggestions :)</p>