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.
For easy implementation, use the text preset components. The presets map to the main text styles defined in the Fluent 2 Web UI kit.
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.
font prop to choose a font family. Stick with the base font, Segoe UI, in most scenarios. Use the
monospace font to represent code.
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.
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.