Skip to main contentSkip to docs navigation
View on GitHub

Text

Typography utilities for text alignment, wrapping, transformation, weight, decoration, and truncation.

On this page
@layer utilities
Scoped tokens

Text alignment

Text alignment utilities set the CSS text-align property. Responsive variants apply at the specified breakpoint and above.

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

End aligned text on viewports sized "small" or wider.

End aligned text on viewports sized "medium" or wider.

End aligned text on viewports sized "large" or wider.

End aligned text on viewports sized "xlarge" or wider.

End aligned text on viewports sized "2xlarge" or wider.

HTML
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="small:text-end">End aligned text on viewports sized "<b>small</b>" or wider.</p>
<p class="medium:text-end">End aligned text on viewports sized "<b>medium</b>" or wider.</p>
<p class="large:text-end">End aligned text on viewports sized "<b>large</b>" or wider.</p>
<p class="xlarge:text-end">End aligned text on viewports sized "<b>xlarge</b>" or wider.</p>
<p class="2xlarge:text-end">End aligned text on viewports sized "<b>2xlarge</b>" or wider.</p>

Justified text utility classes are not provided. Justified text can result in uneven word spacing that reduces readability.

Text wrapping and overflow

.text-wrap allows text to break across multiple lines when it overflows its container.

This text should wrap.
HTML
<div class="badge primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

.text-nowrap forces text onto a single line regardless of container width.

This text should overflow the parent.
HTML
<div class="text-nowrap bg-evident border" style="width: 8rem;">
  This text should overflow the parent.
</div>

Word break

.text-break prevents long unbroken strings from overflowing their container by applying word-wrap: break-word and word-break: break-word. word-wrap is included for broader browser support.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

HTML
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Word breaking is not supported in Arabic, the most widely used RTL language. As a result, .text-break is excluded from the RTL-compiled stylesheet.

Text transform

Text transform utilities set the CSS text-transform property.

Lowercased Text

uppercased text

capitalized text

istanbul

İSTANBUL

istanbul

HTML
<p class="text-lowercase">Lowercased Text</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>
<p class="text-uppercase" lang="tr">istanbul</p>
<p class="text-lowercase" lang="tr">İSTANBUL</p>
<p class="text-capitalize" lang="tr">istanbul</p>

.text-capitalize does not account for locale, even when lang is specified on the element.

Font size

.text-large and .text-small adjust the inherited font size up or down relative to the current context.

Easily make text larger or smaller to suit your design needs.

Easily make text larger or smaller to suit your design needs.

HTML
<p class="font-large">Easily make text <span class="text-large">larger</span> or <span class="text-small">smaller</span> to suit your design needs.</p>
<p class="font-small">Easily make text <span class="text-large">larger</span> or <span class="text-small">smaller</span> to suit your design needs.</p>

Font weight and style

Standard CSS font weight and style values are available via the .text-* utility set.

Bold text.

Bolder weight text (relative to the parent element).

Semibold weight text.

Medium weight text.

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

HTML
<p class="text-bold">Bold text.</p>
<p class="text-bolder">Bolder weight text (relative to the parent element).</p>
<p class="text-semibold">Semibold weight text.</p>
<p class="text-medium">Medium weight text.</p>
<p class="text-regular">Normal weight text.</p>
<p class="text-light">Light weight text.</p>
<p class="text-lighter">Lighter weight text (relative to the parent element).</p>
<p class="text-italic">Italic text.</p>
<p class="text-normal">Text with normal font style</p>

Line height

.text-lh-* utilities set the line-height property using values from the design token scale.

This is a long paragraph written to show how the line-height of an element is affected by the utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with the utility API.

This is a long paragraph written to show how the line-height of an element is affected by the utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with the utility API.

This is a long paragraph written to show how the line-height of an element is affected by the utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with the utility API.

This is a long paragraph written to show how the line-height of an element is affected by the utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with the utility API.

HTML
<p class="text-lh-1">This is a long paragraph written to show how the line-height of an element is affected by the utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with the utility API.</p>
<p class="text-lh-small">This is a long paragraph written to show how the line-height of an element is affected by the utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with the utility API.</p>
<p class="text-lh-medium">This is a long paragraph written to show how the line-height of an element is affected by the utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with the utility API.</p>
<p class="text-lh-large">This is a long paragraph written to show how the line-height of an element is affected by the utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with the utility API.</p>

