Type Scale

Device

DesktopTablet / Mobile

Class

Font Family

Size

Line height

Weight

Hero Section/
H1

Roboto

60px / 3.75rem

120%

Bold

Hero Section/
p

Roboto

24px / 1.5rem

130%

Regular

Hero Section/
p/semibold

Roboto

24px / 1.5rem

130%

Semibold

Hero Section/
p/italic

Roboto

24px / 1.5rem

130%

Regular

Body/
H1

Roboto

48px / 3rem

120%

Bold

Body/
H2

Roboto

40px / 2.5rem

125%

Semibold

Body/
H3

Roboto

32px / 2rem

130%

Semibold

Body/
H4

Roboto

24px / 1.5rem

130%

Semibold

Body/
H5

Roboto

20px / 1.25rem

135%

Semibold

Body/
p

Roboto

16px / 1rem

150%

Regular

Body/
p/semibold

Roboto

16px / 1rem

150%

Semibold

Body/
p/italic

Roboto

16px / 1rem

150%

Regular

Body/
p/small

Roboto

12px / 0.75rem

150%

Regular

Body/
p/small-semibold

Roboto

12px / 0.75rem

150%

Semibold

Body/
p/small-italic

Roboto

12px / 0.75rem

150%

Regular

Class

Font Family

Size

Line height

Weight

Hero Section/
H1

Roboto

48px / 3rem

120%

Bold

Hero Section/
p

Roboto

20px / 1.25rem

130%

Regular

Hero Section/
p/semibold

Roboto

20px / 1.25rem

130%

Semibold

Hero Section/
p/italic

Roboto

20px / 1.25rem

130%

Regular

Body/
H1

Roboto

40px / 2.5rem

120%

Bold

Body/
H2

Roboto

32px / 2rem

125%

Semibold

Body/
H3

Roboto

24px / 1.5rem

130%

Semibold

Body/
H4

Roboto

20px / 1.25rem

130%

Semibold

Body/
H5

Roboto

16px / 1rem

135%

Semibold

Body/
p

Roboto

16px / 1rem

150%

Regular

Body/
p/semibold

Roboto

16px / 1rem

150%

Semibold

Body/
p/italic

Roboto

16px / 1rem

150%

Regular

Body/
p/small

Roboto

12px / 0.75rem

150%

Regular

Body/
p/small-semibold

Roboto

12px / 0.75rem

150%

Semibold

Body/
p/small-italic

Roboto

12px / 0.75rem

150%

Regular

Code

Hero Section/H1Hero Section/pHero Section/p/semiboldHero Section/p/italicBody/H1Body/H2Body/H3Body/H4Body/H5Body/pBody/p/semiboldBody/p/italicBody/p/smallBody/p/small-semiboldBody/p/small-italic

<section class="hero">
  <h1>This is a heading 1 for the Hero Section</h1>
</section>

<section class="hero">
  <p>This is a paragraph for the Hero Section</p>
</section>

<section class="hero">
  <p><strong>This is a semibold paragraph for the Hero Section</strong></p>
</section>

<section class="hero">
  <p><em>This is an italic paragraph for the Hero Section</em></p>
</section>

<h1>This is a heading 1 for the Body Section</h1>

<h2>This is a heading 2 for the Body Section</h2>

<h3>This is a heading 3 for the Body Section</h3>

<h4>This is a heading 4 for the Body Section</h4>

<h5>This is a heading 5 for the Body Section</h5>

<p>This is a paragraph for the Body Section</p>

<p><strong>This is a semibold paragraph for the Body Section</strong></p>

<p><em>This is an italic paragraph for the Body Section</em></p>

<small>This is a small paragraph for the Body Section</small>

<small><strong>This is a small semibold paragraph for the Body Section</strong></small>

<small><em>This is a small italic paragraph for the Body Section</em></small>

Example

Hero Section/H1Hero Section/pHero Section/p/semiboldHero Section/p/italicBody/H1Body/H2Body/H3Body/H4Body/H5Body/pBody/p/semiboldBody/p/italicBody/p/smallBody/p/small-semiboldBody/p/small-italic

This is a heading 1 for the Hero Section

This is a paragraph for the Hero Section

This is a semibold paragraph for the Hero Section

This is an italic paragraph for the Hero Section

This is a heading 1 for the Body Section

This is a heading 2 for the Body Section

This is a heading 3 for the Body Section

This is a heading 4 for the Body Section

This is a heading 5 for the Body Section

This is a paragraph for the Body Section

This is a semibold paragraph for the Body Section

This is an italic paragraph for the Body Section

This is a small paragraph for the Body Section

This is a small semibold paragraph for the Body Section

This is a small italic paragraph for the Body Section