Type Scale

Type scales are composed of a few different primitive values from the font tokens, including font family, size, weight, and line height. The combination of these values form scales with consistent increments in sizing. These scales are then used to inform the heading and text scale which are applied to designs.

Heading

type-scale/heading/regular/100

Font family:

Lato, Arial, sans-serif

Font size:

1rem (e.g. 16px)

Font weight:

400

Line height:

1.5 (e.g. 24px)

Sample

type-scale/heading/regular/200

Font family:

Lato, Arial, sans-serif

Font size:

1.125rem (e.g. 18px)

Font weight:

400

Line height:

1.5 (e.g. 27px)

Sample

type-scale/heading/regular/300

Font family:

Lato, Arial, sans-serif

Font size:

1.25rem (e.g. 20px)

Font weight:

400

Line height:

1.5 (e.g. 30px)

Sample

type-scale/heading/regular/400

Font family:

Lato, Arial, sans-serif

Font size:

1.5rem (e.g. 24px)

Font weight:

400

Line height:

1.25 (e.g. 30px)

Sample

type-scale/heading/regular/500

Font family:

Lato, Arial, sans-serif

Font size:

1.75rem (e.g. 28px)

Font weight:

400

Line height:

1.25 (e.g. 35px)

Sample

type-scale/heading/regular/600

Font family:

Lato, Arial, sans-serif

Font size:

2rem (e.g. 32px)

Font weight:

400

Line height:

1.25 (e.g. 40px)

Sample

type-scale/heading/regular/700

Font family:

Lato, Arial, sans-serif

Font size:

2.25rem (e.g. 36px)

Font weight:

400

Line height:

1.25 (e.g. 45px)

Sample

type-scale/heading/regular/800

Font family:

Lato, Arial, sans-serif

Font size:

2.5rem (e.g. 40px)

Font weight:

400

Line height:

1.25 (e.g. 50px)

Sample

type-scale/heading/regular/900

Font family:

Lato, Arial, sans-serif

Font size:

3rem (e.g. 48px)

Font weight:

400

Line height:

1.125 (e.g. 54px)

Sample

type-scale/heading/regular/1000

Font family:

Lato, Arial, sans-serif

Font size:

3.5rem (e.g. 56px)

Font weight:

400

Line height:

1.125 (e.g. 63px)

Sample

type-scale/heading/regular/1100

Font family:

Lato, Arial, sans-serif

Font size:

4rem (e.g. 64px)

Font weight:

400

Line height:

1.125 (e.g. 72px)

Sample

type-scale/heading/regular/1200

Font family:

Lato, Arial, sans-serif

Font size:

5rem (e.g. 80px)

Font weight:

400

Line height:

1.125 (e.g. 90px)

Sample

type-scale/heading/bold/100

Font family:

Lato, Arial, sans-serif

Font size:

1rem (e.g. 16px)

Font weight:

700

Line height:

1.5 (e.g. 24px)

Sample

type-scale/heading/bold/200

Font family:

Lato, Arial, sans-serif

Font size:

1.125rem (e.g. 18px)

Font weight:

700

Line height:

1.5 (e.g. 27px)

Sample

type-scale/heading/bold/300

Font family:

Lato, Arial, sans-serif

Font size:

1.25rem (e.g. 20px)

Font weight:

700

Line height:

1.5 (e.g. 30px)

Sample

type-scale/heading/bold/400

Font family:

Lato, Arial, sans-serif

Font size:

1.5rem (e.g. 24px)

Font weight:

700

Line height:

1.25 (e.g. 30px)

Sample

type-scale/heading/bold/500

Font family:

Lato, Arial, sans-serif

Font size:

1.75rem (e.g. 28px)

Font weight:

700

Line height:

1.25 (e.g. 35px)

Sample

type-scale/heading/bold/600

Font family:

Lato, Arial, sans-serif

Font size:

2rem (e.g. 32px)

Font weight:

700

Line height:

1.25 (e.g. 40px)

Sample

type-scale/heading/bold/700

Font family:

Lato, Arial, sans-serif

Font size:

2.25rem (e.g. 36px)

Font weight:

700

Line height:

1.25 (e.g. 45px)

Sample

type-scale/heading/bold/800

Font family:

Lato, Arial, sans-serif

Font size:

2.5rem (e.g. 40px)

Font weight:

700

Line height:

1.25 (e.g. 50px)

Sample

type-scale/heading/bold/900

Font family:

Lato, Arial, sans-serif

Font size:

3rem (e.g. 48px)

Font weight:

700

Line height:

1.125 (e.g. 54px)

Sample

type-scale/heading/bold/1000

Font family:

Lato, Arial, sans-serif

Font size:

3.5rem (e.g. 56px)

Font weight:

700

Line height:

1.125 (e.g. 63px)

Sample

type-scale/heading/bold/1100

Font family:

Lato, Arial, sans-serif

Font size:

4rem (e.g. 64px)

Font weight:

700

Line height:

1.125 (e.g. 72px)

Sample

type-scale/heading/bold/1200

Font family:

Lato, Arial, sans-serif

Font size:

5rem (e.g. 80px)

Font weight:

700

Line height:

1.125 (e.g. 90px)

Sample

Text

type-scale/text/100

Font family:

Lato, Arial, sans-serif

Font size:

0.875rem (e.g. 14px)

Font weight:

400

Line height:

1.5 (e.g. 21px)

Sample

type-scale/text/200

Font family:

Lato, Arial, sans-serif

Font size:

1rem (e.g. 16px)

Font weight:

400

Line height:

1.5 (e.g. 24px)

Sample

type-scale/text/300

Font family:

Lato, Arial, sans-serif

Font size:

1.125rem (e.g. 18px)

Font weight:

400

Line height:

1.5 (e.g. 27px)

Sample

type-scale/text/400

Font family:

Lato, Arial, sans-serif

Font size:

1.25rem (e.g. 20px)

Font weight:

400

Line height:

1.5 (e.g. 30px)

Sample

type-scale/text/500

Font family:

Lato, Arial, sans-serif

Font size:

1.5rem (e.g. 24px)

Font weight:

400

Line height:

1.5 (e.g. 36px)

Sample