Text decoration

Text decoration utilities set or remove the CSS text-decoration property.

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed
HTML
<p class="text-underline">This text has a line underneath it.</p>
<p class="text-line-through">This text has a line going through it.</p>
<a class="text-decoration-none" href="#">This link has its text decoration removed</a>

Thickness

Add .text-decoration-{n} to set the text-decoration-thickness property.

Decoration thickness 1

Decoration thickness 2

Decoration thickness 3

Decoration thickness 4

HTML
<p class="text-underline text-decoration-1">Decoration thickness 1</p>
<p class="text-underline text-decoration-2">Decoration thickness 2</p>
<p class="text-underline text-decoration-3">Decoration thickness 3</p>
<p class="text-underline text-decoration-4">Decoration thickness 4</p>

Color

The text decoration color can be set independently from the text color.

Default underline

Alternate underline

Primary underline

Secondary underline

Neutral underline

Danger underline

Success underline

Warning underline

Info underline

Black underline

White underline

HTML
<p class="text-underline text-decoration-default">Default underline</p>
<p class="text-underline text-decoration-alternate">Alternate underline</p>
<p class="text-underline text-decoration-primary">Primary underline</p>
<p class="text-underline text-decoration-secondary">Secondary underline</p>
<p class="text-underline text-decoration-neutral">Neutral underline</p>
<p class="text-underline text-decoration-danger">Danger underline</p>
<p class="text-underline text-decoration-success">Success underline</p>
<p class="text-underline text-decoration-warning">Warning underline</p>
<p class="text-underline text-decoration-info">Info underline</p>
<p class="text-underline text-decoration-black">Black underline</p>
<p class="text-underline text-decoration-white">White underline</p>

Opacity

.text-decoration-opacity-{value} adjusts the alpha channel of the decoration color. Apply it alongside .text-decoration or any .text-decoration-{color} class, which set the decoration color as an opacity-aware value.

Text decoration opacity solid

Text decoration opacity 95

Text decoration opacity 90

Text decoration opacity 80

Text decoration opacity 70

Text decoration opacity 60

Text decoration opacity 50

Text decoration opacity 40

Text decoration opacity 30

Text decoration opacity 20

Text decoration opacity 10

Text decoration opacity 05

Text decoration opacity zero

HTML
<p class="text-underline text-decoration text-decoration-opacity-solid">Text decoration opacity solid</p>
<p class="text-underline text-decoration text-decoration-opacity-95">Text decoration opacity 95</p>
<p class="text-underline text-decoration text-decoration-opacity-90">Text decoration opacity 90</p>
<p class="text-underline text-decoration text-decoration-opacity-80">Text decoration opacity 80</p>
<p class="text-underline text-decoration text-decoration-opacity-70">Text decoration opacity 70</p>
<p class="text-underline text-decoration text-decoration-opacity-60">Text decoration opacity 60</p>
<p class="text-underline text-decoration text-decoration-opacity-50">Text decoration opacity 50</p>
<p class="text-underline text-decoration text-decoration-opacity-40">Text decoration opacity 40</p>
<p class="text-underline text-decoration text-decoration-opacity-30">Text decoration opacity 30</p>
<p class="text-underline text-decoration text-decoration-opacity-20">Text decoration opacity 20</p>
<p class="text-underline text-decoration text-decoration-opacity-10">Text decoration opacity 10</p>
<p class="text-underline text-decoration text-decoration-opacity-05">Text decoration opacity 05</p>
<p class="text-underline text-decoration text-decoration-opacity-zero">Text decoration opacity zero</p>

Underline offset

Underline offset utilities set text-underline-offset in em units, scaling automatically with the element’s font size.

Standard underline

Offset 1 underline

Offset 2 underline

Offset 3 underline

HTML
<p class="text-underline">Standard underline</p>
<p class="text-underline underline-offset-1">Offset 1 underline</p>
<p class="text-underline underline-offset-2">Offset 2 underline</p>
<p class="text-underline underline-offset-3">Offset 3 underline</p>

CSS

