This article presents one of two responsive font-scaling variations in our system. Both versions use the same base sizes and minimum values. The only difference is how the maximum size is calculated.
When the maximum uses a 1.33 coefficient, font sizes expand more noticeably on larger screens, creating stronger visual hierarchy and a more expressive layout.
When the maximum uses a 1.2 coefficient, scaling remains more restrained. Font sizes grow more subtly, resulting in a tighter, more compact appearance on desktop.
The choice between these two approaches depends on the desired balance between hierarchy, density, and visual emphasis in the interface.
|
Default |
Min |
Max (coefficient 1.2) |
|
6 |
6 |
7 |
|
7 |
7 |
8 |
|
8 |
8 |
10 |
|
9 |
9 |
11 |
|
10 |
10 |
12 |
|
11 |
11 |
13 |
|
12 |
12 |
14 |
|
13 |
13 |
16 |
|
14 |
14 |
17 |
|
15 |
15 |
18 |
|
16 |
16 |
19 |
|
17 |
17 |
20 |
|
18 |
18 |
22 |
|
19 |
19 |
23 |
|
20 |
20 |
24 |
|
21 |
21 |
25 |
|
22 |
22 |
26 |
|
23 |
23 |
28 |
|
24 |
24 |
29 |
|
25 |
25 |
30 |
|
26 |
26 |
31 |
|
27 |
27 |
32 |
|
28 |
28 |
33 |
|
30 |
30 |
36 |
|
31 |
31 |
37 |
|
32 |
32 |
38 |
|
33 |
33 |
40 |
|
34 |
34 |
41 |
|
35 |
35 |
42 |
|
36 |
36 |
43 |
|
37 |
37 |
44 |
|
38 |
38 |
46 |
|
40 |
40 |
48 |
|
42 |
42 |
50 |
|
44 |
44 |
53 |
|
50 |
50 |
60 |
|
56 |
56 |
67 |
|
60 |
60 |
72 |
|
64 |
64 |
77 |
|
100 |
100 |
|
|
102 |
102 |
|
|
130 |
130 |
|