Typography

Global typography settings, heading styles, font size and weight utilities, inline text elements, blockquotes, and lists for Chassis CSS.

Scoped tokens

HTML elements receive typographic styles automatically; class-based utilities cover sizes, weights, families, and context-specific presets. For text alignment, transformation, decoration, and truncation utilities, see the text utilities page.

Global settings

Body text defaults to the text font family at the medium size and medium line-height. Headings use the heading font family with size and line-height scaled per level from h1 down to h6. All of these defaults are driven by design tokens and can be overridden via CSS custom properties or Sass variables — see the Design Tokens page for details.

Headings

All six HTML heading elements are styled by default with size and line-height pairs sourced from typography design tokens.

h1. Chassis CSS

h2. Chassis CSS

h3. Chassis CSS

h4. Chassis CSS

h5. Chassis CSS

h6. Chassis CSS

<h1>h1. Chassis CSS</h1>
<h2>h2. Chassis CSS</h2>
<h3>h3. Chassis CSS</h3>
<h4>h4. Chassis CSS</h4>
<h5>h5. Chassis CSS</h5>
<h6>h6. Chassis CSS</h6>

Heading classes

Apply .h1 through .h6 to any element to match the visual style of the corresponding heading without changing the document outline.

h1. Chassis CSS

h2. Chassis CSS

h3. Chassis CSS

h4. Chassis CSS

h5. Chassis CSS

h6. Chassis CSS

<p class="h1">h1. Chassis CSS</p>
<p class="h2">h2. Chassis CSS</p>
<p class="h3">h3. Chassis CSS</p>
<p class="h4">h4. Chassis CSS</p>
<p class="h5">h5. Chassis CSS</p>
<p class="h6">h6. Chassis CSS</p>

Heading with subtext

Nest a  element with .fg-subtle inside a heading to render a secondary label at reduced prominence.

An example heading With faded secondary text

<h3>
  An example heading
  <small class="fg-subtle">With faded secondary text</small>
</h3>

<p class="font-5xlarge">.font-5xlarge</p>
<p class="font-4xlarge">.font-4xlarge</p>
<p class="font-3xlarge">.font-3xlarge</p>
<p class="font-2xlarge">.font-2xlarge</p>
<p class="font-xlarge">.font-xlarge</p>
<p class="font-large">.font-large</p>
<p class="font-medium">.font-medium</p>
<p class="font-small">.font-small</p>
<p class="font-xsmall">.font-xsmall</p>
<p class="font-2xsmall">.font-2xsmall</p>

Figma alignment: class names match the Figma text style names for the size scale, removing the translation step between design and code.
Design token sync: each size references a design token, so a token change propagates to every use automatically.
Paired line height: each class sets a matching line-height alongside font-size, removing the need for a separate line-height override when changing size.

Fluid sizes

Font size classes use clamp() for fluid scaling by default — each value transitions smoothly between a minimum and maximum as the viewport width changes, with no extra class required. See Fluid sizing for the toggle, configuration variables, and the Sass mixin API.

Responsive sizes

Responsive classes are a separate mechanism for cases where continuous fluid scaling doesn't satisfy the design — for example, when a layout requires a specific size locked to a specific breakpoint rather than a smooth transition between them. Enable responsive classes with $enable-responsive-font-sizes (off by default).

These classes follow a mobile-first approach: font-{size} sets the base (applied at all widths) and {breakpoint}:font-{size} overrides at a specific breakpoint and wider. Available breakpoints are small, medium, large, xlarge, and 2xlarge. Classes can be stacked for progressive scaling.

Progressively larger text

<p class="font-small medium:font-large large:font-2xlarge xlarge:font-4xlarge">
Progressively larger text
</p>

Font weight

Four weight utilities map to token-defined values, with names that match the Figma text style weight names.

Mass text.

Strong text.

Normal text.

Elegant text.

