There is a close relationship between our typography sizes and the devices where they have to work. The same text style should have different values when working with different devices or breakpoints.
Headline
|
|
Desktop |
Tablet |
Mobile |
|---|---|---|---|
|
Display |
72px |
72px |
56px |
|
Hero |
56px |
56px |
48px |
|
Huge |
48px |
48px |
32px |
|
Big |
32px |
32px |
24px |
|
Large |
24px |
24px |
20px |
|
Medium-large |
18px |
18px |
18px |
|
Medium |
16px |
16px |
16px |
Text
|
|
Desktop |
Tablet |
Mobile |
|---|---|---|---|
|
Medium |
16px |
16px |
16px |
|
Medium-small |
14px |
14px |
14px |
|
Small |
12px |
12px |
12px |
|
Tiny |
10px |
10px |
10px |
|
Micro |
8px |
8px |
8px |
Information
|
|
Desktop |
Tablet |
Mobile |
|---|---|---|---|
|
Small |
12px |
12px |
12px |
|
Tiny |
10px |
10px |
12px |
|
Micro |
8px |
10px |
12px |