Screen size: 0px+
Ratio: 1.25
| Unit | Size (px) | Size (em) |
|---|---|---|
| Base | 16px | 1em |
| Size-1 | 20px | 1.25em |
| Size-2 | 25px | 1.563em |
| Size-3 | 31px | 1.953em |
| Size-4 | 40px | 2.441em |
| Size-5 | 49px | 3.052em |
| Size-6 | 61px | 3.815em |
Modular scales
A type-first, ratio-driven, responsive scale to cater for all typography and layout sizing and spacing.
The scale
The sizing and spacing units.
The default base font size of web browsers is honoured. Most commonly this equates to 16px.
So 16px is the starting point — the first unit — of all variants of the scale.
16px
The figures
Screen size: 500px+
Ratio: 1.3
| Unit | Size (px) | Size (em) |
|---|---|---|
| Base | 16px | 1em |
| Size-1 | 21px | 1.3em |
| Size-2 | 27px | 1.69em |
| Size-3 | 35px | 2.197em |
| Size-4 | 46px | 2.856em |
| Size-5 | 59px | 3.713em |
| Size-6 | 77px | 4.827em |
Screen size: 900px+
Ratio: 1.4
| Unit | Size (px) | Size (em) |
|---|---|---|
| Base | 16px | 1em |
| Size-1 | 22px | 1.4em |
| Size-2 | 31px | 1.96em |
| Size-3 | 44px | 2.744em |
| Size-4 | 61px | 3.842em |
| Size-5 | 86px | 5.378em |
| Size-6 | 120px | 7.53em |
Screen size: 1400px+
Ratio: 1.5
| Unit | Size (px) | Size (em) |
|---|---|---|
| Base | 16px | 1em |
| Size-1 | 24px | 1.5em |
| Size-2 | 36px | 2.25em |
| Size-3 | 54px | 3.375em |
| Size-4 | 81px | 5.063em |
| Size-5 | 122px | 7.594em |
| Size-6 | 182px | 11.391em |
Screen size: 1800px+
Ratio: 1.55
| Unit | Size (px) | Size (em) |
|---|---|---|
| Base | 16px | 1em |
| Size-1 | 25px | 1.55em |
| Size-2 | 38px | 2.403em |
| Size-3 | 60px | 3.724em |
| Size-4 | 92px | 5.772em |
| Size-5 | 143px | 8.947em |
| Size-6 | 222px | 13.867em |