Typography

Comprehensive documentation and examples for Chassis CSS typography, including global settings, headings, body text, lists, and more.

Global Settings

Typography settings in Chassis CSS are highly customizable, giving designers full control through the use of design tokens. These styles are primarily defined in _reboot.scss and _type.scss, with global variables located in _variables.scss. For additional control, explore the textual utility classes.

Key Features:

Native Font Stack: Leverages a native font stack to select the optimal font-family for each operating system and device.
Root Font Size: Use the $font-size-root variable to define the rem size. By default, this is set to null.
Base Typography: Customize the typographic base applied to the <body> element using $font-family-base, $font-size-base, and $line-height-base variables.

For more details on design tokens, visit the Design Tokens page.

Headings

Chassis CSS supports all standard HTML headings, from <h1> to <h6>. These headings are styled to ensure consistency and readability across your project.

Heading	Example
`<h1></h1>`	h1. Chassis CSS
`<h2></h2>`	h2. Chassis CSS
`<h3></h3>`	h3. Chassis CSS
`<h4></h4>`	h4. Chassis CSS
`<h5></h5>`	h5. Chassis CSS
`<h6></h6>`	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

For scenarios where you need the styling of a heading but cannot use the corresponding HTML element, Chassis CSS provides .h1 through .h6 classes.

h1. Chassis CSS

h2. Chassis CSS

h3. Chassis CSS

h4. Chassis CSS

h5. Chassis CSS

h6. Chassis CSS

html

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

Utility Segments

Enhance headings with utility classes to apply partial formatting. For example:

An example heading With faded secondary text

html

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

Display Headings

Display headings are designed for impactful, large-scale typography. Use the font-display class along with heading tags to create standout text.

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

html

<h1 class="font-display h1">Display 1</h1>
<h1 class="font-display h2">Display 2</h1>
<h1 class="font-display h3">Display 3</h1>
<h1 class="font-display h4">Display 4</h1>
<h1 class="font-display h5">Display 5</h1>
<h1 class="font-display h6">Display 6</h1>

These headings are customizable via the $display-font-sizes Sass map and variables like $display-font-weight, $display-line-height, $display-font-family, and $display-font-style.

Font size utilities in Chassis CSS allow you to quickly adjust the size of text elements while maintaining consistent line heights. These utilities are based on design tokens, ensuring scalability and uniformity across your project. Each utility class applies both font-size and the corresponding line-height for optimal readability.

Available Classes

The following classes can be used to adjust font sizes:

.font-5xlarge

.font-4xlarge

.font-3xlarge

.font-2xlarge

.font-xlarge

.font-large

.font-medium

.font-small

.font-xsmall

.font-2xsmall

html

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

Key Features

Scalability: Font sizes are defined using design tokens, ensuring they scale consistently across different screen sizes and devices.
Line Height Integration: Each font size class automatically applies a matching line height, eliminating the need for manual adjustments.
Ease of Use: Simply add the desired class to your HTML element to apply the corresponding font size.

For responsive font sizes, refer to the Responsive Font Sizes section, which explains how text scales dynamically based on the viewport size.

Responsive Utilities

Chassis CSS provides responsive font size utilities that adapt to different breakpoints. Enable this feature through the $enable-adaptive-font-sizes variable, allowing you to control typography across device sizes for optimal readability and design consistency.

These utilities follow a mobile-first approach, allowing you to stack classes for progressive scaling. Classes use the format font-{size} for the base size (applying from xsmall and up) and {breakpoint}:font-{size} for breakpoint-specific sizes (small, medium, large, xlarge, and 2xlarge). Each breakpoint class overrides the previous font size at that breakpoint and larger viewports.

Progressively larger text

html

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

Font Weight

Quickly change the font-weight between 4 values defined by tokens.

Mass text.

Strong text.

Normal text.

Elegant text.

html

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

Inline Text Elements

Chassis CSS provides styling for common inline HTML5 elements, ensuring semantic and visual consistency.

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.

html

<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

<mark>: Highlights text for reference or notation purposes.
<small>: Represents side-comments or fine print, such as legal text.
<s>: Indicates text that is no longer relevant or accurate.
<u>: Denotes text with a non-textual annotation.

For purely stylistic purposes, use the following classes:

.text-mark: Applies the same styles as <mark>.
.text-small: Mimics <small> styling.
.text-decoration-underline: Matches <u> styling.
.text-decoration-line-through: Matches <s> styling.

Abbreviations

Use the <abbr> element to provide expanded versions of abbreviations and acronyms on hover. Add .text-initials for a smaller font size.

attr

html

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

Blockquotes

Blockquotes are ideal for quoting content from other sources. Wrap the content in <blockquote class="blockquote">.

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

html

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

Attribution

For attribution, wrap the <blockquote> in a <figure> and use <figcaption> or a block-level element with the .attribution class. Example:

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

Someone famous in Source Title

html

<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

Use text utilities to align blockquotes as needed:

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

Someone famous in Source Title

html

<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

html

<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

Bulletless Lists

Remove default list-style and left margin by adding the .bulletless class. Note: This applies only to immediate child elements.

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.

html

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

Display list items inline by adding the .inline class.

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

html

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

Description List Alignment

Align terms and descriptions horizontally using grid classes or semantic mixins. Add .text-truncate to truncate long terms with ellipses.

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.

html

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

Context Fonts

Chassis CSS provides context-specific font styles for various use cases.

Jumbo

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

html

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

Hero

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

html

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

Heading

A special heading class.

html

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

Lead

Highlight paragraphs by adding .font-lead.

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

html

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

Title

A special title in large size.

A special title in medium size.

A special title in small size.

html

<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

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.

html

<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

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.

html

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

Text Utilities

Modify text alignment, transformation, style, weight, line-height, decoration, and color using text utilities and color utilities.

Responsive Font Sizes

Chassis CSS 5 introduces responsive font sizes by default, allowing text to scale naturally across devices and viewports. Learn more on the RFS page.

CSS

This component can be customized using CSS variables, allowing for styles to be modified dynamically on the page. These CSS variables are part of Chassis CSS's design token system, giving design teams control over component appearance. See the design tokens page for more details.

Variables

These CSS variables control the component's appearance and can be modified dynamically on the page. Components use cascading variables, allowing seamless variations in size, color, and style without redundant style declarations through component inheritance and the context class system.

Sass Variables

Typography variables are defined with token references as CSS variables.

scss/_variables.scss

$paragraph-margin-bottom:   1rem;

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

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

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

$h1-line-height:            var(--#{$prefix}line-height-html-h1);
$h2-line-height:            var(--#{$prefix}line-height-html-h2);
$h3-line-height:            var(--#{$prefix}line-height-html-h3);
$h4-line-height:            var(--#{$prefix}line-height-html-h4);
$h5-line-height:            var(--#{$prefix}line-height-html-h5);
$h6-line-height:            var(--#{$prefix}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:           $cx-font-html-blockquote;
$blockquote-margin-y:       $spacer;
$attribution-font:          $cx-font-html-cite;
$attribution-color:         $fg-subtle;

Additional typography elements, including those in Reboot, have dedicated variables. Refer to the text utilities page for base font-related variables.

Typography Tokens

scss/tokens/_fonts.scss

$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;