Scale
Below is a list of type scales for headings, subheadings and body text. This is a suggested scale that can be adjusted to suit your squad.
|
Element |
Large scale |
Small scale |
|---|---|---|
|
Heading |
Heading 8XL |
Heading 6XL |
|
Sub-heading |
Sub-heading 6XL |
Sub-heading 4XL |
|
Nested Sub-heading |
Sub-heading 5XL, 4XL, 3XL |
Sub-heading 3XL, 2XL, XL |
|
Body text |
Body MD |
Body MD |
Scaling headings
Platforms vary in the information displayed. Use the type scale to achieve a consistent structure for headings.
Example:
- Select the largest value for the main heading (H1), for instance, 8xl
- The second heading (H2)sits two steps down, for example, 6xl
- Subsequent headings step down by one, for instance, 5xl, 4xl and so on
A design may start at a lower heading size, but the exact scale applies.
Note: Heading markup (H1 to H6) is not tied to the type scale. Use classes or component props to style headings independently of their semantic markup level.
|
Largest Heading |
Starting size |
|
Second Heading |
Two steps below |
|
Other Headings |
One step below the second heading |
Type scale
Below is an overview of the type scale used on Compound design tokens
|
Scale |
Font size/line height (px) |
|---|---|
|
8XL |
48/56 |
|
7XL |
44/52 |
|
6XL |
40/48 |
|
5XL |
36/44 |
|
4XL |
32/40 |
|
3XL |
28/36 |
|
2XL |
24/32 |
|
XL |
20/28 |
|
LG |
18/24 |
|
MD |
16/24 |
|
SM |
14/20 |
|
XS |
12/16 |
|
2XS |
10/12 |