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 large headings

These are Expressive type heading sizes.

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

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

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)
2xl	Display	Regular (400)	48 (3.0 rem)	62.4
xl	Display	Regular (400)	40 (2.5rem)	52
lg	Display	Medium (500)	36 (2.25rem)	46.8
md	Display	Medium (500)	28 (1.75rem)	36.4
sm	Display	Medium (500)	24 (1.5rem)	31.2
xs	Display	Medium (500)	20 (1.25rem)	26

Body text

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

Name	Font family	Weight	Size	Line height (1.5)
2xl	Text	Regular	24 (1.5rem)	36
xl	Text	Regular	20 (1.25rem)	30
lg	Text	Regular	18 (1.125rem)	27
md	Text	Regular	16 (1.0rem)	24
sm	Text	Regular	14 (0.875rem)	21
xs	Text	Regular	12 (0.75rem)	18
2xs	Text	Regular	10 (0.625rem)	15
3xs	Text	Regular	8 (0.5rem)	12
4xs	Text	Regular	6 (0.375rem)	9

Code text

Name	Font family	Weight	Size	Line height (1.5)
2xl	Mono	Regular	24 (1.5rem)	36
xl	Mono	Regular	20 (1.25rem)	30
lg	Mono	Regular	18 (1.125rem)	27
md	Mono	Regular	16 (1.0rem)	24
sm	Mono	Regular	14 (0.875rem)	21
xs	Mono	Regular	12 (0.75rem)	18
2xs	Mono	Regular	10 (0.625rem)	15
3xs	Mono	Regular	8 (0.5rem)	12
4xs	Mono	Regular	6 (0.375rem)	9

Titles

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

Quotes

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

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

Mobile scale

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

Extra large headings

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

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

Body text

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

Code text

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

Titles

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

Quotes

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

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.