<p class="font-mass">Mass text.</p>
<p class="font-strong">Strong text.</p>
<p class="font-normal">Normal text.</p>
<p class="font-elegant">Elegant text.</p>

Chassis uses semantic weight names (mass, strong, normal, elegant) rather than conventional names like light, regular, or bold. Conventional names map inconsistently across font families and brand tokens. With semantic naming, strong may map to 600 for one brand or font and 700 for another.

Inline text elements

Common inline HTML5 elements receive default styles for semantic markup.

You can use the mark tag to highlight text.

This ~~example text~~ is meant to be treated as deleted.

This ~~example text~~ is meant to be treated as no longer accurate.

This example text is meant to be treated as an addition to the document.

This example text rendered as underlined.

This example text is meant to be treated as fine print.

This example text rendered as bold text.

This example text rendered as italic text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p>This <del>example text</del> is meant to be treated as deleted.</p>
<p>This <s>example text</s> is meant to be treated as no longer accurate.</p>
<p>This <ins>example text</ins> is meant to be treated as an addition to the document.</p>
<p>This <u>example text</u> rendered as underlined.</p>
<p>This <small>example text</small> is meant to be treated as fine print.</p>
<p>This <strong>example text</strong> rendered as bold text.</p>
<p>This <em>example text</em> rendered as italic text.</p>

Semantic usage

Elements and their intended roles:

: highlights text for reference or notation purposes.
: represents side-comments or fine print, such as legal text.
<del>: marks text that has been removed from the document.
<ins>: marks text that has been added to the document.
<s>: indicates text that is no longer relevant or accurate.
: denotes text with a non-textual annotation.

For purely stylistic purposes, the following classes apply the same visual treatment without the semantic element:

.text-mark: applies highlight styles matching .
.text-small: applies the reduced font size matching .
.text-decoration-underline: matches  styling.
.text-decoration-line-through: matches <s> styling.

Abbreviations

The <abbr> element exposes the expanded form on hover via its title attribute. Add .font-initials to render uppercase initials at a reduced font size.

attr

html

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="font-initials">html</abbr></p>

Blockquotes

Wrap quoted content in <blockquote class="blockquote"> to apply the blockquote typographic treatment.

A well-known quote, contained in a blockquote element.

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

Attribution

Wrap the <blockquote> in a <figure> and use <figcaption class="attribution"> to attribute the source. The .attribution class prepends an em dash automatically.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="attribution">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Alignment

Apply text alignment utilities to the wrapping <figure> to reposition the blockquote and its attribution together.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="attribution">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="attribution">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

Lists

Chassis adds two list modifier classes for common layout needs; nested lists are unaffected.

Bulletless

Remove default markers and left margin by adding .bulletless. The class applies only to immediate children, so nested lists retain their default appearance.

This is a list.
It appears completely unstyled.
Structurally, it's still a list.
However, this style only applies to immediate child elements.
Nested lists:
- are unaffected by this style
- will still show a bullet
- and have appropriate left margin
This may still come in handy in some situations.

<ul class="bulletless">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Inline

Display list items inline by adding .inline.

This is a list item.
And another one.
But they're displayed inline.

<ul class="inline">
  <li>This is a list item.</li>
  <li>And another one.</li>
  <li>But they're displayed inline.</li>
</ul>

Description lists

Align terms and descriptions horizontally using grid column classes. Add .text-truncate to truncate long terms with an ellipsis.

Description lists

A description list is perfect for defining terms.

Term

Definition for the term.

And some more placeholder definition text.

Another term

This definition is short, so no extra paragraphs or anything.

Truncated term is truncated

This can be useful when space is tight. Adds an ellipsis at the end.

Nesting

Nested definition list: I heard you like definition lists. Let me put a definition list inside your definition list.

