Typography

Overview

Our type scale features a range of text sizes and weights designed to support lots of content and user needs. Use tokens to implement these styles.

View typography tokens

Base text size

We use a base text size of 16px or 1.0rem.

Desktop scale

Extra small headings

Use extra small headings inside small elements or for other use cases. Weights for these headings should not be changed.

Name	Font family	Weight	Size	Line height (1.3)
3xs	Display	Medium (500)	16 (1.0rem)	20.8
2xs	Display	Medium (500)	18 (1.125rem)	23.4

Standard headings

These are our standard h1 - h6 heading sizes. Weights for these headings should not be changed.

Name	Font family	Weight	Size	Line height (1.3)
xs	Display	Medium (500)	20 (1.25rem)	26
sm	Display	Medium (500)	24 (1.5rem)	31.2
md	Display	Medium (500)	28 (1.75rem)	36.4
lg	Display	Medium (500)	36 (2.25rem)	46.8
xl	Display	Regular (400)	40 (2.5rem)	52
2xl	Display	Regular (400)	48 (3.0 rem)	62.4

Expressive headings

To learn more about how to use expressive headings, go to the Choosing type page.

Name	Font family	Weight	Size	Line height (1.1)
3xl	Display, Text, Mono	Multiple	64 (4.0rem)	70.4
4xl	Display, Text, Mono	Multiple	80 (5.0rem)	88
5xl	Display, Text, Mono	Multiple	96 (6.0rem)	105.6

Body text and lists

Body text and lists can use the medium weight and italics for emphasis, but never use the bold weight.

Name	Font family	Weight	Size	Line height (1.5)
xs	Text	Regular	12 (0.75rem)	18
sm	Text	Regular	14 (0.875rem)	21
md	Text	Regular	16 (1.0rem)	24
lg	Text	Regular	18 (1.125rem)	27
xl	Text	Regular	20 (1.25rem)	30
2xl	Text	Regular	24 (1.5rem)	36

Code

Code text may use the medium weight and italics for emphasis if necessary, but never use the bold weight.

Name	Font family	Weight	Size	Line height (1.5)
xs	Mono	Regular	12 (0.75rem)	18
sm	Mono	Regular	14 (0.875rem)	21
md	Mono	Regular	16 (1.0rem)	24
lg	Mono	Regular	18 (1.125rem)	27
xl	Mono	Regular	20 (1.25rem)	30
2xl	Mono	Regular	24 (1.5rem)	36

Call to action

Name	Font family	Weight	Size	Line height (1.5)
sm	Display	Bold	16 (1.0rem)	24
lg	Display	Bold	18 (1.125rem)	27

Title

Name	Font family	Weight	Size	Line height (1.5)
sm	Text	Regular	16 (1.0rem)	24
lg	Text	Regular	20 (1.25rem)	30

Quote

The bold weight may be used for emphasis if absolutely necessary.

Name	Font family	Weight	Size	Line height (1.5)
sm	Display	Regular	20 (1.25rem)	30
lg	Display	Regular	28 (1.75rem)	42

Mobile scale

The mobile scale takes effect when the viewport size is less than 768px.

Extra small headings

Extra small heading sizes do not get smaller.

Standard headings

Name	Font family	Weight	Size	Line height (1.3)
2xl	Display	Regular (400)	48 (3.0rem) Reduces to 35	62.4 45.5
xl	Display	Regular (400)	40 (2.5rem) Reduces to 29	52 37.7
lg	Display	Medium (500)	36 (2.25rem) Reduces to 26	46.8 33.8
md	Display	Medium (500)	28 (1.75rem) Reduces to 24	36.4 31.2
sm	Display	Medium (500)	24 (1.5rem) Reduces to 20	31.2 26
xs	Display	Medium (500)	20 (1.25rem) Reduces to 18	26 23.4

Expressive headings

All expressive heading sizes reduce to 48px.

Name	Font family	Weight	Size	Line height (1.1)
3xl	Display	Multiple	64 (4.0rem) Reduces to 48	70.4 52.8
4xl	Display	Multiple	80 (5.0rem) Reduces to 48	88 52.8
5xl	Display	Multiple	96 (6.0rem) Reduces to 48	105.6 52.8

Body text and lists

Body text and list sizes that are 16px and below do not get smaller.

Name	Font family	Weight	Size	Line height (1.5)
lg	Text	Regular	18 (1.125rem) Reduces to 16	27 24
xl	Text	Regular	20 (1.25rem) Reduces to 18	30 27
2xl	Text	Regular	24 (1.5rem) Reduces to 20	36 30

Code

Code sizes that are 16px and below do not get smaller.

Name	Font family	Weight	Size	Line height (1.5)
lg	Mono	Regular	18 (1.125rem) Reduces to 16	27 24
xl	Mono	Regular	20 (1.25rem) Reduces to 18	30 27
2xl	Mono	Regular	24 (1.5rem) Reduces to 20	36 30

Call to action

Call to action sizes do not get smaller.

Title

The Title, sm size does not get smaller.

Name	Font family	Weight	Size	Line height (1.5)
lg	Text	Regular	20 (1.25rem) Reduces to 18	30 27

Quote

Name	Font family	Weight	Size	Line height (1.5)
sm	Display	Regular	20 (1.25rem) Reduces to 18	30 27
lg	Display	Regular	28 (1.75rem) Reduces to 24	42 36

Vertical rhythm

Headings and paragraphs

Use the --rh-space-lg token in between stacked headings and in between headings and body text.

Lists

Use the following specs for lists.

• Use the --rh-space-lg token on top of a list and in between each bullet
• Use the --rh-space-3xl token for left indentation
• All padding specs are the same on mobile breakpoints

Margins

There are different margin specs depending on how text styles are grouped.

• In general, blocks of content use the --rh-space-5xl token on the top and bottom
• Blocks of content with subsections use the --rh-space-4xl token in between

Foundations

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