This is Cedar’s legacy site. Information may be outdated.
Go to Cedar's new documentation site for the latest features and support.

  • Foundation/

Typography

# Guidelines

# Typefaces

Cedar supports two primary brand typefaces: Stuart and Graphik. Each play a specific role in our typographic system. While Graphik is available to consumers outside the co-op, Stuart is licensed and proprietary to REI.

# Stuart

Designed exclusively for the co-op, Stuart was influenced by the U.S. National Park Service signage. Modeled after Plantin, Stuart embraces the same softness in both structure and finish and its warm character balances well with the clean simplicity of Graphik.

Four text examples showing the Stuart font in various sizes and colors.

# Features

Accessibility was front-of-mind during the development of Stuart. Accessible typefaces are inherently optimized for mobile usage.

The Stuart font's open terminals, optimal x-height, optimal stroke width, ligatures, and co-op diamond.

# Graphik

Graphik is a sans-serif typeface designed by Christian Schwartz and released through Commercial Type in 2009. Inspired by the lesser known grotesques and geometric sans-serifs, Graphik’s lower stroke contrast and a generous x-height lend it great versatility. Graphik is used for high-function or less-expressive moments.

Four text examples showing the Graphik font in various sizes and colors.

# Type Scale

The typographic scale manages the font sizes used within Cedar. All type styles are derived from this scale.

The range of sizes available for headings from largest to smallest.

# Font Families

Cedar typography references two distinct font stacks: a serif and a sans-serif. Our default display preference always prioritizes Stuart and Graphik. Local fonts act as fallbacks should a brand font fail to load.

Serif

font-family: Stuart, Georgia, serif

Sans-serif

font-family: Graphik, 'Helvetica Neue', sans-serif

# Fallbacks

If everything goes right, REI Stuart will load. If it doesn’t, the serif font displayed on Apple and Microsoft platforms will be Georgia. At the same time, Android devices will display Noto Serif and Linux devices will display Liberation Serif.

It’s a similar story for sans-serif fonts. Graphik will display if there are no hiccups. If it fails to load, Apple devices will display Helvetica Neue while Microsoft platforms will display Arial. Android devices will display Roboto and Linux devices will display Liberation Sans.

# Supported Languages

Both Stuart and Graphik support the standard Western European languages.

Coverage:

  • Italian, Spanish, Portuguese, French, German, Dutch, English, Danish, Swedish, Norwegian, and Icelandic

# Resources

The distribution of brand fonts are managed through REI’s Self Service application.

# Type Guidelines

# Size

Font size selection directly impacts both readability and comprehension. Type styles are pre-optimized.

Three text examples displaying typographic hierarchy.

# Type Pairing

To create the appropriate contrast and hierarchy, use a mix of Stuart and Graphik—the latter typically plays a supporting role.

Mixed usage of Stuart and Graphik typefaces, with Stuart used in the header and Graphic in the subhead and body copy.

# Font Style

# Italics

Users with certain disabilities like dyslexia might have difficulty making out italicized words. Only use italics if necessary and never for critical user flows.

Italics used within part of a sentence.
Do use italics if necessary.
An entire sentence italicized.
Don't use italics if the copy is part of important user flows.

# Font Weight

From refined to playful, Stuart’s personality becomes increasingly casual as it gets heavier. While six weights are included in the Stuart family, medium is preferred for most situations.

Various Stuart font weights, highlighting Medium.

The Graphik family includes five weights. Preferred choices are: regular, medium, and semibold. Regular is appropriate for most applications.

Various Graphik font weights, highlighting Semibold, Medium, and Regular.

# Letter Spacing

Stuart and Graphik were both designed with looser tracking to improve readability at smaller sizes. In code-driven environments, tracking is known as letter spacing. To best support the widest range of sizes, the letter spacing of text styles have been pre-optimized.

Text boxes showing pre-optimized letter spacing for Stuart and Graphik.

# Alignment

For optimum legibility, it’s important to establish a strong vertical alignment. All text should be left-aligned whenever possible. Some exceptions include single words and short headlines. Never left and right justify text.

Left aligned headline and subhead.
Do left align text.
Center aligned long headline.
Don't center align long headlines.
Left aligned text above images.
Do left align text to other elements on the page.
Center aligned headline above icons.
Take Caution center aligning short headlines.

# Line Length

An optimal length, or measure, of a line of copy is 50 to 60 characters. Line lengths more than 80 characters are discouraged.

Two examples of text highlighting how long a line of copy should be on mobile and desktop.
Appropriate line length on mobile is highlighted.
Do reduce font sizes for mobile so that they are the optimal line length.
A short line length is highlighted because font size is too big on mobile.
Don't use the same font size across all device sizes. This will create incorrect line lengths on certain devices.
Proper line length is highlighted on desktop.
Do use line lengths of 50-60 characters.
An incorrect line length over 80 characters is highlighted on desktop.
Take Caution create line lengths of 80 characters or more.

# 1.4.8 Visual Presentation (AAA)

For people with certain reading of vision disabilities, long lines of text can become a significant barrier. They have trouble keeping their place and following the flow of text. Having a narrow block of text makes it easier for them to continue on to the next line in a block. Lines of copy should not exceed 80 characters or glyphs.