Modular Scale

Skill Level: 
Appropriate for all

Rather than eyeball it and choose arbitrary numbers for things like font-size, padding and margin, the framework utilizes a modular scale, resulting in a more visually consistent and harmonious composition. The scale consists of a primary and secondary strand of values that are calculated with the perfect fourth (1.333) ratio. These proportions align well with common media formats—16:9 and 4:3.

The framework modular scale is shown in em and pixel values rounded to two decimal points. The primary strand values are shown in bold.
Em Value Pixel Value
.18 2.85
.2 3.2
.24 3.8
.27 4.27
.32 5.07
.36 5.7
.42 6.75
.47 7.6
.56 9
.63 10.13
.75 12
.84 13.5
1 16
1.13 18
1.33 21.33
1.5 24
1.77 28.45
2 32
2.37 37.9
2.67 42.67
3.16 50.51
3.56 56.88
4.21 67.34
4.74 75.85
5.62 89.9
6.32 101.13
7.49 119.87
8.43 134.85
9.99 159.82
11.24 179.8
13.32 213.1
14.98 293.73
17.76 284.12
19.98 319.63
23.68 378.83
26.64 426.18
31.57 505.12
35.52 568.25
42.09 673.48
47.35 757.67
56.12 897.97
63.14 1010.22
74.83 1197.3
84.18 1346.95
99.78 1596.4
112.25 1795.95
133.03 2128.52
149.66 2394.58
177.38 2838.03
Contributed By: 
IIM
Additional Resources: 
More Meaningful Typography (A List Apart)
Modular Scale calculator