<h1>The Font-Sizings of Em and Rem</h1>
<div id="em" class="box">
  <h2>EM</h2>
  <p>Using em to specify font-size multiplies the number by an explicitly declared font-size of a containing element. This is often stated as "the parent's font-size," yet this rule actually finds the nearest containing element with a declared font-size, and bases its measurements on that.</p>
  
  <code><pre>
    div { font-size: 16px; }
    span { font-size: 2em; }
    
    &lt;div>
      &lt;article class="intermediate">
        &lt;p class="intermediate">
          &lt;span>font-size here is 2 * 16px = 32px&lt;/span>
        &lt;/p>
      &lt;/article>
    &lt;/div></pre></code>
  
  <span class="effect">
    <div style="font-size:16px;">
      <article>
        <p>
          <span style="font-size:2em;">font-size here is 32px</span>
        </p>
      </article>
    </div>
  </span>
  
  <p>Using em and nesting elements will cause a compounding effect.</p>
  
  <code><pre>
    span { font-size: 1.2em; }
    
    &lt;p>Such
    &lt;span>that &lt;span>this &lt;span> happens
    &lt;/span>&lt;/span>&lt;/span>&lt;/p></pre></code>
  
  <span class="effect">
    <p>Such <span style="font-size:1.2em">that <span style="font-size:1.2em">this <span style="font-size:1.2em">happens</span></span></span></p>
  </span>
</div>

<div id="rem" class="box">
  <h2>REM</h2>
  
  <p>Rem is a newer measurement than em which overcomes the edge cases. Using rem to specifiy font-size multiplies the number by the font-size of the root element, i.e. <span style="font-family:monospace;">&lt;html></span>. This difference allows for a consistent sizing metric throughout the entire document. If no font-size is specified on the root element, the browser default of 16px is used.</p>
  
  <code><pre>
    html { font-size: 16px; }
    div { font-size: 64px; }
    p { font-size: 1px; }
    span { font-size: 1rem; }
    
    &lt;div>
      &lt;p>
        &lt;span>font-size here is 2 * 16px = 32px&lt;/span>
      &lt;/p>
    &lt;/div></pre></code>
  
  <span class="effect">
    <div style="font-size:64px;">
      <p style="font-size:1px;">
        <span style="font-size:2rem;">Font-size here is 32px</span>
      </p>
    </div>
  </span>
  
  <p>As well, using rem avoids the compounding effects seen with em.</p>
  
  <code><pre>
    span { font-size: 1.2rem; }
    
    &lt;p>Such
    &lt;span>that &lt;span>this &lt;span> happens
    &lt;/span>&lt;/span>&lt;/span>&lt;/p></pre></code>
  
  <span class="effect">
    <p>Such <span style="font-size:1.2rem">that <span style="font-size:1.2rem">this <span style="font-size:1.2rem">happens</span></span></span></p>
  </span>
</div>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
  }
  h1, h2, p { margin-bottom: 1rem; }
  body {
    display: grid;
    gap: 1rem;
    grid-template-areas: 'title' 'embox' 'rembox';
  }
  
  h1 { grid-area: title; }
  #em { grid-area: embox; }
  #rem { grid-area: rembox; }
  
  @media (min-width: 733px) {
    body {
      grid-template-areas: 'title title' 'embox rembox';
    }
  }
  
  .box {
    border: 1px solid black;
    padding: 1rem;
  }
  
  #em { border-color: black; color: black; }
  #rem { border-color: brown; color: brown; }
  
  code:before {
    content: 'This Code';
    display: block;
    background-color: darkblue;
    color: #fff;
    padding: .3rem;
  }
  code pre {
    border: 1px solid;
    padding: 1rem;
    color: darkblue;
  }
  code { display: block; margin-bottom: 1rem; }
  
  .effect:before {
    content: 'This Effect';
    display: block;
    background-color: darkgreen;
    color: #fff;
    padding: .3rem;
  }
  
  .effect {
    display: block;
    border: 1px solid;
    color: darkgreen;
    margin-bottom: 2em;
  }
  .effect > * {
    padding: 1rem;
    margin: 0;
  }
  .effect p {
    margin: 0;
  }
</style>