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.

text-and-typography/typography.vue

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:

text-and-typography/typography-breakpoints.vue

Font emphasis

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

text-and-typography/font-emphasis.vue

Text

Alignment

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

text-and-typography/text-alignment.vue

The alignment classes also support responsive breakpoints.

text-and-typography/text-alignment-responsive.vue

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.

text-and-typography/text-decoration.vue

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.

text-and-typography/text-opacity.vue

Transform

Text can be transformed with text capitalization classes.

text-and-typography/text-transform.vue

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.

text-and-typography/text-break.vue

Wrapping and overflow

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

text-and-typography/text-no-wrap.vue

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

text-and-typography/text-truncate.vue

RTL Alignment

When using RTL, you may want to keep the alignment regardless of current text direction. This can be achieved by setting the direction to either left or right.

If instead you want the alignment to respond to the current text direction, use start and end.

text-and-typography/text-rtl.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.