<div class="font-size-control">HTML font-size: <input type="range" id="font-size-control" min="50" max="150" step="5" value="100"><span id="percent">100%</span>
</div>

<div class="teaser">
  <div class="teaser__image">
    <img src="https://images.unsplash.com/photo-1475850313866-696e8076ac0a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
  </div>
  <h3 class="teaser__headline">This may be Beyonce</h3>
  <div class="teaser__body">And here is some more text describing awesome Beyonce</div>
</div>

<div class="teaser teaser--small">
  <div class="teaser__image">
    <img src="https://images.unsplash.com/photo-1475850313866-696e8076ac0a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
  </div>
  <h3 class="teaser__headline">This may be Beyonce</h3>
  <div class="teaser__body">And here is some more text describing awesome Beyonce</div>
</div>

<div class="teaser teaser--tiny">
  <div class="teaser__image">
    <img src="https://images.unsplash.com/photo-1475850313866-696e8076ac0a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="">
  </div>
  <h3 class="teaser__headline">This may be Beyonce</h3>
  <div class="teaser__body">And here is some more text describing awesome Beyonce</div>
</div>

html {
  font-size: 100%;
}

.teaser {
  font-size: 1rem;
  
  &__headline {
    font-size: 2em;
  }
  
  &__body {
    font-size: 1em;
  }
  
  &--small {
    font-size: 0.875rem;
  }
  
  &--tiny {
    font-size: 0.75rem;
  }
}


// Additional Styling. Not Important for this demonstration

@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:700');

body {
  background: #000;
  padding:0;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}

.teaser {
  width: 20em;
  color: #fff;
  display: inline-block;
  margin: 1rem;
  vertical-align: top;
  text-align: left;
  
  &__image {
    margin: 0 0 .625em; 
    img {
      display: block;
      width: 100%;
    }
  }

  &__headline {
    text-transform: uppercase;
    margin: 0 0 0.1em;
    line-height: 1;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
  }
  
  &__body {
    opacity: 0.7;
    line-height: 1.333;
  }
}

.font-size-control {
  background: #333;
  color: #ccc;
  padding: 12px 10px 10px;
  margin: 30px 0 30px;
  font-size: 20px;
  > * {
    vertical-align: middle;
    margin: 0 0.5em;
  }
  span {
    display: inline-block;
    min-width: 5ch;
    
  }
}

const range = document.getElementById('font-size-control');
const result = document.getElementById('percent');
const root = document.querySelector('HTML');

range.addEventListener("input", function() {
    result.innerHTML =  range.value + "%";
    root.style.fontSize = range.value + "%";
}, false);