Fontscale Multiplier

by kthornbloom

HTML

<div class="typescale-medium">
  <h1>
    This is a normal H1 within the medium type scale
  </h1>
</div>

<hr>

<div class="typescale-medium">
  <h1 style="--multiplier: 1.4;">
    This one needed to be bigger
  </h1>
</div>

<hr>

<div class="typescale-medium">
  <h1 style="--multiplier: .7;">
    This one needed to be smaller
  </h1>
</div>

<br><br>
<a href="https://caniuse.com/#search=variables">Browser Support</a>

SCSS

body {
  font-family: sans-serif;
  padding: 30px;
}

:root {
  --multiplier: 1; // set default
}

// ↓ This represents what is generated from your typescale mixin
.typescale-medium {
  h1 {
    //                   ↓ Just add to existing sizes
    font-size: calc(2em * var(--multiplier));
  }
}