Typography

Typography design tokens represent the fundamental decisions of Cedar’s visual language:

Stores font specifications using variable names, not hard-coded values such as font family name or pixel values for font size
Specifies a hierarchical and semantically defined system

Web

Default

A different kind of company

cdr-text-default-compact (Mixin)
Suggested usage: Use only for compact spacing with informational and supplemental body content

cdr-text-default-compact-family	Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-default-compact-style	Normal
cdr-text-default-compact-weight	400
cdr-text-default-compact-spacing	Normal
cdr-text-default-compact-size	14px
cdr-text-default-compact-height	24px

A different kind of company

cdr-text-default (Mixin)
Suggested usage: Default for body content. Uses a more open line height to font size ratio

cdr-text-default-family	Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-default-style	Normal
cdr-text-default-weight	400
cdr-text-default-spacing	Normal
cdr-text-default-size	16px
cdr-text-default-height	26px

Editorial

A different kind of company

cdr-text-editorial-compact (Mixin)
Suggested Usage: Use only for compact spacing with editorial body content

cdr-text-editorial-compact-family	Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-editorial-compact-style	Normal
cdr-text-editorial-compact-weight	400
cdr-text-editorial-compact-spacing	Normal
cdr-text-editorial-compact-size	18px
cdr-text-editorial-compact-height	28px

A different kind of company

cdr-text-editorial (Mixin)
Suggested Usage: Default for editorial long-form content. Uses a more open line height to font size ratio

cdr-text-editorial-family	Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-editorial-style	Normal
cdr-text-editorial-weight	400
cdr-text-editorial-spacing	Normal
cdr-text-editorial-size	20px
cdr-text-editorial-height	32px

Headings

A different kind of company

cdr-text-header-1 (Mixin)

cdr-text-header-1-family	Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-1-style	Normal
cdr-text-header-1-weight	600
cdr-text-header-1-spacing	0.2
cdr-text-header-1-size	56px
cdr-text-header-1-height	60px

A different kind of company

cdr-text-header-2 (Mixin)

cdr-text-header-2-family	Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-2-style	Normal
cdr-text-header-2-weight	600
cdr-text-header-2-spacing	0.2
cdr-text-header-2-size	40px
cdr-text-header-2-height	48px

A different kind of company

cdr-text-header-3 (Mixin)

cdr-text-header-3-family	Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-3-style	Normal
cdr-text-header-3-weight	600
cdr-text-header-3-spacing	0.2
cdr-text-header-3-size	32px
cdr-text-header-3-height	40px

A different kind of company

cdr-text-header-4 (Mixin)

cdr-text-header-4-family	Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-4-style	Normal
cdr-text-header-4-weight	600
cdr-text-header-4-spacing	0.2
cdr-text-header-4-size	28px
cdr-text-header-4-height	36px

A different kind of company

cdr-text-header-5 (Mixin)

cdr-text-header-5-family	Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-5-style	Normal
cdr-text-header-5-weight	600
cdr-text-header-5-spacing	0.2
cdr-text-header-5-size	24px
cdr-text-header-5-height	32px

A different kind of company

cdr-text-header-6 (Mixin)

cdr-text-header-6-family	Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-6-style	Normal
cdr-text-header-6-weight	600
cdr-text-header-6-spacing	0.2
cdr-text-header-6-size	20px
cdr-text-header-6-height	28px

A different kind of company

cdr-text-header-7 (Mixin)

cdr-text-header-7-family	Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-7-style	Normal
cdr-text-header-7-weight	600
cdr-text-header-7-spacing	0.2
cdr-text-header-7-size	18px
cdr-text-header-7-height	24px

Mobile

Headings

A different kind of company

Android: Display 1
iOS: Large Title
Suggested Usage: Frequently used as the largest title for phone apps and can be used for page titles for larger devices

font-family	Roboto
font-weight	Medium
font-size	34sp
font-height	40sp

A different kind of company

Android and iOS: Title 1
Suggested Usage: Content titles, level 1

font-family	Sentinel
font-weight	Semi Bold
font-size	28sp
line-height	36sp

A different kind of company

Android and iOS: Title 2
Suggested Usage: Content titles, product names, level 2

font-family	Sentinel
font-weight	Semi Bold
font-size	26sp
line-height	32sp

A different kind of company

Android and iOS: Title 3
Suggested Usage: Content titles, product names, product prices, level 3

font-family	Sentinel
font-weight	Semi Bold
font-size	21sp
line-height	28sp

A different kind of company

Android and iOS: Headline
Suggested Usage: Heading primarily used with body copy, list items, table headers

font-family	Roboto
font-weight	Medium
font-size	17sp
line-height	24sp

A different kind of company

