Modular Scale

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.33) ratio. These proportions align well with common media formats—16:9 and 4:3.

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

Primary strand values are shown in odd rows (unshaded background).