Text utilities are generated using Sass maps via the utilities API.

Reference

The table lists all text utilities and their CSS properties.

ClassProperties
.font-textfont-family: var(--cx-font-family-text);
.font-displayfont-family: var(--cx-font-family-display);
.font-codefont-family: var(--cx-font-family-code);
.font-htmlfont-family: var(--cx-font-family-html);
.font-iconfont-family: var(--cx-font-family-icon);
.font-normalfont-weight: var(--cx-font-weight-text-normal);
.font-strongfont-weight: var(--cx-font-weight-text-strong);
.font-massfont-weight: var(--cx-font-weight-text-mass);
.font-elegantfont-weight: var(--cx-font-weight-text-elegant);
.font-5xlargefont-size: var(--cx-font-size-5xlarge);
line-height: var(--cx-line-height-5xlarge);
.font-4xlargefont-size: var(--cx-font-size-4xlarge);
line-height: var(--cx-line-height-4xlarge);
.font-3xlargefont-size: var(--cx-font-size-3xlarge);
line-height: var(--cx-line-height-3xlarge);
.font-2xlargefont-size: var(--cx-font-size-2xlarge);
line-height: var(--cx-line-height-2xlarge);
.font-xlargefont-size: var(--cx-font-size-xlarge);
line-height: var(--cx-line-height-xlarge);
.font-largefont-size: var(--cx-font-size-large);
line-height: var(--cx-line-height-large);
.font-mediumfont-size: var(--cx-font-size-medium);
line-height: var(--cx-line-height-medium);
.font-smallfont-size: var(--cx-font-size-small);
line-height: var(--cx-line-height-small);
.font-xsmallfont-size: var(--cx-font-size-xsmall);
line-height: var(--cx-line-height-xsmall);
.font-2xsmallfont-size: var(--cx-font-size-2xsmall);
line-height: var(--cx-line-height-2xsmall);
.text-italicfont-style: italic;
.text-normalfont-style: normal;
.text-lighterfont-weight: lighter;
.text-lightfont-weight: 300;
.text-regularfont-weight: 400;
.text-mediumfont-weight: 500;
.text-semiboldfont-weight: 600;
.text-boldfont-weight: 700;
.text-bolderfont-weight: bolder;
.text-smallfont-size: 0.875em;
.text-largefont-size: 1.25em;
.text-lh-1line-height: 1;
.text-lh-smallline-height: 1.25em;
.text-lh-mediumline-height: 1.5em;
.text-lh-largeline-height: 2em;
.text-starttext-align: start;
.text-endtext-align: end;
.text-centertext-align: center;
.text-wrapwhite-space: normal;
.text-nowrapwhite-space: nowrap;
.text-breakword-wrap: break-word;
word-break: break-word;
.text-lowercasetext-transform: lowercase;
.text-uppercasetext-transform: uppercase;
.text-capitalizetext-transform: capitalize;
.text-decoration-nonetext-decoration: none;
.text-underlinetext-decoration: underline;
.text-line-throughtext-decoration: line-through;
.text-decoration-defaulttext-decoration-color: oklch(from var(--cx-default) l c h / var(--cx-decoration-opacity, 1));
.text-decoration-alternatetext-decoration-color: oklch(from var(--cx-alternate) l c h / var(--cx-decoration-opacity, 1));
.text-decoration-primarytext-decoration-color: oklch(from var(--cx-primary) l c h / var(--cx-decoration-opacity, 1));
.text-decoration-secondarytext-decoration-color: oklch(from var(--cx-secondary) l c h / var(--cx-decoration-opacity, 1));
.text-decoration-neutraltext-decoration-color: oklch(from var(--cx-neutral) l c h / var(--cx-decoration-opacity, 1));
.text-decoration-warningtext-decoration-color: oklch(from var(--cx-warning) l c h / var(--cx-decoration-opacity, 1));
.text-decoration-successtext-decoration-color: oklch(from var(--cx-success) l c h / var(--cx-decoration-opacity, 1));
.text-decoration-dangertext-decoration-color: oklch(from var(--cx-danger) l c h / var(--cx-decoration-opacity, 1));
.text-decoration-infotext-decoration-color: oklch(from var(--cx-info) l c h / var(--cx-decoration-opacity, 1));
.text-decoration-blacktext-decoration-color: oklch(from var(--cx-black) l c h / var(--cx-decoration-opacity, 1));
.text-decoration-whitetext-decoration-color: oklch(from var(--cx-white) l c h / var(--cx-decoration-opacity, 1));
.text-decorationtext-decoration-color: oklch(from var(--cx-fg-color) l c h / var(--cx-decoration-opacity, 1));
.text-decoration-1text-decoration-thickness: 0.0625rem;
.text-decoration-2text-decoration-thickness: 0.125rem;
.text-decoration-3text-decoration-thickness: 0.185rem;
.text-decoration-4text-decoration-thickness: 0.25rem;
.underline-offset-0text-underline-offset: 0;
.underline-offset-1text-underline-offset: 0.125em;
.underline-offset-2text-underline-offset: 0.25em;
.underline-offset-3text-underline-offset: 0.375em;
.text-decoration-opacity-solid--cx-decoration-opacity: 1;
.text-decoration-opacity-95--cx-decoration-opacity: 0.95;
.text-decoration-opacity-90--cx-decoration-opacity: 0.9;
.text-decoration-opacity-80--cx-decoration-opacity: 0.8;
.text-decoration-opacity-70--cx-decoration-opacity: 0.7;
.text-decoration-opacity-60--cx-decoration-opacity: 0.6;
.text-decoration-opacity-50--cx-decoration-opacity: 0.5;
.text-decoration-opacity-40--cx-decoration-opacity: 0.4;
.text-decoration-opacity-30--cx-decoration-opacity: 0.3;
.text-decoration-opacity-20--cx-decoration-opacity: 0.2;
.text-decoration-opacity-10--cx-decoration-opacity: 0.1;
.text-decoration-opacity-05--cx-decoration-opacity: 0.05;
.text-decoration-opacity-zero--cx-decoration-opacity: 0;
.text-decoration-opacity-subtle--cx-decoration-opacity: 0.5;
.text-decoration-opacity-slight--cx-decoration-opacity: 0.25;

