<!-- Legacy vanilla-framework 1.6.0 example -->
<div style="margin: 1rem;">
  <div class="row">
    <p>Legacy vanilla-framework 1.6.0: font-sizes</p>
    <hr>
  </div>
  <div class="row"><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span
      class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span
      class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span
      class="faded">●</span><span class="faded">●</span><span>●</span><span class="faded">●</span><span>●</span><span
      class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span>●</span><span
      class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span>●</span><span
      class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span>●</span><span
      class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span
      class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span>●</span><span
      class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span
      class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span
      class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span>●</span></div>
  <div class="row"><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span
      class="label">14</span><span class="faded">●</span><span class="label">16</span><span class="faded">●</span><span class="faded">●</span><span
      class="label">20</span><span class="faded">●</span><span class="faded">●</span><span class="label">24</span><span class="faded">●</span><span class="faded">●</span><span class="label">28</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="label">36</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="label">48</span></div><div class="row"><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="label">small</span><span class="faded">●</span><span class="label">p</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span></div><div class="row"><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="label">h6</span><span class="faded">●</span><span class="faded">●</span><span class="label">h5</span><span class="faded">●</span><span class="faded">●</span><span class="label">h4</span><span class="faded">●</span><span class="faded">●</span><span class="label">h3</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="label">h2</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="faded">●</span><span class="label">h1</span></div>

</div>

/*  */

span {
  font-family: 'Courier New';
}

span {
  font-size: 1rem;
}

.faded {
  opacity: .05
}