<dl class="row">
  <dt class="small:col-3">Description lists</dt>
  <dd class="small:col-9">A description list is perfect for defining terms.</dd>

  <dt class="small:col-3">Term</dt>
  <dd class="small:col-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="small:col-3">Another term</dt>
  <dd class="small:col-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="small:col-3 text-truncate">Truncated term is truncated</dt>
  <dd class="small:col-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="small:col-3">Nesting</dt>
  <dd class="small:col-9">
    <dl class="row">
      <dt class="small:col-4">Nested definition list</dt>
      <dd class="small:col-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Font families

Chassis ships three font family classes — text, display, and code — each setting font-family on the element. The text family is the body default; the others opt specific elements into a different typeface.

Text font

.font-text is the body default and rarely needs to be applied explicitly. Use it to restore the text family on a child element when an ancestor has switched to a different family.

.font-text

<p class="font-text">.font-text</p>

Display font

Add .font-display to any element to switch to the display font family. All font size and weight utilities compose with it.

Display h1

Display h2

Display font-xlarge

Display font-mass

<p class="h1 font-display">Display h1</p>
<p class="font-display h2">Display h2</p>
<p class="font-display font-xlarge">Display font-xlarge</p>
<p class="font-display font-xlarge font-mass">Display font-mass</p>

Display font sizes and weights use dedicated tokens, separate from the text font scale. A display font's large or strong may map to a different numeric value than their .font-text equivalents, and line heights often differ to support the readability of display text.

Code font

Add .font-code to apply the branded monospace font family, suitable for code snippets and technical text. The code font has 3 sizes and 2 weights defined by dedicated design tokens, separate from the text font scale. Combine .font-code with font-{size} and font-{weight} utilities to set size and weight.

Large code font.

Medium code font.

Small code font.

Strong code font.

<p class="font-code font-large">Large code font.</p>
<p class="font-code">Medium code font.</p>
<p class="font-code font-small">Small code font.</p>
<p class="font-code font-strong">Strong code font.</p>

Code font sizes and weights use dedicated tokens, separate from the text font scale. A code font's large or strong may map to a different numeric value than their .font-text equivalents, and line heights often differ to support the readability of code snippets.

When only the font family needs to change and sizes should inherit from surrounding text, use .font-monospace instead. It switches font-family to the code font without applying any code-specific size, weight, or line-height tokens. Pairing it with weight utilities like font-strong may produce unexpected results if the code font does not have that weight registered.

Context font styles

Context font classes bundle font family, size, weight, line height, letter spacing, and text transforms into a single class. They map to specific Figma text style names via design tokens, making design-to-code handoff direct.

Jumbo

.font-jumbo targets large-scale headlines where maximum visual impact is needed.

This is jumbo text, which can be used for headlines.

<p class="font-jumbo">This is jumbo text, which can be used for headlines.</p>

Hero

.font-hero targets hero sections and prominent introductory text.

This is a hero text, which can be used in hero slides.

<p class="font-hero">This is a hero text, which can be used in hero slides.</p>

Heading

.font-heading applies the heading context style independent of the HTML heading level.

A special heading class.

<p class="font-heading">A special heading class.</p>

Lead

.font-lead increases the visual weight of an introductory paragraph to draw the reader's eye.

This is a lead paragraph. It stands out from regular paragraphs.

<p class="font-lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Title

Title styles come in three sizes for use in card headers, section labels, and similar UI elements.

A special title in large size.

A special title in medium size.

A special title in small size.

<p class="font-title-large">A special title in large size.</p>
<p class="font-title">A special title in medium size.</p>
<p class="font-title-small">A special title in small size.</p>

Body

Body styles in three sizes provide typographic control for article and long-form content.

A large text class suitable for various contexts, such as articles, blogs, and more. It features custom styling to enhance readability and design.

A medium text class suitable for various contexts, such as articles, blogs, and more. It features custom styling to enhance readability and design.

A small text class suitable for various contexts, such as articles, blogs, and more. It features custom styling to enhance readability and design.

