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.

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.

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.

Do

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

Don't

Do not center-align page titles.

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

Display One

Use for primary headings and Page Titles.

Display Two

Use for secondary headings and Page Titles.

Display Three

Use for third-level headings.

Display Four

Use for fourth-level headings.

Display Five

Use for fifth-level headings.

Display Six

Use for sixth-level headings.

Display Seven

Use for seventh-level headings.

Body Text

Body One

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

Body Two

Use for all paragraph and non-heading text.

Body Three

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

Body Four

Use for legal or de-emphasized text.