Typography modular scale methodology

To create a great visual hierarchy, consistency and contrast for typography, we need to implement a font scaling methodology that easy to implement and adapt to, at the end, make the designer and developer use typography on the same page, simplify our work process.

The basic theory is to find a base font size, a ratio, then use them to create a sequence of sizes that relate to one another in a meaningful way.

For example:

$m-break: 56.25rem; //900px

$base-font-size: 1rem; // 1rem = 16px
$font-scale: 1.25; // Major Third
$font-scale-mobile: 1.125; // Major Second

$font-size-sm: $base-font-size / $font-scale; // 13px;

// Function to calculate power
@function pow($exponent) {
  $value: 1;

  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $font-scale;
    }
  }

  @return $value;
}

h6 {
  font-size: $base-font-size; //16px
}

h5 {
  font-size: clamp($base-font-size *m-pow(1), 1vw, $base-font-size *pow(1));
} 

h4 {
  font-size: clamp($base-font-size *m-pow(2), 2vw, $base-font-size *pow(2));
}

h3 {
  font-size: clamp($base-font-size *m-pow(3), 3vw, $base-font-size *pow(3));
}

h2 {
  font-size: clamp($base-font-size *m-pow(4), 4vw, $base-font-size *pow(4));
}

h1 {
  font-size: clamp($base-font-size *m-pow(5), 5vw, $base-font-size *pow(5));
}

The $base-font-size doesn’t need to limit to px, it can be rem em or ex.

While setting up the $font-scale value, keep in mind that a small adjust may end up have a big impact on sizes. Here are some numbers that are recommended based on the usage of the site:

Small scales (less than 1.2) are subtle and good for both mobile and desktop apps, or the mobile version of a responsive site.

Medium scales (1.15–1.333) have a clear hierarchy, and help to organize sections with subheadings. A medium scale is versatile and works well for a wide variety of desktop sites, including blogs and marketing sites.

Large scales (1.333 or greater) may be challenging to implement effectively, but could work well for portfolios, agencies, some marketing sites, or avant-garde works.

More things to consider:

Line-height based on modular scale method?
Letter spacing?

Reference:

Typographic Scales - Consistent typography using simple math Typographic Scales

More Meaningful Typography More Meaningful Typography

Type Scale Calculator https://type-scale.com/

Power Function Power Function | CSS-Tricks

Defining a Modular Type Scale for Web UI Defining a Modular Type Scale for Web UI

Remove top space from your text Line-height Crop — a simple CSS formula to remove top space from your text

Kalawiki

Typography modular scale methodology

Related pages