Modular Rem Scale

Easily configure and generate modular scales in rems.

Configuration

The ModularRemScale constructor takes a config object with the following properties:

| property | type | description | |----------|------|-------------| |firstPower|number|The power value of the first step in the scale.| |ratio|number | RatioName|The ratio to use for the scale.| |rootFontSizePx|number|The root font size to use when converting rem values to px.|

Methods

| method | type | description | |----------|------|-------------| |getMap|(steps: number) => ModularRemScaleMap|Generate an object of steps entries, mapping step numbers (starting at 1) to rem values on the scale.| |getStepPx|(step: number) => string|Get the px value of a step on the scale.|

Named Ratios

| Key | Value | Decimal Value | |------------------|-------------|-------------------| |minor-second |16 / 15 |1.0667 | |major-second |9 / 8 |1.125 | |minor-third |6 / 5 |1.2 | |augmented-fourth|√2 |1.4142 | |perfect-fifth |3 / 2 |1.5 | |minor-sixth |8 / 5 |1.6 | |golden |1.618033...|1.61803398875 | |phi |1.618033...|1.61803398875 | |major-sixth |5 / 3 |1.6667 | |minor-seventh |16 / 9 |1.7778 | |major-seventh |15 / 8 |1.875 | |octave |2 |2 | |major-tenth |5 / 2 |2.5 | |major-eleventh |8 / 3 |2.6667 | |major-twelfth |3 |3 | |double-octave |4 |4 |

Example

import ModularRemScale from '@danscan/modular-scale';

const scale = new ModularRemScale({
  firstPower: -1,
  ratio: 'perfect-fifth',
  rootFontSizePx: 12,
});

scale.getMap(15);
// {
//   '1': '0.67rem',
//   '2': '1.00rem',
//   '3': '1.50rem',
//   '4': '2.25rem',
//   '5': '3.38rem',
//   '6': '5.06rem',
//   '7': '7.59rem',
//   '8': '11.39rem',
//   '9': '17.09rem',
//   '10': '25.63rem',
//   '11': '38.44rem',
//   '12': '57.67rem',
//   '13': '86.50rem',
//   '14': '129.75rem',
//   '15': '194.62rem'
// }

scale.getStepPx(2);
// 12px

scale.getStepPx(3);
// 18px

scale.getStepPx(4);
// 27px