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.
Body
Using a more open line height to font size ratio, body typography is best suited for long-form content.
Utility
Utility type styles are used sparingly within UI elements such as form labels and Call-to-Action text.