postcss-typescale

@typescale {
  scale: 1.25;
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-xxl {
  typescale: 3 2;
}

.text-xl {
  typescale: 2 1.5;
}

.text-l {
  typescale: 1 1.5;
}

.text-m {
  typescale: 0 1;
}

.text-s {
  typescale: -1 1;
}

.text-xs {
  typescale: -2 0.5;
}

.text-xxl {
  font-size: calc(1.953125 * 1rem);
  line-height: calc(2 * 1.5rem);
}

.text-xl {
  font-size: calc(1.5625 * 1rem);
  line-height: calc(1.5 * 1.5rem);
}

.text-l {
  font-size: calc(1.25 * 1rem);
  line-height: calc(1.5 * 1.5rem);
}

.text-m {
  font-size: calc(1 * 1rem);
  line-height: calc(1 * 1.5rem);
}

.text-s {
  font-size: calc(0.8 * 1rem);
  line-height: calc(1 * 1.5rem);
}

.text-xs {
  font-size: calc(0.64 * 1rem);
  line-height: calc(0.5 * 1.5rem);
}

Result

text-xxxl: Sample text

text-xxl: Sample text

text-xl: Sample text

text-l: Sample text

text-m: Sample text

text-s: Sample text

text-xs: Sample text

Configuration (optional)

@typescale ([name]) {
  /* default values */
  scale: 1.25;
  font-size: 1rem;
  line-height: 1.5rem;
}

• name (optional): custom identifier that allows multiple scales. If not provided, the default settings are overwritten.
• scale: typographic scale.
• font-size: default font size (at index 0).
• line-height: baseline grid. Relative to the font-size if set to 1 without unit.

Usage

.[your-style] {
  typescale: ([name]) [index] ([line-height-fraction])
}

• name (optional, default = default): string identifier referring to the settings.
• index: null or positive or negative integer defining the font-size. font-size = settings font-size * scale ^index .
• line-height-fraction (optional, default = 1): float or fraction defining the line-height. line-height = settings line-height * line-height-fraction.