SCSS Type Scale

type-scale.scss

// The basis of calculations, and your root html font size.
$base-font-size: 16px;
// Change this to your type scale modifier.
// https://type-scale.com/
$type-scale: 1.25;
// The desired unit supports "rem", "em", and "%".
$desired-unit: 'rem';

// Generate a type scale value based on the number of steps if this is ascending or descending.
// It is recommended to compile with the "--precision 3" flag to avoid long decimals.
@function typeScaleSize($steps) {
  // The default size is instantiated at 1 for calculations;
  $font-size: 1;
  // Do nothing if the scale passed is 0, just return the type scale value with necessary conversion.
  @if $steps != 0 {
    // Iterate through the scale to the proper size. Ensure we are getting an absolute value for negative steps.
    @for $i from 1 through abs($steps) {
      // Determine if this is ascending or descending the type scale.
      @if $steps + 1 > 0 {
        $font-size: $font-size * $type-scale;
      } @else {
        $font-size: $font-size / $type-scale;
      }
    }
  }
  @if $desired-unit == '%' {
    $font-size: $font-size * 100;
  }

  @return unquote($font-size + $desired-unit);
}

// The html element should be set to the base font size for proper scaling.
html {
  font-size: $base-font-size;
}

h1 {
  font-size: typeScaleSize(5);
}

h2 {
  font-size: typeScaleSize(4);
}

h3 {
  font-size: typeScaleSize(3);
}

h4 {
  font-size: typeScaleSize(2);
}

h5 {
  font-size: typeScaleSize(1);
}

h6 {
  font-size: typeScaleSize(0);
}

// A few utility classes for demonstration.
.small-text {
  font-size: typeScaleSize(-1);
}

.tiny-text {
  font-size: typeScaleSize(-2);
}