Typography
Font
Helvetica Neue should be used for all websites as the primary font. All headings should be in bold.
Body text can be both regular weighting or bold where appropriate.
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Desktop headings
This typescale is used for all screens larger than 768 pixels.
H1
Font size 46px | bold | line height 56px
H2
Font size 32px | bold | line height 40px
H3
Font size 24px | bold | line height 28px
H4
Font size 18px | bold | line height 20px
Mobile headings
This typescale is used for all screens less than 768 pixels.
H1
Font size 32px | bold | line height 40px
H2
Font size 24px | bold | line height 32px
H3
Font size 20px | bold | line height 28px
H4
Font size 18px | bold | line height 24px
Desktop paragraph
This typescale is used for all screens larger than 768 pixels.
Paragraph XL
Font size 38px | regular | line height 56px
Paragraph lg
Font size 22px | regular | line height 32px
Paragraph md
Font size 18px | regular | line height 28px
paragraph sm
Font size 16px | regular | line height 20px
Mobile paragraph
This typescale is used for all screens less than 768 pixels.
Paragraph XL
Font size 28px | regular | line height 32px
Paragraph lg
Font size 18px | regular | line height 28px
Paragraph md
Font size 16px | regular | line height 24px
paragraph sm
Font size 16px | regular | line height 20px