Utility: Typography

root.scss

html {
  font-size: 62.5%;
}

// Resize all fonts on small viewport
@media (max-width: 415px) {
  html {
    font-size: 56%;
  }
}

typography.scss

// -------------------------------------------------
// Typography Sizes & Weights Utility
// -------------------------------------------------
$sizes: 11, 12, 13, 14, 15, 16, 17, 18, 21, 24, 32, 40, 56;
$weights: 400, 500, 600, 700;

$root-font-size: 10 !default;

// Calculate rem's
@function rem($input) {
  $output: null;

  @if type-of($input) == list {
    $output: px($input, rem);
  } @else {
    $output: ($input / $root-font-size) + rem;
  }

  @return $output;
}

// Component
// ================================================
.type {
  // Sizes
  @each $size in $sizes {
    &-s-#{$size} {
      font-size: rem($size);
      font-weight: 400;
    }
  }

  // Weights
  @each $weight in $weights {
    &-w-#{$weight} {
      font-weight: #{$weight};
    }
  }
}

Utility: Typography

<!-- Usage -->
<div class="type-s-24 type-w-500">
  I'm a 24px text
</div>