<p class="font-body-large">A large text class suitable for various contexts, such as articles, blogs, and more. It features custom styling to enhance readability and design.</p>
<p class="font-body">A medium text class suitable for various contexts, such as articles, blogs, and more. It features custom styling to enhance readability and design.</p>
<p class="font-body-small">A small text class suitable for various contexts, such as articles, blogs, and more. It features custom styling to enhance readability and design.</p>

Label

Label styles in three sizes suit metadata, tags, and supporting information where compact text is needed.

A large label class for metadata, tags, and supporting information.

A medium label class for metadata, tags, and supporting information.

A small label class for metadata, tags, and supporting information.

<p class="font-label-large">A large label class for metadata, tags, and supporting information.</p>
<p class="font-label">A medium label class for metadata, tags, and supporting information.</p>
<p class="font-label-small">A small label class for metadata, tags, and supporting information.</p>

CSS

This component can be customized through Sass variables at compile time.

Custom properties

This component exposes CSS custom properties to control its appearance at runtime.

Sass variables

Typography variables are defined with token references as CSS variables.

$paragraph-margin-bottom:   1rem;

$bold-font-weight:          $font-weight-html-bold;

$heading-margin-bottom:     .75rem;
$heading-font-family:       var(--font-family-html);
$heading-font-weight:       var(--font-weight-html-heading);
$heading-font-style:        null;
$heading-color:             null; // var(--heading-color, #{$fg-color});

$font-size-5xlarge:         var(--font-size-text-5xlarge);
$font-size-4xlarge:         var(--font-size-text-4xlarge);
$font-size-3xlarge:         var(--font-size-text-3xlarge);
$font-size-2xlarge:         var(--font-size-text-2xlarge);
$font-size-xlarge:          var(--font-size-text-xlarge);
$font-size-large:           var(--font-size-text-large);
$font-size-medium:          var(--font-size-text-medium);
$font-size-small:           var(--font-size-text-small);
$font-size-xsmall:          var(--font-size-text-xsmall);
$font-size-2xsmall:         var(--font-size-text-2xsmall);

$font-weight-normal:        var(--font-weight-text-normal);
$font-weight-strong:        var(--font-weight-text-strong);
$font-weight-mass:          var(--font-weight-text-mass);
$font-weight-elegant:       var(--font-weight-text-elegant);

$line-height-5xlarge:       var(--line-height-text-5xlarge);
$line-height-4xlarge:       var(--line-height-text-4xlarge);
$line-height-3xlarge:       var(--line-height-text-3xlarge);
$line-height-2xlarge:       var(--line-height-text-2xlarge);
$line-height-xlarge:        var(--line-height-text-xlarge);
$line-height-large:         var(--line-height-text-large);
$line-height-medium:        var(--line-height-text-medium);
$line-height-small:         var(--line-height-text-small);
$line-height-xsmall:        var(--line-height-text-xsmall);
$line-height-2xsmall:       var(--line-height-text-2xsmall);

$h1-font-size:              var(--font-size-html-h1);
$h2-font-size:              var(--font-size-html-h2);
$h3-font-size:              var(--font-size-html-h3);
$h4-font-size:              var(--font-size-html-h4);
$h5-font-size:              var(--font-size-html-h5);
$h6-font-size:              var(--font-size-html-h6);

$h1-line-height:            var(--line-height-html-h1);
$h2-line-height:            var(--line-height-html-h2);
$h3-line-height:            var(--line-height-html-h3);
$h4-line-height:            var(--line-height-html-h4);
$h5-line-height:            var(--line-height-html-h5);
$h6-line-height:            var(--line-height-html-h6);

$legend-font-size:          1.5rem;
$legend-line-height:        1.5em;
$legend-font-weight:        null;
$legend-margin-bottom:      .5rem;

$list-inline-padding:       .5rem;
$dt-font-weight:            $bold-font-weight;

$blockquote-font:           $font-html-blockquote;
$blockquote-margin-y:       $spacer;
$attribution-font:          $font-html-cite;
$attribution-color:         $fg-subtle;

Design tokens

