Modular Scale Calculator
Create modular scales for harmonious typography and spacing in web design using mathematical ratios.
Scale Settings
px
Multiple bases create a double-stranded scale
Scale Values
-3
3.78px
0.2361rem
-2
6.11px
0.3820rem
-1
9.89px
0.6180rem
0
16.00px
1.0000rem
1
25.89px
1.6180rem
2
41.89px
2.6179rem
3
67.77px
4.2358rem
4
109.66px
6.8535rem
5
177.42px
11.0890rem
6
287.07px
17.9420rem
7
464.48px
29.0302rem
8
751.53px
46.9708rem
CSS Custom Properties
:root {
--ms-0: 0.2361rem; /* 3.78px */
--ms-1: 0.3820rem; /* 6.11px */
--ms-2: 0.6180rem; /* 9.89px */
--ms-3: 1.0000rem; /* 16.00px */
--ms-4: 1.6180rem; /* 25.89px */
--ms-5: 2.6179rem; /* 41.89px */
--ms-6: 4.2358rem; /* 67.77px */
--ms-7: 6.8535rem; /* 109.66px */
--ms-8: 11.0890rem; /* 177.42px */
--ms-9: 17.9420rem; /* 287.07px */
--ms-10: 29.0302rem; /* 464.48px */
--ms-11: 46.9708rem; /* 751.53px */
}SCSS
$ms-base: 16;
$ms-ratio: 1.618;
@function ms($n) {
@return nth($ms-base, 1) * pow($ms-ratio, $n);
}