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

Font weight:

400

Line height:

1.5

Sample

Aa
type-scale/heading/regular/200

Font family:

Lato, Arial, sans-serif

Font size:

1.125rem

Font weight:

400

Line height:

1.5

Sample

Aa
type-scale/heading/regular/300

Font family:

Lato, Arial, sans-serif

Font size:

1.25rem

Font weight:

400

Line height:

1.5

Sample

Aa
type-scale/heading/regular/400

Font family:

Lato, Arial, sans-serif

Font size:

1.5rem

Font weight:

400

Line height:

1.25

Sample

Aa
type-scale/heading/regular/500

Font family:

Lato, Arial, sans-serif

Font size:

1.75rem

Font weight:

400

Line height:

1.25

Sample

Aa
type-scale/heading/regular/600

Font family:

Lato, Arial, sans-serif

Font size:

2rem

Font weight:

400

Line height:

1.25

Sample

Aa
type-scale/heading/regular/700

Font family:

Lato, Arial, sans-serif

Font size:

2.25rem

Font weight:

400

Line height:

1.25

Sample

Aa
type-scale/heading/regular/800

Font family:

Lato, Arial, sans-serif

Font size:

2.5rem

Font weight:

400

Line height:

1.25

Sample

Aa
type-scale/heading/regular/900

Font family:

Lato, Arial, sans-serif

Font size:

3rem

Font weight:

400

Line height:

1.125

Sample

Aa
type-scale/heading/regular/1000

Font family:

Lato, Arial, sans-serif

Font size:

3.5rem

Font weight:

400

Line height:

1.125

Sample

Aa
type-scale/heading/regular/1100

Font family:

Lato, Arial, sans-serif

Font size:

4rem

Font weight:

400

Line height:

1.125

Sample

Aa
type-scale/heading/regular/1200

Font family:

Lato, Arial, sans-serif

Font size:

5rem

Font weight:

400

Line height:

1.125

Sample

Aa
type-scale/heading/bold/100

Font family:

Lato, Arial, sans-serif

Font size:

1rem

Font weight:

700

Line height:

1.5

Sample

Aa
type-scale/heading/bold/200

Font family:

Lato, Arial, sans-serif

Font size:

1.125rem

Font weight:

700

Line height:

1.5

Sample

Aa
type-scale/heading/bold/300

Font family:

Lato, Arial, sans-serif

Font size:

1.25rem

Font weight:

700

Line height:

1.5

Sample

Aa
type-scale/heading/bold/400

Font family:

Lato, Arial, sans-serif

Font size:

1.5rem

Font weight:

700

Line height:

1.25

Sample

Aa
type-scale/heading/bold/500

Font family:

Lato, Arial, sans-serif

Font size:

1.75rem

Font weight:

700

Line height:

1.25

Sample

Aa
type-scale/heading/bold/600

Font family:

Lato, Arial, sans-serif

Font size:

2rem

Font weight:

700

Line height:

1.25

Sample

Aa
type-scale/heading/bold/700

Font family:

Lato, Arial, sans-serif

Font size:

2.25rem

Font weight:

700

Line height:

1.25

Sample

Aa
type-scale/heading/bold/800

Font family:

Lato, Arial, sans-serif

Font size:

2.5rem

Font weight:

700

Line height:

1.25

Sample

Aa
type-scale/heading/bold/900

Font family:

Lato, Arial, sans-serif

Font size:

3rem

Font weight:

700

Line height:

1.125

Sample

Aa
type-scale/heading/bold/1000

Font family:

Lato, Arial, sans-serif

Font size:

3.5rem

Font weight:

700

Line height:

1.125

Sample

Aa
type-scale/heading/bold/1100

Font family:

Lato, Arial, sans-serif

Font size:

4rem

Font weight:

700

Line height:

1.125

Sample

Aa
type-scale/heading/bold/1200

Font family:

Lato, Arial, sans-serif

Font size:

5rem

Font weight:

700

Line height:

1.125

Sample

Aa

Text

type-scale/text/100

Font family:

Lato, Arial, sans-serif

Font size:

0.875rem

Font weight:

400

Line height:

1.5

Sample

Aa
type-scale/text/200

Font family:

Lato, Arial, sans-serif

Font size:

1rem

Font weight:

400

Line height:

1.5

Sample

Aa
type-scale/text/300

Font family:

Lato, Arial, sans-serif

Font size:

1.125rem

Font weight:

400

Line height:

1.5

Sample

Aa
type-scale/text/400

Font family:

Lato, Arial, sans-serif

Font size:

1.25rem

Font weight:

400

Line height:

1.5

Sample

Aa
type-scale/text/500

Font family:

Lato, Arial, sans-serif

Font size:

1.5rem

Font weight:

400

Line height:

1.5

Sample

Aa