$font-family-text:                    $cx-typography-font-family-text;
$font-family-display:                 $cx-typography-font-family-display;
$font-family-code:                    $cx-typography-font-family-code;
$font-family-html:                    $cx-typography-font-family-html;
$font-family-icon:                    $cx-typography-font-family-icon;

$font-size-text-5xlarge:              $cx-typography-font-size-text-5xlarge;
$font-size-text-4xlarge:              $cx-typography-font-size-text-4xlarge;
$font-size-text-3xlarge:              $cx-typography-font-size-text-3xlarge;
$font-size-text-2xlarge:              $cx-typography-font-size-text-2xlarge;
$font-size-text-xlarge:               $cx-typography-font-size-text-xlarge;
$font-size-text-large:                $cx-typography-font-size-text-large;
$font-size-text-medium:               $cx-typography-font-size-text-medium;
$font-size-text-small:                $cx-typography-font-size-text-small;
$font-size-text-xsmall:               $cx-typography-font-size-text-xsmall;
$font-size-text-2xsmall:              $cx-typography-font-size-text-2xsmall;

$font-weight-text-normal:             $cx-typography-font-weight-text-normal-weight;
$font-weight-text-strong:             $cx-typography-font-weight-text-strong-weight;
$font-weight-text-mass:               $cx-typography-font-weight-text-mass-weight;
$font-weight-text-elegant:            $cx-typography-font-weight-text-elegant-weight;

$line-height-text-5xlarge:            $cx-typography-line-height-text-5xlarge;
$line-height-text-4xlarge:            $cx-typography-line-height-text-4xlarge;
$line-height-text-3xlarge:            $cx-typography-line-height-text-3xlarge;
$line-height-text-2xlarge:            $cx-typography-line-height-text-2xlarge;
$line-height-text-xlarge:             $cx-typography-line-height-text-xlarge;
$line-height-text-large:              $cx-typography-line-height-text-large;
$line-height-text-medium:             $cx-typography-line-height-text-medium;
$line-height-text-small:              $cx-typography-line-height-text-small;
$line-height-text-xsmall:             $cx-typography-line-height-text-xsmall;
$line-height-text-2xsmall:            $cx-typography-line-height-text-2xsmall;

$font-size-display-5xlarge:           $cx-typography-font-size-display-5xlarge;
$font-size-display-4xlarge:           $cx-typography-font-size-display-4xlarge;
$font-size-display-3xlarge:           $cx-typography-font-size-display-3xlarge;
$font-size-display-2xlarge:           $cx-typography-font-size-display-2xlarge;
$font-size-display-xlarge:            $cx-typography-font-size-display-xlarge;
$font-size-display-large:             $cx-typography-font-size-display-large;
$font-size-display-medium:            $cx-typography-font-size-display-medium;
$font-size-display-small:             $cx-typography-font-size-display-small;
$font-size-display-xsmall:            $cx-typography-font-size-display-xsmall;
$font-size-display-2xsmall:           $cx-typography-font-size-display-2xsmall;

$font-weight-display-normal:          $cx-typography-font-weight-display-normal-weight;
$font-weight-display-strong:          $cx-typography-font-weight-display-strong-weight;
$font-weight-display-mass:            $cx-typography-font-weight-display-mass-weight;
$font-weight-display-elegant:         $cx-typography-font-weight-display-elegant-weight;

$line-height-display-5xlarge:         $cx-typography-line-height-display-5xlarge;
$line-height-display-4xlarge:         $cx-typography-line-height-display-4xlarge;
$line-height-display-3xlarge:         $cx-typography-line-height-display-3xlarge;
$line-height-display-2xlarge:         $cx-typography-line-height-display-2xlarge;
$line-height-display-xlarge:          $cx-typography-line-height-display-xlarge;
$line-height-display-large:           $cx-typography-line-height-display-large;
$line-height-display-medium:          $cx-typography-line-height-display-medium;
$line-height-display-small:           $cx-typography-line-height-display-small;
$line-height-display-xsmall:          $cx-typography-line-height-display-xsmall;
$line-height-display-2xsmall:         $cx-typography-line-height-display-2xsmall;

