Screen size: 0px+
Ratio: 1.25
| Style | Size (px) | Size (em) | Line-height (ratio / em) | Line-height (px) |
|---|---|---|---|---|
| Mega | 49px | 3.052em | 1 | 49px |
| h1 | 40px | 2.441em | 1.1 | 44px |
| h2 | 31px | 1.953em | 1.2 | 37px |
| h3 | 25px | 1.563em | 1.3 | 33px |
| h4 | 20px | 1.25em | 1.4 | 28px |
| h5 | 16px | 1em | 1.5 | 24px |
Typography
Typography
The way key text uses the scale, by default.
Mega sized heading
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Lede / introduction.
Long-form paragraph.
Standard paragraph.
Small text.
The figures
Screen size: 500px+
Ratio: 1.3
| Style | Size (px) | Size (em) | Line-height (ratio / em) | Line-height (px) |
|---|---|---|---|---|
| Mega | 86px | 5.378em | 1 | 86px |
| h1 | 61px | 3.842em | 1.1 | px |
| h2 | 44px | 2.744em | 1.2 | px |
| h3 | 31px | 1.96em | 1.3 | px |
| h4 | 22px | 1.4em | 1.4 | px |
| h5 | 16px | 1em | 1.5 | px |
Screen size: 900px+
Ratio: 1.4
| Style | Size (px) | Size (em) | Line-height (ratio / em) | Line-height (px) |
|---|---|---|---|---|
| Mega | 86px | 5.378em | 1 | 86px |
| h1 | 61px | 3.842em | 1.1 | px |
| h2 | 44px | 2.744em | 1.2 | px |
| h3 | 31px | 1.96em | 1.3 | px |
| h4 | 22px | 1.4em | 1.4 | px |
| h5 | 16px | 1em | 1.5 | px |
Screen size: 1400px+
Ratio: 1.5
| Style | Size (px) | Size (em) | Line-height (ratio / em) | Line-height (px) |
|---|---|---|---|---|
| Mega | 122px | 7.594em | 1 | 122px |
| h1 | 81px | 5.063em | 1.1 | 89px |
| h2 | 54px | 3.375em | 1.2 | 65px |
| h3 | 36px | 2.25em | 1.3 | 47px |
| h4 | 24px | 1.5em | 1.4 | 37px |
| h5 | 16px | 1em | 1.5 | 24px |
Screen size: 1800px+
Ratio: 1.55
| Style | Size (px) | Size (em) | Line-height (ratio / em) | Line-height (px) |
|---|---|---|---|---|
| Mega | 86px | 5.378em | 1 | 86px |
| h1 | 61px | 3.842em | 1.1 | px |
| h2 | 44px | 2.744em | 1.2 | px |
| h3 | 31px | 1.96em | 1.3 | px |
| h4 | 22px | 1.4em | 1.4 | px |
| h5 | 16px | 1em | 1.5 | px |