rem vs em

illustrates the main difference between using em and rem.

by blindfish

HTML

<div class="wrapper">
  <div>
    <p>REM</p>
    <div class="rem-level1">
      rem-level1
      <div class="rem-level2">
        rem-level2
        <div class="rem-level3">
          rem-level3
        </div>
      </div>
    </div>
  </div>
  <div>
    <p>EM</p>
    <div class="em-level1">
      em-level1
      <div class="em-level2">
        em-level2
        <div class="em-level3">
          em-level3
        </div>
      </div>
    </div>
  </div>
  <div>
    <p>mixed</p>
    <div class="em-level1">
      em-level1
      <div class="rem-level2">
        rem-level2
        <div class="em-level3">
          em-level3
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.wrapper {
    display: flex;
  }
  .wrapper > div {
    padding: 20px;
  }
  .rem-level1, .rem-level2, .rem-level3 {
    font-size: 1.8rem;
    padding: 1.1rem;
    background: rgba(255, 166, 0, 0.25);
  }

  .em-level1, .em-level2, .em-level3 {
    font-size: 1.8em;
    padding: 1.1em;
    background: rgba(255, 166, 0, 0.25);
  }