Android and iOS: Subhead
Suggested Usage: Subheading primarily used with body copy

font-family	Roboto
font-weight	Medium
font-size	15sp
line-height	20sp

Body

A different kind of company

Android: Body 2
iOS: Footnote
Suggested Usage: Secondary text intended for informational and supplemental body content

font-family	Roboto
font-weight	Regular
font-size	13sp
line-height	20sp

A different kind of company

Android: Body 1
iOS: Body
Suggested Usage: Default for body content

font-family	Roboto
font-weight	Regular
font-size	15sp
line-height	20sp

A different kind of company

Android and iOS: Caption 2
Suggested Usage: Smallest text size, use sparingly or for bottom tab bar text

font-family	Roboto
font-weight	Regular
font-size	11sp
line-height	16sp

A different kind of company

Android and iOS: Caption 1
Suggested Usage: Tertiary text, also intended for informational and supplemental body content. Also used for bottom action bar text for larger devices

font-family	Roboto
font-weight	Regular
font-size	12sp
line-height	16sp

Buttons

A different kind of company

Android: Button
iOS: N/A
Suggested Usage: Button text has a thicker weight than body copy

font-family	Roboto
font-weight	Medium
font-size	15sp
line-height	24sp

Links

A different kind of company

Android: Button_accent
iOS: N/A
Suggested Usage: Link text has a thicker weight than body copy. Use #3278ae only on light background

font-family	Roboto
font-weight	Medium
font-size	15sp
line-height	24sp
color	#3278ae

A different kind of company

Android: Button_accent
iOS: N/A
Suggested Usage: Link text has a thicker weight than body copy. Use #5197cd only on dark background

font-family	Roboto
font-weight	Medium
font-size	15sp
line-height	24sp
color	#5197cd

Message States

A different kind of company

Android: Error State
iOS: N/A
Suggested Usage: Only for message text with error or warning states. Use #c32a2e only on light background

font-family	Roboto
font-weight	Medium
font-size	15sp
line-height	20sp
color	#c32a2e

A different kind of company

Android: Error State
iOS: N/A
Suggested Usage: Only for message text with error or warning states. Use #e86868 only on dark background

font-family	Roboto
font-weight	Medium
font-size	15sp
line-height	20sp
color	#e86868

Type Families

Cedar design system uses a limited number of tokens for typography to define core styles. By using tokens, Cedar can respond to changes in the brand identity with minimal impact to the code.

Cedar has defined typography specifications and values based on REI's brand guidelines:

Use these values with caution; type specifications could change
The design systems team is tracking how options are used in components
List of typography values are available on the Brand Typography tab

Sentinel

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

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 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.

Type Scale

Body: Uses a more open line height to font size ratio and is best suited for long-form content
Display: Line height to font size ratio is more condensed than body type specifications and caters to an overall shorter line length. It is best used for big moments, headings, titles, or subheadings. Avoid using display sizes for long-form content
Utility: Use sparingly within UI elements for Cedar components such as form labels and Call-to-Action text

These values should not be used standalone to create custom UI.

Typography from REI’s brand guidelines are used throughout Cedar components and design recommendations.

Use these values when:

Requesting an update to an existing Cedar component
Requesting a new token
Developing a new component that will be adopted by Cedar Design System
Creating a custom or product-specific solution that will not be reused

Don't use these values when:

Creating a broad solution that can be shared across teams. Instead, develop a new component or utility
Wanting the benefit of dynamically-updated styles when there are changes in the brand guidelines. Instead, use tokens
Typography values are repeated throughout the page. Instead, request a new token

Note that the values on this page:

May not have a long lifespan
May alter the value more frequently
May be used for a wide variety of purposes

Requesting a Token
If you have a request for a token that is missing, you can submit a request using the Feature Request Form, or ask in the #cedar-user-support Slack channel. View requirements in the Adding Tokens to the Repository section on the Tokens article.

Developing or Updating Cedar Components
The Cedar team welcomes contributions from the digital community at REI. If you are interested in contributing design or code, please reach out at in Slack at #cedar-user-support, email cedar@rei.com, or talk to your manager.

The type scale powers all the typography within Cedar components. These preset values are the best way to reinforce visual hierarchy and consistency across pages.

Body

Uses a more open line height to font size ratio:

Best suited for long-form content
Specifications are available for default (Roboto or sans type styles) and editorial (Sentinel or serif type styles)

Default

A different kind of company

font-family: Roboto
font-weight: 400
font-size: 14
line-height: 24

Tokens:
cdr-text-default-compact

A different kind of company

font-family: Roboto
font-weight: 400
font-size: 16
line-height: 26

Tokens:
cdr-text-default

