Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Text alignment

<Box textAlign="left">…
<Box textAlign="center">…
<Box textAlign="right">…

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.

Left aligned text.

Center aligned text.

Right aligned text.

Font weight

<Box fontWeight="fontWeightLight">…
<Box fontWeight="fontWeightRegular">…
<Box fontWeight="fontWeightMedium">…
<Box fontWeight={600}>…

Light

Regular

Medium

600

<Box fontFamily="fontFamily">…
<Box fontFamily="Monospace">…

Default

Monospace

import { typography } from '@material-ui/system';

Import name	Prop	CSS property	Theme key
`fontFamily`	`fontFamily`	`font-family`	`typography`
`fontSize`	`fontSize`	`font-size`	`typography`
`fontWeight`	`fontWeight`	`font-weight`	`typography`
`textAlign`	`textAlign`	`text-align`	none