Sass variables

Base font related Sass variables, keeping token references as CSS variables.

scss/config/_defaults.scss
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
$font-size-root:            null; // 2vw;
$font-size-root-large:      $font-size-root; // 1vw; // for media-breakpoint-up(large)
$font-size-root-small:      $font-size-root; // 4vw; // for media-breakpoint-down(small)

$text-align:                null;

// $font-size-base affects the font size of the body text
$font-size-base:            var(--font-size-medium); // Assumes the browser default, typically `16px`
$font-family-base:          var(--font-family-text);
$font-weight-base:          var(--font-weight-normal);
$line-height-base:          var(--line-height-medium);

$small-font-size:           .875em;
$large-font-size:           1.25em;

$small-line-height:         1.25em;
$medium-line-height:        1.5em;
$large-line-height:         2em;

$sub-sup-font-size:         .75em;

$font-weight-lighter:       lighter;
$font-weight-light:         300;
$font-weight-regular:       400;
$font-weight-medium:        500;
$font-weight-semibold:      600;
$font-weight-bold:          700;
$font-weight-bolder:        bolder;

Sass maps

.font utilities are generated from Sass maps in scss/maps/_fonts.scss.

scss/maps/_fonts.scss
$font-families: (
  "text":           $font-family-text,
  "display":        $font-family-display,
  "code":           $font-family-code,
  "html":           $font-family-html,
  "icon":           $font-family-icon,
);
scss/maps/_fonts.scss
$font-sizes: (
  "5xlarge":        $font-size-5xlarge,
  "4xlarge":        $font-size-4xlarge,
  "3xlarge":        $font-size-3xlarge,
  "2xlarge":        $font-size-2xlarge,
  "xlarge":         $font-size-xlarge,
  "large":          $font-size-large,
  "medium":         $font-size-medium,
  "small":          $font-size-small,
  "xsmall":         $font-size-xsmall,
  "2xsmall":        $font-size-2xsmall,
);
scss/maps/_fonts.scss
$font-weights: (
  "normal":         $font-weight-normal,
  "strong":         $font-weight-strong,
  "mass":           $font-weight-mass,
  "elegant":        $font-weight-elegant,
);
scss/maps/_fonts.scss
$line-heights: (
  "5xlarge":        $line-height-5xlarge,
  "4xlarge":        $line-height-4xlarge,
  "3xlarge":        $line-height-3xlarge,
  "2xlarge":        $line-height-2xlarge,
  "xlarge":         $line-height-xlarge,
  "large":          $line-height-large,
  "medium":         $line-height-medium,
  "small":          $line-height-small,
  "xsmall":         $line-height-xsmall,
  "2xsmall":        $line-height-2xsmall,
);

