Typography

Typeface

Costco Sans is our typeface for web.

Fallbacks

font-family: "Costco Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

Text Styles

There are three types of text styles in the Pallet Design System: Titles, Labels, and Body. Each style contains variants of different text sizes and line heights and are meant for different contexts. They use a typographic scale to create visual hierarchy on a page.

Each text style also comes in two different device sizes, one for small & medium devices and one for large devices. Small and medium device sizes are for web and app use while the large device size refers to web only. Small and medium device text styles tend to be sized smaller than large because they are used on screens with less real estate and users tend to hold these devices closer to their faces.

Titles

Titles should be used for page titles or subheadings. They are the largest of our text styles because they introduce content and express visual hierarchy. Titles come in four sizes, for use in different contexts:

• T1 is for page titles.
• T2 is for subheadings beneath page titles.
• T3 can be used for subsection headings or large titles within components, such as Modals and Drawers.
• T4 is for components that may show multiple titles, such as Accordions and Selector Radio Buttons.

Labels

Labels should be used for short, secondary information. They help categorize information and are used in navigation. Labels come in three sizes, for use in different contexts:

• L1 is for links, breadcrumbs, table labels, and static data.
• L2 is for form field labels, static labels, and badges.
• Mobile App L3 is only used in the mobile app for less-prioritized short content. It should be used sparingly.

Body

Use body text for long sentences and paragraphs of content. Body text is often shown after titles for detailed messaging. Body text styles have larger line heights than titles and labels to improve readability.

Body text comes in three sizes, for use in different contexts:

• B1 is for paragraphs of text and long-form content.
• B2 is for detailed messaging in limited spaces, such as accordion text or notification messages.
• B3 is used for help text found below form fields and for fine print. It should be used sparingly due to its small size.
• Bulleted lists should be written with body text and use 100% line height instead of 150%.
• Spacing between paragraphs should use 100% line height instead of 150%.

Why do we use text styles instead of heading tags for font sizes?

We use heading tags (i.e., h1, h2, etc.) as semantic headings. Semantic headings convey meaning and hierarchy in the HTML, which is important for users who rely on screen readers. Text styles visually convey font size and line height. See more about how to use semantic headings.

Letter Spacing

The text styles uses our font's default letter spacing. We do not recommend changing the letter spacing.

Formatting

Bold

Bold can be applied to emphasize text. Bold can also be used as a hover state for standalone links in a navigation menu, such as the Shop menu or Account’s left navigation on desktop.

Underline

Solid underlined text is most often used as a hover state for standalone links. Do not use underlines to emphasize text. Dashed underlined text should not be used.

Italics

Italics can be difficult to read so they are not recommended. Only use italics if necessary.

Line Length

It is best to limit text to a line length of 50 to 60 characters for optimal readability. Avoid line lengths that are longer than 80 characters.

Alignment

Left-Aligned

Most text, including paragraphs and bulleted lists, should be left-aligned. Page titles are also left-aligned on the web.

Center-Aligned

Center-aligned text is used more frequently on the mobile app than on the web. Page titles, sheet titles, and banners are center-aligned on the mobile app. Center-aligned text is most often used for button text in both web and mobile app.

Right-Aligned and Fully-Justified

Fully-justified and right-aligned text is rarely used and is discouraged.

Text Colors

Colors help to visually convey meaning and hierarchy. Hex values are found on the Colors page.

Accessibility

When thinking about typography and accessibility, there are two aspects to consider: semantic headings and color contrast.

Semantic Headings

Just as visual headings help sighted users to easily scan a page, semantic headings allow assistive technology users to quickly understand how a page is organized. 

Thus, it is vital to include semantic headings that are logical, hierarchical, and complete:

• Logical: Semantic headings should be purposefully used to convey structure. Text that is a semantic heading must always be meaningful to the user and should represent different sections of a page. Never use semantic headings for stylistic purposes.

• Hierarchical: Heading levels need to communicate the relationship between sections of content. An <h1> should describe the purpose of the overall page. Following that, headings should increment by 1 heading level to indicate nested content. Don’t skip headings (ex. An <h3> should not be immediately followed by an <h5>).

• Complete: A page’s heading structure should act as a complete outline of all content on the page. It is important that any text that visually resembles a heading is also marked up as a semantic heading.

Semantic Heading Example

<h1>Places I Have Visited</h1>
    <h2>California</h2>
        <h3>Los Angeles</h3>
        <h3>San Francisco</h3>
    <h2>Washington</h2>
        <h3>Seattle</h3>
        <h3>Olympia</h3>

Color Contrast

Providing good color contrast is essential as users with disabilities may have difficulty reading text with low contrast.

To conform to the WCAG 2.1 AA color contrast guidelines, text should have a minimum contrast ratio of 4.5. However, larger text (defined as at least 14 pt bolded or at least 18 pt normal weight) may have a minimum contrast of 3. Use the Costco Color Contrast grid to see possible color combinations and their corresponding contrast ratios.