Typography

Typography is fundamental to our Rocket experiences. We use a custom developed typeface called Rocket Sans.

Our guidelines optimize content hierarchy by using text sizes, line heights, colors, and font. These factors contribute to what makes content clear and appealing.

Combine these header and body styles to establish content hierarchy within your project.

Rocket Sans, created by Monotype in 2018. Our proprietary typeface, Rocket Sans, is crisp, expressive, bold and confident. It's modern, aligned to our brand ethos and approachable, without sacrificing legibility and scalability. We use this custom built typeface for all of our brand expressions.

Size Reference Charts

Our typography has 7 display styles, 3 body copy styles, and 1 legal type size. The size reference chart is an example of typography when designing. However, when developing a page, reference the Storybook components below.

Desktop

Scale CategoryWeightSizeLine Height
H1Bold54px60px
H2Bold40px48px
H3Light34px44px
H4Bold26px32px
H5Bold20px26px
H6Light20px24px
H7Bold16px20px
B1Medium16px24px
B2Light16px24px
B3Light14px20px
LegalLight13px20px

Mobile

Scale CategoryWeightSizeLine Height
H1Bold40px44px
H2Bold32px36px
H3Light28px36px
H4Bold24px32px
H5Bold20px26px
H6Light20px24px
H7Bold16px22px
B1Medium16px24px
B2Light16px24px
B3Light14px20px
LegalLight13px20px

Headers

Page Title

Use one Page Title per page to serve as the main heading. They differentiate themselves from other headings with their red accent line.

Use Page Title with Display One to style primary headings on top-level pages in your experience.

Use Page Title with Display Two to style primary headings on nested pages in your experience.

Developer Documentation

See the code and developer guidelines for this component.

Do
A page layout featuring a primary and secondary heading. Each headline is left-aligned.

Use page titles at the top left of the page, and left-align the headline with the red line.

Don't
A page layout featuring a primary and secondary heading. The primary heading is center-aligned.

Do not center-align page titles.

A page layout featuring two primary headings.

To maintain content hierarchy, do not use multiple page titles on one page.

Display One

Use for primary headings and Page Titles.

Developer Documentation

See the code and developer guidelines for this component.

Display Two

Use for secondary headings and Page Titles.

Developer Documentation

See the code and developer guidelines for this component.

Display Three

Use for third-level headings.

Developer Documentation

See the code and developer guidelines for this component.

Display Four

Use for fourth-level headings.

Developer Documentation

See the code and developer guidelines for this component.

Display Five

Use for fifth-level headings.

Developer Documentation

See the code and developer guidelines for this component.

Display Six

Use for sixth-level headings.

Developer Documentation

See the code and developer guidelines for this component.

Display Seven

Use for seventh-level headings.

Developer Documentation

See the code and developer guidelines for this component.

Body Text

Body One

Use to emphasize text within paragraphs and for sub-labels.

Developer Documentation

See the code and developer guidelines for this component.

Body Two

Use for all paragraph and non-heading text.

Developer Documentation

See the code and developer guidelines for this component.

Body Three

Use for very long sections of text. It has a larger line height which assists with readability.

Developer Documentation

See the code and developer guidelines for this component.

Body Four

Use for legal or de-emphasized text.

Developer Documentation

See the code and developer guidelines for this component.