Typography

Type Families

Sentinel

Sentinel is REI’s first choice for headlines and body copy, as well as anywhere you need an editorial voice.

Sentinel is given the alias of spruce in design tokens. By not specifying the typeface in the token, we’re able to respond to changes in the brand identity with minimal impact to the code.

Roboto

Roboto shines when you want a simple, straightforward typeface that doesn’t get in the way. It’s used liberally in the digital space as REI’s chosen font for informational or supplemental-level copy.

Roboto is given the alias of redwood in design tokens.

Roboto Condensed

Roboto Condensed is used in special circumstances where size constraints exist or visual differentiation is needed. Examples of its use can be found in form labels and the Call to Action text.

Roboto Condensed is given the alias of maple in design tokens.


Type Scale

The type scale powers all the typography within Cedar components. These preset options are the best way to reinforce visual hierarchy and consistency across pages. Use the styles standalone too—all the options below are also available in the Sketch Toolkit to make your design decisions easier.

Display Sizes

The line height to font size ratio is catered to an overall shorter line length and is best used for big moments, headings, titles, or subheadings. Avoid using display sizes for long-form content.

spruce-display-00
font-weight: 600
font-size: 14
line-height: 20
spruce-display-10
font-weight: 600
font-size: 16
line-height: 24
spruce-display-20
font-weight: 600
font-size: 18
line-height: 24
spruce-display-30
font-weight: 600
font-size: 20
line-height: 28
spruce-display-40
font-weight: 600
font-size: 24
line-height: 32
spruce-display-50
font-weight: 600
font-size: 28
line-height: 36
spruce-display-60
font-weight: 600
font-size: 32
line-height: 40
spruce-display-70
font-weight: 600
font-size: 40
line-height: 48
spruce-display-80
font-weight: 600
font-size: 56
line-height: 60
spruce-display-90
font-weight: 600
font-size: 76
line-height: 84
spruce-display-100
font-weight: 600
font-size: 96
line-height: 104

redwood-display-10
font-weight: 400
font-size: 12
line-height: 16
redwood-display-20
font-weight: 400
font-size: 14
line-height: 20
redwood-display-30
font-weight: 400
font-size: 16
line-height: 24
redwood-display-40
font-weight: 400
font-size: 18
line-height: 24
redwood-display-50
font-weight: 400
font-size: 20
line-height: 28
redwood-display-60
font-weight: 400
font-size: 24
line-height: 32
redwood-display-70
font-weight: 400
font-size: 28
line-height: 36

Body

Using a more open line height to font size ratio, body typography is best suited for long-form content.

spruce-body-20
font-weight: 400
font-size: 18
line-height: 28
spruce-body-30
font-weight: 400
font-size: 20
line-height: 32

redwood-body-10
font-weight: 400
font-size: 14
line-height: 24
redwood-body-20
font-weight: 400
font-size: 16
line-height: 26
redwood-body-30
font-weight: 400
font-size: 18
line-height: 28
redwood-body-40
font-weight: 400
font-size: 20
line-height: 32

Utility

Utility type styles are used sparingly within UI elements such as form labels and Call-to-Action text.

maple-utility-10
font-weight: 400
font-size: 12
line-height: 16
maple-utility-20
font-weight: 400
font-size: 14
line-height: 20
maple-utility-30
font-weight: 400
font-size: 16
line-height: 24
maple-utility-40
font-weight: 400
font-size: 18
line-height: 24
maple-utility-50
font-weight: 400
font-size: 20
line-height: 28
maple-utility-60
font-weight: 400
font-size: 24
line-height: 32
maple-utility-70
font-weight: 400
font-size: 28
line-height: 36