Type Scale

Device

DesktopTablet / Mobile

Class

Font Family

Size

Line height

Weight

Style

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

Italic

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

Italic

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

Italic

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 Desktop Size

Code

    <style>
    </style>

    <h1 class="desktop-hero-h1">This is a heading 1 for the Hero Section Desktop Size<h1>

This is a paragraph for the Hero Section Desktop Size

Code

    <style>
    </style>

    <p class="desktop-hero-p">This is a paragraph for the Hero Section Desktop Size<p>

This is a semibold paragraph for the Hero Section Desktop Size

Code

    <style>
    </style>

    <p class="desktop-hero-p-semibold">This is a semibold paragraph for the Hero Section Desktop Size<p>

This is an italic paragraph for the Hero Section Desktop Size

Code

    <style>
    </style>

    <p class="desktop-hero-p-italic">This is an italic paragraph for the Hero Section Desktop Size<p>

This is a heading 1 for the Body Section Desktop Size

Code

    <style>
    </style>

    <h1 class="desktop-body-h1">This is a heading 1 for the Body Section Desktop Size<h1>

This is a heading 2 for the Body Section Desktop Size

Code

    <style>
    </style>

    <h2 class="desktop-body-h2">This is a heading 2 for the Body Section Desktop Size<h2>

This is a heading 3 for the Body Section Desktop Size

Code

    <style>
    </style>

    <h3 class="desktop-body-h3">This is a heading 3 for the Body Section Desktop Size<h3>

This is a heading 4 for the Body Section Desktop Size

Code

    <style>
    </style>

    <h4 class="desktop-body-h4">This is a heading 4 for the Body Section Desktop Size<h4>

This is a heading 5 for the Body Section Desktop Size

Code

    <style>
    </style>

    <h5 class="desktop-body-h5">This is a heading 5 for the Body Section Desktop Size<h5>

This is a paragraph for the Body Section Desktop Size

Code

    <style>
    </style>

    <p class="desktop-body-p">This is a paragraph for the Body Section Desktop Size<p>

This is a semibold paragraph for the Body Section Desktop Size

Code

    <style>
    </style>

    <p class="desktop-body-p-semibold">This is a semibold paragraph for the Body Section Desktop Size<p>

This is an italic paragraph for the Body Section Desktop Size

Code

    <style>
    </style>

    <p class="desktop-body-p-italic">This is an italic paragraph for the Body Section Desktop Size<p>

This is a small paragraph for the Body Section Desktop Size

Code

    <style>
    </style>

    <p class="desktop-body-p-small">This is a small paragraph for the Body Section Desktop Size<p>

This is a small semibold paragraph for the Body Section Desktop Size

Code

    <style>
    </style>

    <p class="desktop-body-p-small-semibold">This is a small semibold paragraph for the Body Section Desktop Size<p>

This is a small italic paragraph for the Body Section Desktop Size

Code

    <style>
    </style>

    <p class="desktop-body-p-small-italic">This is a small italic paragraph for the Body Section Desktop Size<p>

Class

Font Family

Size

Line height

Weight

Style

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

Italic

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

Italic

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

Italic

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 Tablet Size

Code

    <style>
    </style>

    <h1 class="tablet-hero-h1">This is a heading 1 for the Hero Section Tablet Size<h1>

This is a paragraph for the Hero Section Tablet Size

Code

    <style>
    </style>

    <p class="tablet-hero-p">This is a paragraph for the Hero Section Tablet Size<p>

This is a semibold paragraph for the Hero Section Tablet Size

Code

    <style>
    </style>

    <p class="tablet-hero-p-semibold">This is a semibold paragraph for the Hero Section Tablet Size<p>

This is an italic paragraph for the Hero Section Tablet Size

Code

    <style>
    </style>

    <p class="tablet-hero-p-italic">This is an italic paragraph for the Hero Section Tablet Size<p>

This is a heading 1 for the Body Section Tablet Size

Code

    <style>
    </style>

    <h1 class="tablet-body-h1">This is a heading 1 for the Body Section Tablet Size<h1>

This is a heading 2 for the Body Section Tablet Size

Code

    <style>
    </style>

    <h2 class="tablet-body-h2">This is a heading 2 for the Body Section Tablet Size<h2>

This is a heading 3 for the Body Section Tablet Size

Code

    <style>
    </style>

    <h3 class="tablet-body-h3">This is a heading 3 for the Body Section Tablet Size<h3>

This is a heading 4 for the Body Section Tablet Size

Code

    <style>
    </style>

    <h4 class="tablet-body-h4">This is a heading 4 for the Body Section Tablet Size<h4>

This is a heading 5 for the Body Section Tablet Size

Code

    <style>
    </style>

    <h5 class="tablet-body-h5">This is a heading 5 for the Body Section Tablet Size<h5>

This is a paragraph for the Body Section Tablet Size

Code

    <style>
    </style>

    <p class="tablet-body-p">This is a paragraph for the Body Section Tablet Size<p>

This is a semibold paragraph for the Body Section Tablet Size

Code

    <style>
    </style>

    <p class="tablet-body-p-semibold">This is a semibold paragraph for the Body Section Tablet Size<p>

This is an italic paragraph for the Body Section Tablet Size

Code

    <style>
    </style>

    <p class="tablet-body-p-italic">This is an italic paragraph for the Body Section Tablet Size<p>

This is a small paragraph for the Body Section Tablet Size

Code

    <style>
    </style>

    <p class="tablet-body-p-small">This is a small paragraph for the Body Section Tablet Size<p>

This is a small semibold paragraph for the Body Section Tablet Size

Code

    <style>
    </style>

    <p class="tablet-body-p-small-semibold">This is a small semibold paragraph for the Body Section Tablet Size<p>

This is a small italic paragraph for the Body Section Tablet Size

Code

    <style>
    </style>

    <p class="tablet-body-p-small-italic">This is a small italic paragraph for the Body Section Tablet Size<p>