The foundation of our CSS text utilities are sourced from SUIT CSS, including:

  • u-textBreak - Break strings when their length exceeds the width of their container.
  • u-textCenter - Center-align text.
  • u-textLeft - Left-align text.
  • u-textRight - Right-align text.
  • u-textInheritColor - Inherit the ancestor's text color.
  • u-textKern - Enable kerning in supporting browsers.
  • u-textNoWrap - Prevent wrapping at whitespace.
  • u-textTruncate - Truncate a single line of text, with ellipsis.

We've extended these basic patterns and documented our changes below.

The default color of an element may be overridden using a utility class of u-textX, where X is replaced with a color from our palette.

This can be also be useful for styling icons or other elements that inherit parent colors.



<p class="u-textGreen">

<p class="u-textRed">

You can use the u-textFamilyAlt utility to apply our display font to text. It can be helpful for adding additional emphasis to text without affecting the semantics of a page.


<p class="u-textSize3 u-textFamilyAlt">Wowza</p>

Breakpoint-specific versions of the standard text alignment utilities are included.

Default alignment, then centered, then right-aligned
<div class="u-md-textCenter u-lg-textRight">
  Default alignment, then centered, then right-aligned

Size: Exact

  • responsive

To set the element's font size to that of a specific step of our modular scale, include a class formatted as follows:


Where X is replaced with the desired modular scale step. For negative steps, use a leading zero (01 instead of -1). Omit X to use the base (0) step.

Steps -1 through 6 are supported for this utility. Smaller step values are not supported because they are not readable.

This utility also supports responsive variations, for example u-md-textSizeX to apply X text size at the medium breakpoint.









You can set an element's size relative to its parent using the u-textGrowX and u-textShrinkX utilities, with X corresponding to how many scale steps to apply.

Steps -6 through 6 are supported for this utility.

Default Heading (2 steps smaller)

Can you even believe how useful this is?

  Default Heading
  <span class="u-textShrink2">
    (2 steps smaller)

  Can you even
  <em class="u-textGrow3">
  how useful this is?

These modifiers exist to change the style of displayed text:

  • u-textUpper - All caps.

Uppercase Text!

<h2 class="u-textUpper">
  Uppercase Text!

These modifiers exist to change the weight of displayed text:

  • u-textWeightNormal - Normal weight (400).
  • u-textWeightBold - Bold weight (700).
  • u-textWeightBlack - Black weight (800).

Normal Weight Text

Bold Weight Text

Black Weight Text

<p class="u-textWeightNormal">
  Normal Weight Text

<p class="u-textWeightBold">
  Bold Weight Text

<p class="u-textWeightBlack">
  Black Weight Text