Typography
Edit this page

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