How To Create The Perfect Type Scale in SCSS

Get your type scale spot on with this bit of SCSS. If you need design direction, you can use the Type Scale website to determine the typographic scale that fits your needs. In the SCSS code below, set the $scale value to the scale formula you want – here are some of the values I find pleasing (but you can use any number you like).

• 1.125 – Major Second
• 1.250 – Major Third
• 1.333 – Perfect Fourth

@use "sass:math";

@function toRem($value) {
  $remValue: math.div($value, 16) + rem;
  @return $remValue;
}

/* Base size */
$scale: 1.125;
$base: 16;

body { font-size: toRem($base); }
.fs\:base { font-size: toRem($base); }

/* Small sizes */
$sizes: 'sm', 'xs', '2xs';
$size: $base;

@each $name in $sizes { $size: math.div($size, $scale);
  .fs\:#{$name} { font-size: toRem($size); }
}

/* Large sizes */
$sizes: 'lg', 'xl', '2xl', '3xl', '4xl', '5xl';
$size: $base;

@each $name in $sizes { $size: $size * $scale;
  .fs\:#{$name} { font-size: toRem($size); }
}