Type Scale
Device
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
This is a heading 1 for the Hero Section Desktop Size
Code
This is a paragraph for the Hero Section Desktop Size
Code
This is a semibold paragraph for the Hero Section Desktop Size
Code
This is an italic paragraph for the Hero Section Desktop Size
Code
This is a heading 1 for the Body Section Desktop Size
Code
This is a heading 2 for the Body Section Desktop Size
Code
This is a heading 3 for the Body Section Desktop Size
Code
This is a heading 4 for the Body Section Desktop Size
Code
This is a heading 5 for the Body Section Desktop Size
Code
This is a paragraph for the Body Section Desktop Size
Code
This is a semibold paragraph for the Body Section Desktop Size
Code
This is an italic paragraph for the Body Section Desktop Size
Code
This is a small paragraph for the Body Section Desktop Size
Code
This is a small semibold paragraph for the Body Section Desktop Size
Code
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
This is a heading 1 for the Hero Section Tablet Size
Code
This is a paragraph for the Hero Section Tablet Size
Code
This is a semibold paragraph for the Hero Section Tablet Size
Code
This is an italic paragraph for the Hero Section Tablet Size
Code
This is a heading 1 for the Body Section Tablet Size
Code
This is a heading 2 for the Body Section Tablet Size
Code
This is a heading 3 for the Body Section Tablet Size
Code
This is a heading 4 for the Body Section Tablet Size
Code
This is a heading 5 for the Body Section Tablet Size
Code
This is a paragraph for the Body Section Tablet Size
Code
This is a semibold paragraph for the Body Section Tablet Size
Code
This is an italic paragraph for the Body Section Tablet Size
Code
This is a small paragraph for the Body Section Tablet Size
Code
This is a small semibold paragraph for the Body Section Tablet Size