Typography

Typography

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

Font size

<Box fontSize="fontSize"><Box fontSize="h6.fontSize"><Box fontSize={16}>
Default
h6.fontSize
16px

Font family

<Box fontFamily="fontFamily"><Box fontFamily="Monospace">
Default
Monospace

API

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