Foundations
Typography
Typography can help create clear logical hierarchies, organize information to ensures that elements in the UI are clear and easily recognizable when scanning the page.
Allowed weight
Regular
400
SemiBold
600
Bold
700
Styles
Properties
Use for
Styles
Size :
32px
Weight :
700
Line height :
38px
Oversized screen title, use only once per page.
Heading 1
Size :
22px
Weight :
700
Line height :
28px
Main titles, use only once per page.
Heading 2
Size :
18px
Weight :
700
Line height :
24px
Section Title/Heading up a group of list items.
Heading 3
Size :
16px
Weight :
700 / 400
Line height :
22px
Large Button, Link, Sub heading.
Body 1
Size :
14px
Weight :
700 / 400
Line height :
20px
Small Button, Link, Body copy, textfield.
Body 2
Size :
12px
Weight :
700 / 400
Line height :
16px
Caption, Helper, label on textfield.
Body 3
Size :
10px
Weight :
600
Line height :
14px
Label only
Small
Allowed weight
Regular
400
SemiBold
600
Bold
700
Styles
Properties
Use for
Styles
Size :
32px
Weight :
700
Line height :
38px
Oversized screen title, use only once per page.
Heading 1
Size :
22px
Weight :
700
Line height :
28px
Main titles, use only once per page.
Heading 2
Size :
18px
Weight :
700
Line height :
24px
Section Title/Heading up a group of list items.
Heading 3
Size :
16px
Weight :
700 / 400
Line height :
22px
Large Button, Link, Sub heading.
Body 1
Size :
14px
Weight :
700 / 400
Line height :
20px
Small Button, Link, Body copy, textfield.
Body 2
Size :
12px
Weight :
700 / 400
Line height :
16px
Caption, Helper, label on textfield.
Body 3
Size :
10px
Weight :
600
Line height :
14px
Label only
Small
Allowed weight
Regular
400
SemiBold
600
Bold
700
Styles
Properties
Use for
Styles
Size :
32px
Weight :
700
Line height :
38px
Oversized screen title, use only once per page.
Heading 1
Size :
22px
Weight :
700
Line height :
28px
Main titles, use only once per page.
Heading 2
Size :
18px
Weight :
700
Line height :
24px
Section Title/Heading up a group of list items.
Heading 3
Size :
16px
Weight :
700 / 400
Line height :
22px
Large Button, Link, Sub heading.
Body 1
Size :
14px
Weight :
700 / 400
Line height :
20px
Small Button, Link, Body copy, textfield.
Body 2
Size :
12px
Weight :
700 / 400
Line height :
16px
Caption, Helper, label on textfield.
Body 3
Size :
10px
Weight :
600
Line height :
14px
Label only
Small
