text

The CdrText component is a simple wrapper for text elements that applies default type styles. It establishes vertical spacing and optimizes the reading experience.

Apply type styling by using the design tokens and a custom CSS class. For information about how and when to use heading, subheading, body, utility, eyebrow styles and tokens, visit our typography guidelines and tokens articles.

For easy implementation, use the the fluid text preset components. These components share the <CdrText> API, but extend it, allowing you to select scale and weight where applicable.

When using the presets, it's not necessary to write media queries to change font-size across viewport sizes. The fluid computation will automatically adjust the size for the given viewport.

Further, when placed within a CSS container, the presets will respond to the width of the container rather than viewport.

Fluid accessibility considerations

Be mindful of zoom levels when using fluid presets in smaller constrained containers. Because presets use the CSS clamp() function, it's possible to prevent text from scaling to 200% of its original size, which is a violation of WCAG under 1.4.4 Resize text (AA). Ensure your containers will scale with zoom levels as well to help address the issue.

What Cedar provides

• Defines semantic heading levels with the ability to assign predefined visual heading styles to each level
• Within paragraphs, line spacing is at least 1.5 times font height

Development responsibilities

When using this component, here's what you are responsible for:

• Use h1-h6 to identify headings (<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>)
• Headings are used to label page regions. Use the aria-label attribute to associate headings with their page region
• Subheadings are not semantic headings. While you can visually style subheadings as a heading, they will not be navigable using a screen reader
• Assistive technologies skim the structure of a page. Allow users to navigate to or skip over sections via heading levels
• Avoid skipping heading levels (e.g., <h2> to <h4>)
• Ensure the text container does not exceed 634px or line length does not exceed more than 75 characters
• Minimize use of reversed-out body copy (light copy on a dark background) because it’s harder to read
• When possible, use the first sentence as an introduction to the paragraph. With screen readers, users can listen to the first sentence and then jump to the next paragraph
• Break long pages into shorter sections by organizing content into well-defined groups or chunks

You can apply typography in one of two ways:

1. Apply tokens using CSS properties. You will not need to use cdr-text component using this method. To implement, refer to the complete list of text tokens
2. Use the CdrText component to create a container and apply text tokens.

Styling

The CdrText component allows for styling any HTML element with available text styles. Visual style and semantic meaning are managed independently by providing:

• A tag property to control which type of element is rendered
• Ability to apply styling with a custom CSS class and a text mixin

This method decouples the semantic meaning of a heading level from the visual representation. This way, you can style other markup to look like a heading, even if semantically it isn’t a heading.

When creating page headers, apply the correct semantic tag.

<template>
  <cdr-text tag="h1" class="custom-heading-class">
    A navigable semantic heading
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens.scss';
  .custom-heading-class {
    @include cdr-text-heading-700;
    @include cdr-sm-mq {
      <!-- `cdr-sm-mq` mixin applies styling at small breakpoint and above -->
      @include cdr-text-heading-800;
    }
  }
</style>

You don’t always need to pair heading styles with heading tags. Heading tags should be used for accessibility purposes to describe the page hierarchy.

<template>
  <cdr-text class="custom-heading-class">
    Text styled as a heading for display only
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens.scss';
  .custom-heading-class {
    @include cdr-text-heading-700;
    @include cdr-sm-mq {
      <!-- `cdr-sm-mq` mixin applies styling at small breakpoint and above -->
      @include cdr-text-heading-800;
    }
  }
</style>

Extend CdrText components with other Cedar or custom classes.

<template>
  <cdr-text class="custom-body-class">
    This paragraph is adding a bottom margin to provide space between it and the paragraph below
  </cdr-text>
</template>
<style>
  @import '~@rei/cdr-tokens/dist/rei-dot-com/scss/cdr-tokens.scss';
  .custom-body-class {
    @include cdr-text-body-300;
    margin-bottom: $cdr-space-one-x;
  }
</style>