Typography

Our typography is crucial to creating easy to follow and consume content.

Fonts

Roc Grotesk

Roc Grotesk example

This font is used for Headings, buttons and navigation.

Download

Proxima Nova

Proxima Nova example

This font is used for body copy.

Download

Breakpoints

XXL - 1440px and above

Heading 1

Roc Grotesk, Bold | Size 64px (48pt) | Line height 72px (54pt)

Heading 2

Roc Grotesk, Bold | Size 48px (36pt) | Line height 72px (54pt)

Heading 3

Roc Grotesk, Medium | Size 32px (24pt) | Line height 48px (36pt)

Heading 4

Roc Grotesk, Medium | Size 24px (18pt) | Line height 36px (27pt)

Heading 5

Roc Grotesk, Medium | Size 18px (13.5pt) | Line height 27px (20.25pt)

Subtitle

Roc Grotesk, Regular | 30% letter spacing | Size 16px (12pt) | Line height 24px (18pt)

This is an example of body text.

Proxima Nova, Regular | Size 18px (13.5pt) | Line height 27px (20.25pt)

This is an example of legal text.

Proxima Nova, Regular | Size 16px (12pt) | Line height 24px (18pt)

XL - 1200px-1439px

Heading 1

Roc Grotesk, Bold | Size 64px (48pt) | Line height 72px (54pt)

Heading 2

Roc Grotesk, Bold | Size 48px (36pt) | Line height 72px (54pt)

Heading 3

Roc Grotesk, Medium | Size 32px (24pt) | Line height 48px (36pt)

Heading 4

Roc Grotesk, Medium | Size 24px (18pt) | Line height 36px (27pt)

Heading 5

Roc Grotesk, Medium | Size 18px (13.5pt) | Line height 27px (20.25pt)

Subtitle

Roc Grotesk, Regular | 30% letter spacing | Size 16px (12pt) | Line height 24px (18pt)

This is an example of body text.

Proxima Nova, Regular | Size 18px (13.5pt) | Line height 27px (20.25pt)

This is an example of legal text.

Proxima Nova, Regular | Size 16px (12pt) | Line height 24px (18pt)

L - 1024px-1199px

Heading 1

Roc Grotesk, Bold | Size 64px (48pt) | Line height 72px (54pt)

Heading 2

Roc Grotesk, Bold | Size 48px (36pt) | Line height 72px (54pt)

Heading 3

Roc Grotesk, Medium | Size 32px (24pt) | Line height 48px (36pt)

Heading 4

Roc Grotesk, Medium | Size 24px (18pt) | Line height 36px (27pt)

Heading 5

Roc Grotesk, Medium | Size 18px (13.5pt) | Line height 27px (20.25pt)

Subtitle

Roc Grotesk, Regular | 30% letter spacing | Size 16px (12pt) | Line height 24px (18pt)

This is an example of body text.

Proxima Nova, Regular | Size 18px (13.5pt) | Line height 27px (20.25pt)

This is an example of legal text.

Proxima Nova, Regular | Size 16px (12pt) | Line height 24px (18pt)

M - 640px-1023px

Heading 1

Roc Grotesk, Bold | Size 32px (24pt) | Line height 48px (36pt)

Heading 2

Roc Grotesk, Bold | Size 24px (36pt) | Line height 36px (54pt)

Heading 3

Roc Grotesk, Medium | Size 18px (24pt) | Line height 27px (36pt)

Heading 4

Roc Grotesk, Medium | Size 18px (13.5pt) | Line height 27px (20.25pt)

Heading 5

Roc Grotesk, Medium | Size 16px (13.5pt) | Line height 24px (20.25pt)

Subtitle

Roc Grotesk, Regular | 30% letter spacing | Size 14px (12pt) | Line height 21px (18pt)

This is an example of body text.

Proxima Nova, Regular | Size 16px (13.5pt) | Line height 24px (20.25pt)

This is an example of legal text.

Proxima Nova, Regular | Size 14px (10.5pt) | Line height 21px (15.75pt)

S - up to 639px

Heading 1

Roc Grotesk, Bold | Size 32px (24pt) | Line height 48px (36pt)

Heading 2

Roc Grotesk, Bold | Size 24px (36pt) | Line height 36px (54pt)

Heading 3

Roc Grotesk, Medium | Size 18px (24pt) | Line height 27px (36pt)

Heading 4

Roc Grotesk, Medium | Size 18px (13.5pt) | Line height 27px (20.25pt)

Heading 5

Roc Grotesk, Medium | Size 16px (13.5pt) | Line height 24px (20.25pt)

Subtitle

Roc Grotesk, Regular | 30% letter spacing | Size 14px (12pt) | Line height 21px (18pt)

This is an example of body text.

Proxima Nova, Regular | Size 16px (13.5pt) | Line height 24px (20.25pt)

This is an example of legal text.

Proxima Nova, Regular | Size 14px (10.5pt) | Line height 21px (15.75pt)