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.
![](https://framerusercontent.com/images/0b938vNwjz3FRk3op8l5DNhPA.png)
![](https://framerusercontent.com/images/0b938vNwjz3FRk3op8l5DNhPA.png)
![](https://framerusercontent.com/images/0b938vNwjz3FRk3op8l5DNhPA.png)
Typography rules
![](https://framerusercontent.com/images/rhITGDz0wMbk8DYWHWRrjS2kcJs.png)
Allowed weight
Regular
400
SemiBold
600
Bold
700
Styles
Properties
Use for
Styles
Size :
56px
Weight :
700
Line height :
62px
Banner title
Heading 1
Size :
38px
Weight :
700
Line height :
44px
Oversized screen title, use only once per page.
Heading 2
Size :
28px
Weight :
700
Line height :
34px
Main titles, use only once per page.
Heading 3
Size :
18px
Weight :
700 / 400
Line height :
24px
Large Button, Link, Sub heading
Body 1
Size :
16px
Weight :
700 / 400
Line height :
22px
Small Button, Link, Body copy, textfield
Body 2
Size :
14px
Weight :
700 / 400
Line height :
20px
Caption, Helper, label on textfield.
Body 3
Size :
12px
Weight :
600
Line height :
16px
Label only
Small
Size :
10px
Weight :
700 / 400
Line height :
14px
Paragraph
Extra Small
Responsive breakpoint
These breakpoints describe column and width specifications for different screen size.
Screen size
Margin
Container
Column
Gutter
Mobile (320-839)
XSmall
320-399
20
Fluid
12
8
Small
400-599
20
Fluid
12
12
Medium
600-839
40
Fluid
12
16
Desktop (840-1440+)
Large
840-959
Fluid
760
12
16
XLarge
960-1279
100
Fluid
12
16
XXLarge
1280-1439
120
Fluid
12
20
XXXLarge
1440+
Fluid
1200
12
24
Typography rules
![](https://framerusercontent.com/images/rhITGDz0wMbk8DYWHWRrjS2kcJs.png)
Allowed weight
Regular
400
SemiBold
600
Bold
700
Styles
Properties
Use for
Styles
Size :
56px
Weight :
700
Line height :
62px
Banner title
Heading 1
Size :
38px
Weight :
700
Line height :
44px
Oversized screen title, use only once per page.
Heading 2
Size :
28px
Weight :
700
Line height :
34px
Main titles, use only once per page.
Heading 3
Size :
18px
Weight :
700 / 400
Line height :
24px
Large Button, Link, Sub heading
Body 1
Size :
16px
Weight :
700 / 400
Line height :
22px
Small Button, Link, Body copy, textfield
Body 2
Size :
14px
Weight :
700 / 400
Line height :
20px
Caption, Helper, label on textfield.
Body 3
Size :
12px
Weight :
600
Line height :
16px
Label only
Small
Size :
10px
Weight :
700 / 400
Line height :
14px
Paragraph
Extra Small
Responsive breakpoint
These breakpoints describe column and width specifications for different screen size.
Screen size
Margin
Container
Column
Gutter
Mobile (320-839)
XSmall
320-399
20
Fluid
12
8
Small
400-599
20
Fluid
12
12
Medium
600-839
40
Fluid
12
16
Desktop (840-1440+)
Large
840-959
Fluid
760
12
16
XLarge
960-1279
100
Fluid
12
16
XXLarge
1280-1439
120
Fluid
12
20
XXXLarge
1440+
Fluid
1200
12
24
Typography rules
![](https://framerusercontent.com/images/rhITGDz0wMbk8DYWHWRrjS2kcJs.png)
Allowed weight
Regular
400
SemiBold
600
Bold
700
Styles
Properties
Use for
Styles
Size :
56px
Weight :
700
Line height :
62px
Banner title
Heading 1
Size :
38px
Weight :
700
Line height :
44px
Oversized screen title, use only once per page.
Heading 2
Size :
28px
Weight :
700
Line height :
34px
Main titles, use only once per page.
Heading 3
Size :
18px
Weight :
700 / 400
Line height :
24px
Large Button, Link, Sub heading
Body 1
Size :
16px
Weight :
700 / 400
Line height :
22px
Small Button, Link, Body copy, textfield
Body 2
Size :
14px
Weight :
700 / 400
Line height :
20px
Caption, Helper, label on textfield.
Body 3
Size :
12px
Weight :
600
Line height :
16px
Label only
Small
Size :
10px
Weight :
700 / 400
Line height :
14px
Paragraph
Extra Small
Responsive breakpoint
These breakpoints describe column and width specifications for different screen size.
Screen size
Margin
Container
Column
Gutter
Mobile (320-839)
XSmall
320-399
20
Fluid
12
8
Small
400-599
20
Fluid
12
12
Medium
600-839
40
Fluid
12
16
Desktop (840-1440+)
Large
840-959
Fluid
760
12
16
XLarge
960-1279
100
Fluid
12
16
XXLarge
1280-1439
120
Fluid
12
20
XXXLarge
1440+
Fluid
1200
12
24