$font-size-html-body:                 $cx-typography-font-size-html-body;
$font-size-html-h1:                   $cx-typography-font-size-html-h1;
$font-size-html-h2:                   $cx-typography-font-size-html-h2;
$font-size-html-h3:                   $cx-typography-font-size-html-h3;
$font-size-html-h4:                   $cx-typography-font-size-html-h4;
$font-size-html-h5:                   $cx-typography-font-size-html-h5;
$font-size-html-h6:                   $cx-typography-font-size-html-h6;
$font-size-html-paragraph:            $cx-typography-font-size-html-paragraph;
$font-size-html-blockquote:           $cx-typography-font-size-html-blockquote;
$font-size-html-cite:                 $cx-typography-font-size-html-cite;
$font-size-html-list:                 $cx-typography-font-size-html-list;
$font-size-html-code:                 $cx-typography-font-size-html-code;

$font-weight-html-paragraph:          $cx-typography-font-weight-html-paragraph-weight;
$font-weight-html-heading:            $cx-typography-font-weight-html-heading-weight;
$font-weight-html-paragraph:          $cx-typography-font-weight-html-paragraph-weight;
$font-weight-html-blockquote:         $cx-typography-font-weight-html-blockquote-weight;
$font-weight-html-cite:               $cx-typography-font-weight-html-cite-weight;
$font-weight-html-list:               $cx-typography-font-weight-html-list-weight;
$font-weight-html-code:               $cx-typography-font-weight-html-code-weight;
$font-weight-html-bold:               $cx-typography-font-weight-html-bold-weight;

$line-height-html-body:               $cx-typography-line-height-html-body;
$line-height-html-h1:                 $cx-typography-line-height-html-h1;
$line-height-html-h2:                 $cx-typography-line-height-html-h2;
$line-height-html-h3:                 $cx-typography-line-height-html-h3;
$line-height-html-h4:                 $cx-typography-line-height-html-h4;
$line-height-html-h5:                 $cx-typography-line-height-html-h5;
$line-height-html-h6:                 $cx-typography-line-height-html-h6;
$line-height-html-paragraph:          $cx-typography-line-height-html-paragraph;
$line-height-html-blockquote:         $cx-typography-line-height-html-blockquote;
$line-height-html-cite:               $cx-typography-line-height-html-cite;
$line-height-html-list:               $cx-typography-line-height-html-list;
$line-height-html-code:               $cx-typography-line-height-html-code;

$font-size-code-large:                $cx-typography-font-size-code-large;
$font-size-code-medium:               $cx-typography-font-size-code-medium;
$font-size-code-small:                $cx-typography-font-size-code-small;

$font-weight-code-normal:             $cx-typography-font-weight-code-normal-weight;
$font-weight-code-strong:             $cx-typography-font-weight-code-strong-weight;

$line-height-code-large:              $cx-typography-line-height-code-large;
$line-height-code-medium:             $cx-typography-line-height-code-medium;
$line-height-code-small:              $cx-typography-line-height-code-small;

$font-context-jumbo:                  $cx-font-context-jumbo;
$font-context-hero:                   $cx-font-context-hero;
$font-context-heading:                $cx-font-context-heading;
$font-context-lead:                   $cx-font-context-lead;
$font-context-title-large:            $cx-font-context-title-large;
$font-context-title-medium:           $cx-font-context-title-medium;
$font-context-title-small:            $cx-font-context-title-small;
$font-context-body-large:             $cx-font-context-body-large;
$font-context-body-medium:            $cx-font-context-body-medium;
$font-context-body-small:             $cx-font-context-body-small;
$font-context-label-large:            $cx-font-context-label-large;
$font-context-label-medium:           $cx-font-context-label-medium;
$font-context-label-small:            $cx-font-context-label-small;

