# Text and typography

Control text size, alignment, wrapping, overflow, transforms and more.

# Typography

Control the size and style of text using the Typography helper classes. These values are based upon the Material Design type specification.

These classes can be applied to all breakpoints from xs to xl. When using a base class, .text-{value}, it is inferred to be .text-xs-${value}.

  • .text-{value} for xs
  • .text-{breakpoint}-{value} for sm, md, lg and xl

The value property is one of:

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • subtitle-1
  • subtitle-2
  • body-1
  • body-2
  • button
  • caption
  • overline

The following example demonstrates how the various sizes would appear at different breakpoints:

# Font emphasis

Material design, by default, supports 100, 300, 400, 500, 700, 900 font weights and italicized text.

# Text

# Alignment

Alignment helper classes allow you to easily re-align text.

There are also available alignment classes that support responsive displays.

# Decoration

Remove text decoration with the .text-decoration-none class or add an overline, underline or line-through by using .text-decoration-overline, .text-decoration-underline, and .text-decoration-line-through.

# Opacity

Opacity helper classes allow you to easily adjust the emphasis of text. text--primary has the same opacity as default text. text--secondary is used for hints and helper text. De-emphasize text with text--disabled.

# Transform

Text can be transformed with text capitalization classes.

Text breaking and the removal of text-transform is also possible. In the first example, the text-transform: uppercase custom class is overwritten and allows the text casing to remain. In the second example, we break up a longer word to fit the available space.

# Wrapping and overflow

You can prevent wrapping text with the .text-no-wrap utility class.

Longer content can be truncated with a text ellipsis using the .text-truncate utility class.

# RTL Alignment

When using RTL, you may want to keep the alignment regardless of the rtl designation. This can be achieved using text alignment helper classes in the following format: text-<breakpoint>-<direction>, where breakpoint can be sm, md, lg, or xl and direction can be left or right. You may also want alignment to respond to rtl which can be done using directions start and end.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:05/20/2022, 4:10:15 PM