#Text and typography

#Breakpoints

All of the typography classes support the responsive breakpoints seen in other parts of the framework. The base class .text-{value} corresponds to the xsAndUp breakpoint, while the classes .text-{breakpoint}-{value} can be used for the rest of the breakpoints (sm, md, lg and xl).

The following example shows a slightly contrived example of how one can use the different classes to effect:

#Font emphasis

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

#Alignment

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

The alignment classes also support responsive breakpoints.

#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-high-emphasis has the same opacity as default text. text-medium-emphasis 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.