// fusv-disable
$font-text-5xlarge-normal:            $cx-font-text-5xlarge-normal;
$font-text-4xlarge-normal:            $cx-font-text-4xlarge-normal;
$font-text-3xlarge-normal:            $cx-font-text-3xlarge-normal;
$font-text-2xlarge-normal:            $cx-font-text-2xlarge-normal;
$font-text-xlarge-normal:             $cx-font-text-xlarge-normal;
$font-text-large-normal:              $cx-font-text-large-normal;
$font-text-medium-normal:             $cx-font-text-medium-normal;
$font-text-small-normal:              $cx-font-text-small-normal;
$font-text-xsmall-normal:             $cx-font-text-xsmall-normal;
$font-text-2xsmall-normal:            $cx-font-text-2xsmall-normal;

$font-text-5xlarge-strong:            $cx-font-text-5xlarge-strong;
$font-text-4xlarge-strong:            $cx-font-text-4xlarge-strong;
$font-text-3xlarge-strong:            $cx-font-text-3xlarge-strong;
$font-text-2xlarge-strong:            $cx-font-text-2xlarge-strong;
$font-text-xlarge-strong:             $cx-font-text-xlarge-strong;
$font-text-large-strong:              $cx-font-text-large-strong;
$font-text-medium-strong:             $cx-font-text-medium-strong;
$font-text-small-strong:              $cx-font-text-small-strong;
$font-text-xsmall-strong:             $cx-font-text-xsmall-strong;
$font-text-2xsmall-strong:            $cx-font-text-2xsmall-strong;

$font-text-5xlarge-mass:              $cx-font-text-5xlarge-mass;
$font-text-4xlarge-mass:              $cx-font-text-4xlarge-mass;
$font-text-3xlarge-mass:              $cx-font-text-3xlarge-mass;
$font-text-2xlarge-mass:              $cx-font-text-2xlarge-mass;
$font-text-xlarge-mass:               $cx-font-text-xlarge-mass;
$font-text-large-mass:                $cx-font-text-large-mass;
$font-text-medium-mass:               $cx-font-text-medium-mass;
$font-text-small-mass:                $cx-font-text-small-mass;
$font-text-xsmall-mass:               $cx-font-text-xsmall-mass;
$font-text-2xsmall-mass:              $cx-font-text-2xsmall-mass;

$font-text-5xlarge-elegant:           $cx-font-text-5xlarge-elegant;
$font-text-4xlarge-elegant:           $cx-font-text-4xlarge-elegant;
$font-text-3xlarge-elegant:           $cx-font-text-3xlarge-elegant;
$font-text-2xlarge-elegant:           $cx-font-text-2xlarge-elegant;
$font-text-xlarge-elegant:            $cx-font-text-xlarge-elegant;
$font-text-large-elegant:             $cx-font-text-large-elegant;
$font-text-medium-elegant:            $cx-font-text-medium-elegant;
$font-text-small-elegant:             $cx-font-text-small-elegant;
$font-text-xsmall-elegant:            $cx-font-text-xsmall-elegant;
$font-text-2xsmall-elegant:           $cx-font-text-2xsmall-elegant;

$font-display-5xlarge-normal:         $cx-font-display-5xlarge-normal;
$font-display-4xlarge-normal:         $cx-font-display-4xlarge-normal;
$font-display-3xlarge-normal:         $cx-font-display-3xlarge-normal;
$font-display-2xlarge-normal:         $cx-font-display-2xlarge-normal;
$font-display-xlarge-normal:          $cx-font-display-xlarge-normal;
$font-display-large-normal:           $cx-font-display-large-normal;
$font-display-medium-normal:          $cx-font-display-medium-normal;
$font-display-small-normal:           $cx-font-display-small-normal;
$font-display-xsmall-normal:          $cx-font-display-xsmall-normal;
$font-display-2xsmall-normal:         $cx-font-display-2xsmall-normal;

