Typography
Overview
The type scale includes a range of text sizes and weights designed to support various content needs. There are type scales for both desktop and mobile environments. For more technical details, go to the Tokens section.
Desktop scale
Heading
You might see headings with larger sizes or different weights. Those are used for limited bespoke use cases only. Contact the Brand team to learn more about using heading sizes and weights different from the table below.
| Style | Font family | Font weight | Font size | Line height |
|---|---|---|---|---|
| Heading, 2xl | Red Hat Display | Regular (400) | 48 (3.0rem) | 62.4 (1.3) |
| Heading, xl | Red Hat Display | Regular (400) | 40 (2.5rem) | 52 (1.3) |
| Heading, lg | Red Hat Display | Medium (500) | 36 (2.25rem) | 46.8 (1.3) |
| Heading, md | Red Hat Display | Medium (500) | 28 (1.75rem) | 36.4 (1.3) |
| Heading, sm | Red Hat Display | Medium (500) | 24 (1.5rem) | 31.2 (1.3) |
| Heading, xs | Red Hat Display | Medium (500) | 20 (1.25rem) | 26 (1.3) |
Body text
Body text can use italic and medium styles for emphasis.
| Style | Font family | Font weight | Font size | Line height |
|---|---|---|---|---|
| Body text, 2xl | Red Hat Text | Regular (400) | 24 (1.5rem) | 36 (1.5) |
| Body text, xl | Red Hat Text | Regular (400) | 20 (1.25rem) | 30 (1.5) |
| Body text, lg | Red Hat Text | Regular (400) | 18 (1.125rem) | 27 (1.5) |
| Body text, md | Red Hat Text | Regular (400) | 16 (1.0rem) | 24 (1.5) |
| Body text, sm | Red Hat Text | Regular (400) | 14 (0.875rem) | 21 (1.5) |
| Body text, xs | Red Hat Text | Regular (400) | 12 (0.75rem) | 18 (1.5) |
Code text
Code text may use italic and medium styles for emphasis if absolutely necessary.
| Style | Font family | Font weight | Font size | Line height |
|---|---|---|---|---|
| Code text, 2xl | Red Hat Mono | Regular (400) | 24 (1.5rem) | 36 (1.5) |
| Code text, xl | Red Hat Mono | Regular (400) | 20 (1.25rem) | 30 (1.5) |
| Code text, lg | Red Hat Mono | Regular (400) | 18 (1.125rem) | 27 (1.5) |
| Code text, md | Red Hat Mono | Regular (400) | 16 (1.0rem) | 24 (1.5) |
| Code text, sm | Red Hat Mono | Regular (400) | 14 (0.875rem) | 21 (1.5) |
| Code text, xs | Red Hat Mono | Regular (400) | 12 (0.75rem) | 18 (1.5) |
Title
| Style | Font family | Font weight | Font size | Line height |
|---|---|---|---|---|
| Title, lg | Red Hat Text | Regular (400) | 24 (1.5rem) | 36 (1.5) |
| Title, sm | Red Hat Text | Regular (400) | 16 (1.0rem) | 24 (1.5) |
Blockquote
| Style | Font family | Font weight | Font size | Line height |
|---|---|---|---|---|
| Blockquote, lg | Red Hat Display | Regular (400) | 28 (1.75rem) | 36.4 (1.3) |
| Blockquote, sm | Red Hat Display | Regular (400) | 20 (1.25rem) | 26 (1.3) |
Mobile scale
The mobile scale takes effect when the viewport size is less than 768px.
Heading
| Style | Font family | Font weight | Font size | Line height |
|---|---|---|---|---|
| Heading, 2xl | Red Hat Display | Regular (400) |
Reduces to 35 |
45.5 (1.3) |
| Heading, xl | Red Hat Display | Regular (400) |
Reduces to 29 |
37.7 (1.3) |
| Heading, lg | Red Hat Display | Medium (500) |
Reduces to 26 |
33.8 (1.3) |
| Heading, md | Red Hat Display | Medium (500) |
Reduces to 24 |
31.2 (1.3) |
| Heading, sm | Red Hat Display | Medium (500) |
Reduces to 20 |
26 (1.3) |
| Heading, xs | Red Hat Display | Medium (500) |
Reduces to 18 |
23.4 (1.3) |
Body text
| Style | Font family | Font weight | Font size | Line height |
|---|---|---|---|---|
| Body text, 2xl | Red Hat Text | Regular (400) |
Reduces to 20 |
30 (1.5) |
| Body text, xl | Red Hat Text | Regular (400) |
Reduces to 18 |
27 (1.5) |
| Body text, lg | Red Hat Text | Regular (400) |
Reduces to 16 |
24 (1.5) |
| Body text, md | Red Hat Text | Regular (400) |
16 (1.0rem) Does not change |
24 (1.5) |
| Body text, sm | Red Hat Text | Regular (400) |
14 (0.875rem) Does not change |
21 (1.5) |
| Body text, xs | Red Hat Text | Regular (400) |
12 (0.75rem) Does not change |
18 (1.5) |
Code text
| Style | Font family | Font weight | Font size | Line height |
|---|---|---|---|---|
| Code text, 2xl | Red Hat Mono | Regular (400) |
Reduces to 20 |
30 (1.5) |
| Code text, xl | Red Hat Mono | Regular (400) |
Reduces to 18 |
27 (1.5) |
| Code text, lg | Red Hat Mono | Regular (400) |
Reduces to 16 |
24 (1.5) |
| Code text, md | Red Hat Mono | Regular (400) |
16 (1.0rem) Does not change |
24 (1.5) |
| Code text, sm | Red Hat Mono | Regular (400) |
14 (0.875rem) Does not change |
21 (1.5) |
| Code text, xs | Red Hat Mono | Regular (400) |
12 (0.75rem) Does not change |
18 (1.5) |
Title
| Style | Font family | Font weight | Font size | Line height |
|---|---|---|---|---|
| Title, lg | Red Hat Text | Regular (400) |
Reduces to 20 |
30 (1.5) |
| Title, sm | Red Hat Text | Regular (400) |
16 (1.0rem) Does not change |
24 (1.5) |
Blockquote
| Style | Font family | Font weight | Font size | Line height |
|---|---|---|---|---|
| Blockquote, lg | Red Hat Display | Regular (400) |
Reduces to 24 |
31.2 (1.3) |
| Blockquote, sm | Red Hat Display | Regular (400) |
Reduces to 18 |
23.4 (1.3) |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
Foundations
To learn how to use our other foundations in your designs, visit the foundations section.
