How To Create The Perfect Type Scale in SCSS

grayscale and closeup photo of succulent

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); }
}

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.