$font-display-5xlarge-strong:         $cx-font-display-5xlarge-strong;
$font-display-4xlarge-strong:         $cx-font-display-4xlarge-strong;
$font-display-3xlarge-strong:         $cx-font-display-3xlarge-strong;
$font-display-2xlarge-strong:         $cx-font-display-2xlarge-strong;
$font-display-xlarge-strong:          $cx-font-display-xlarge-strong;
$font-display-large-strong:           $cx-font-display-large-strong;
$font-display-medium-strong:          $cx-font-display-medium-strong;
$font-display-small-strong:           $cx-font-display-small-strong;
$font-display-xsmall-strong:          $cx-font-display-xsmall-strong;
$font-display-2xsmall-strong:         $cx-font-display-2xsmall-strong;

$font-display-5xlarge-mass:           $cx-font-display-5xlarge-mass;
$font-display-4xlarge-mass:           $cx-font-display-4xlarge-mass;
$font-display-3xlarge-mass:           $cx-font-display-3xlarge-mass;
$font-display-2xlarge-mass:           $cx-font-display-2xlarge-mass;
$font-display-xlarge-mass:            $cx-font-display-xlarge-mass;
$font-display-large-mass:             $cx-font-display-large-mass;
$font-display-medium-mass:            $cx-font-display-medium-mass;
$font-display-small-mass:             $cx-font-display-small-mass;
$font-display-xsmall-mass:            $cx-font-display-xsmall-mass;
$font-display-2xsmall-mass:           $cx-font-display-2xsmall-mass;

$font-display-5xlarge-elegant:        $cx-font-display-5xlarge-elegant;
$font-display-4xlarge-elegant:        $cx-font-display-4xlarge-elegant;
$font-display-3xlarge-elegant:        $cx-font-display-3xlarge-elegant;
$font-display-2xlarge-elegant:        $cx-font-display-2xlarge-elegant;
$font-display-xlarge-elegant:         $cx-font-display-xlarge-elegant;
$font-display-large-elegant:          $cx-font-display-large-elegant;
$font-display-medium-elegant:         $cx-font-display-medium-elegant;
$font-display-small-elegant:          $cx-font-display-small-elegant;
$font-display-xsmall-elegant:         $cx-font-display-xsmall-elegant;
$font-display-2xsmall-elegant:        $cx-font-display-2xsmall-elegant;

$font-code-large-normal:              $cx-font-code-large-normal;
$font-code-large-strong:              $cx-font-code-large-strong;
$font-code-medium-normal:             $cx-font-code-medium-normal;
$font-code-medium-strong:             $cx-font-code-medium-strong;
$font-code-small-normal:              $cx-font-code-small-normal;
$font-code-small-strong:              $cx-font-code-small-strong;

$font-html-h1:                        $cx-font-html-h1;
$font-html-h2:                        $cx-font-html-h2;
$font-html-h3:                        $cx-font-html-h3;
$font-html-h4:                        $cx-font-html-h4;
$font-html-h5:                        $cx-font-html-h5;
$font-html-h6:                        $cx-font-html-h6;
$font-html-body:                      $cx-font-html-body;
$font-html-code:                      $cx-font-html-code;
$font-html-paragraph:                 $cx-font-html-paragraph;
$font-html-blockquote:                $cx-font-html-blockquote;
$font-html-list:                      $cx-font-html-list;
$font-html-cite:                      $cx-font-html-cite;
// fusv-enable

Typography

Global settings

Headings

Heading classes

Heading with subtext

An example heading With faded secondary text

Font size

Available sizes

Fluid sizes

Responsive sizes

Font weight

Inline text elements

Semantic usage

Abbreviations

Blockquotes

Attribution

Alignment

Lists

Bulletless

Inline

Description lists

Font families

Text font

Display font

Code font

Context font styles

Jumbo

Hero

Heading

Lead

Title

Body

Label

CSS

Custom properties

Sass variables

Design tokens