Design tokens

Font utilities consume design tokens from Chassis Tokens with the $cx- prefix. — See thedesign tokens page.

Utilities API

Font and text utilities are declared in scss/utilities/_text.scss using the utilities API.

scss/utilities/_text.scss
"font-family": (
  property: font-family,
  class: font,
  values: map-loop($font-families, varify, "$key", "font-family")
),
"cx-font-weight": (
  property: font-weight,
  class: font,
  values: $font-weights
),
// scss-docs-start utils-font-size
"font-size": (
  property: (
    "font-size": null,
    "line-height": null
  ),
  class: font,
  responsive: $enable-responsive-font-sizes,
  values: $-font-size-values
),
// scss-docs-end utils-font-size
// scss-docs-start utils-font-display
"font-display-size": (
  property: (
    "font-size": null,
    "line-height": null
  ),
  class: "font-display.font",
  values: $-display-font-size-values
),
"font-display-weight": (
  property: font-weight,
  class: "font-display.font",
  values: map-loop($display-font-weights, varify, "$key", "font-weight-display")
),
"font-code-size": (
  property: (
    "font-size": null,
    "line-height": null
  ),
  class: "font-code.font",
  values: $-code-font-size-values
),
"font-code-weight": (
  property: font-weight,
  class: "font-code.font",
  values: map-loop($code-font-weights, varify, "$key", "font-weight-code")
),
// scss-docs-end utils-font-display
"font-style": (
  property: font-style,
  class: text,
  values: italic normal
),
"font-weight": (
  property: font-weight,
  class: text,
  values: (
    lighter: $font-weight-lighter,
    light: $font-weight-light,
    regular: $font-weight-regular,
    medium: $font-weight-medium,
    semibold: $font-weight-semibold,
    bold: $font-weight-bold,
    bolder: $font-weight-bolder
  )
),
"text-size": (
  property: font-size,
  class: text,
  values: (
    small: $small-font-size,
    large: $large-font-size,
  )
),
"line-height": (
  property: line-height,
  class: text-lh,
  values: (
    1: 1,
    small: $small-line-height,
    medium: $medium-line-height,
    large: $large-line-height,
  )
),
"text-align": (
  responsive: true,
  property: text-align,
  class: text,
  values: (
    start: start,
    end: end,
    center: center,
  )
),
"white-space": (
  property: white-space,
  class: text,
  values: (
    wrap: normal,
    nowrap: nowrap,
  )
),
"word-wrap": (
  property: word-wrap word-break,
  class: text,
  values: (break: break-word)
),
"text-transform": (
  property: text-transform,
  class: text,
  values: lowercase uppercase capitalize
),
"text-decoration": (
  property: text-decoration,
  class: text,
  values: (
    decoration-none: none,
    underline: underline,
    line-through: line-through
  )
),
"text-decoration-color": (
  property: text-decoration-color,
  class: text-decoration,
  values: map.merge(
    map-loop($context-colors, opacity-var, "$key", "decoration"),
    (
      null: #{to-opacity(var(--fg-color), var(--decoration-opacity, 1))},
    )
  )
),
"text-decoration-thickness": (
  property: text-decoration-thickness,
  class: text-decoration,
  values: (
    1: .0625rem,
    2: .125rem,
    3: .185rem,
    4: .25rem,
  )
),
"underline-offset": (
  property: text-underline-offset,
  class: underline-offset,
  values: (
    0: 0,
    1: .125em,
    2: .25em,
    3: .375em,
  )
),
"underline-opacity": (
  property: --decoration-opacity,
  class: text-decoration-opacity,
  enabled: $enable-property-opacities,
  state: hover,
  values: $text-decoration-opacities
),