Text and Typography

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


Text Alignment

Alignment helper classes allow you to easily re-align text. There are also available alignment classes that support responsive displays.

Text 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 Transform

Text can be transformed with text capitalization classes.

Font Weights

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

Text 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-emphasise text with .text--disabled. The opacities change with the theme.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Last Updated: 2021-09-02