Text Preview
The text component codifies Fluent's opinions on typography to make them easy to use and standardize across products.
Use the text component for plain text. For hypertext, try a link instead.
Resources
Presets
For easy implementation, use the text preset components. The presets map to the main text styles defined in the Fluent 2 Web UI kit.
| Name | Preset |
|---|---|
| Caption 2 | <Caption2> |
| Caption 1 | <Caption1> |
| Body 1 | <Body1> |
| Subtitle 2 | <Subtitle2> |
| Subtitle 1 | <Subtitle1> |
| Title 3 | <Title3> |
| Title 2 | <Title2> |
| Title 1 | <Title1> |
| Large Title | <LargeTitle> |
| Display | <Display> |
Presets don’t allow for altering font family, size, or weight. If you need to adjust any of these attributes, use Text with the appropriate props.
Layout
Font families
Use the font prop to choose a font family. Stick with the base font, Segoe UI, in most scenarios. Use the monospace font to represent code.
Alignment
The align prop allows you to change text alignment. In most cases, left aligned text is the easiest to read. Use other alignments sparingly.
Avoid justified text in web pages. The consistent line length and inconsistent spacing might make scanning information more difficult.
For more info, see our typography guidelines.
Accessibility
By default, text components result in span elements. Use the as prop to produce semantic HTML.
Avoid using the appearance of a font to convey meaning. Bold and italic text should be used only when necessary, as not all screen readers communicate when text is bold or italicized.