A different kind of company

font-family: Roboto
font-weight: 400
font-size: 18
line-height: 28

Tokens:
N/A

A different kind of company

font-family: Roboto
font-weight: 400
font-size: 20
line-height: 32

Tokens:
N/A

Editorial

A different kind of company

font-family: Sentinel
font-weight: 400
font-size: 16
line-height: 26

Tokens:
N/A

A different kind of company

font-family: Sentinel
font-weight: 400
font-size: 18
line-height: 28

Tokens:
cdr-text-editorial-compact

A different kind of company

font-family: Sentinel
font-weight: 400
font-size: 20
line-height: 32

Tokens:
cdr-text-editorial

A different kind of company

font-family: Sentinel
font-weight: 400
font-size: 24
line-height: 36

Tokens:
N/A

Display

Line height to font size ratio is more condensed than body type specifications and caters catered to an overall shorter line length:

Best used for big moments, headings, titles, or subheadings
Specifications are available for default (Roboto or sans type styles) and editorial (Sentinel or serif type styles)
Avoid using display sizes for long-form content

Default

A different kind of company

font-family: Roboto
font-weight: 400
font-size: 12
line-height: 16

Tokens:
N/A

A different kind of company

font-family: Roboto
font-weight: 400
font-size: 14
line-height: 20

Tokens:
N/A

A different kind of company

font-family: Roboto
font-weight: 400
font-size: 16
line-height: 24

Tokens:
N/A

A different kind of company

font-family: Roboto
font-weight: 400
font-size: 18
line-height: 24

Tokens:
N/A

A different kind of company

font-family: Roboto
font-weight: 400
font-size: 20
line-height: 28

Tokens:
N/A

A different kind of company

font-family: Roboto
font-weight: 400
font-size: 24
line-height: 32

Tokens:
N/A

A different kind of company

font-family: Roboto
font-weight: 400
font-size: 28
line-height: 36

Tokens:
N/A

Editorial

A different kind of company

font-family: Sentinel
font-weight: 600
font-size: 14
line-height: 20

Tokens:
N/A

A different kind of company

font-family: Sentinel
font-weight: 600
font-size: 16
line-height: 24

Tokens:
N/A

A different kind of company

font-family: Sentinel
font-weight: 600
font-size: 18
line-height: 24

Tokens:
cdr-text-header-7

A different kind of company

font-family: Sentinel
font-weight: 600
font-size: 20
line-height: 28

Tokens:
cdr-text-header-6

A different kind of company

font-family: Sentinel
font-weight: 600
font-size: 24
line-height: 32

Tokens:
cdr-text-header-5

A different kind of company

font-family: Sentinel
font-weight: 600
font-size: 28
line-height: 36

Tokens:
cdr-text-header-4

A different kind of company

font-family: Sentinel
font-weight: 600
font-size: 32
line-height: 40

Tokens:
cdr-text-header-3

A different kind of company

font-family: Sentinel
font-weight: 600
font-size: 40
line-height: 48

Tokens:
cdr-text-header-2

A different kind of company

font-family: Sentinel
font-weight: 600
font-size: 56
line-height: 60

Tokens:
cdr-text-header-1

A different kind of company

font-family: Sentinel
font-weight: 600
font-size: 76
line-height: 84

Tokens:
N/A

A different kind of company

font-family: Sentinel
font-weight: 600
font-size: 96
line-height: 104

Tokens:
N/A

Utility

Used sparingly within UI elements, currently used by Cedar components for:

Form labels
Call-to-Action text

A different kind of company

font-family: Roboto Condensed
font-weight: 400
font-size: 12
line-height: 16

Tokens:
N/A

A different kind of company

font-family: Roboto Condensed
font-weight: 400
font-size: 14
line-height: 20

Tokens:
N/A

A different kind of company

font-family: Roboto Condensed
font-weight: 400
font-size: 16
line-height: 24

Tokens:
N/A

A different kind of company

font-family: Roboto Condensed
font-weight: 400
font-size: 18
line-height: 24

Tokens:
N/A

A different kind of company

font-family: Roboto Condensed
font-weight: 400
font-size: 20
line-height: 28

Tokens:
N/A

A different kind of company

font-family: Roboto Condensed
font-weight: 400
font-size: 24
line-height: 32

Tokens:
N/A

A different kind of company

font-family: Roboto Condensed
font-weight: 400
font-size: 28
line-height: 36

Tokens:
N/A

# Web

# Default

# Editorial

# Headings

# Mobile

# Headings

# Body

# Buttons

# Links

# Message States

Web

Default

Editorial

Headings

Mobile

Headings

Body

Buttons

Links

Message States