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` |
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