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)	20 (1.25rem)	30 (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)	48 (3.0rem) Reduces to 35	62.4 (1.3) 45.5 (1.3)
Heading, xl	Red Hat Display	Regular (400)	40 (2.5rem) Reduces to 29	52 (1.3) 37.7 (1.3)
Heading, lg	Red Hat Display	Medium (500)	36 (2.25rem) Reduces to 26	46.8 (1.3) 33.8 (1.3)
Heading, md	Red Hat Display	Medium (500)	28 (1.75rem) Reduces to 24	36.4 (1.3) 31.2 (1.3)
Heading, sm	Red Hat Display	Medium (500)	24 (1.5rem) Reduces to 20	31.2 (1.3) 26 (1.3)
Heading, xs	Red Hat Display	Medium (500)	20 (1.25rem) Reduces to 18	26 (1.3) 23.4 (1.3)

Body text

Style	Font family	Font weight	Font size	Line height
Body text, 2xl	Red Hat Text	Regular (400)	24 (1.5rem) Reduces to 20	36 (1.5) 30 (1.5)
Body text, xl	Red Hat Text	Regular (400)	20 (1.25rem) Reduces to 18	30 (1.5) 27 (1.5)
Body text, lg	Red Hat Text	Regular (400)	18 (1.125rem) Reduces to 16	27 (1.5) 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)	24 (1.5rem) Reduces to 20	36 (1.5) 30 (1.5)
Code text, xl	Red Hat Mono	Regular (400)	20 (1.25rem) Reduces to 18	30 (1.5) 27 (1.5)
Code text, lg	Red Hat Mono	Regular (400)	18 (1.125rem) Reduces to 16	27 (1.5) 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)	24 (1.5rem) Reduces to 20	36 (1.5) 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)	28 (1.75rem) Reduces to 24	36.4 (1.3) 31.2 (1.3)
Blockquote, sm	Red Hat Display	Regular (400)	20 (1.25rem) Reduces to 18	26 (1.3) 23.4 (1.3)

Foundations

To learn how to use our other foundations in your designs, visit the foundations section.