Typography
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
Variant
<Box sx={{ typography: 'subtitle2' }}>… // theme.typography.subtitle2
<Box sx={{ typography: 'body1' }}>…
<Box sx={{ typography: 'body2' }}>…
Text alignment
<Box sx={{ textAlign: 'left' }}>…
<Box sx={{ textAlign: 'center' }}>…
<Box sx={{ textAlign: 'right' }}>…
Text transformation
<Box sx={{ textTransform: 'capitalize' }}>…
<Box sx={{ textTransform: 'lowercase' }}>…
<Box sx={{ textTransform: 'uppercase' }}>…
Font weight
<Box sx={{ fontWeight: 'light' }}>… // theme.typography.fontWeightLight
<Box sx={{ fontWeight: 'regular' }}>…
<Box sx={{ fontWeight: 'medium' }}>…
<Box sx={{ fontWeight: 500 }}>…
<Box sx={{ fontWeight: 'bold' }}>…
Font size
<Box sx={{ fontSize: 'default' }}>… // theme.typography.fontSize
<Box sx={{ fontSize: 'h6.fontSize' }}>…
<Box sx={{ fontSize: 16 }}>…
Font style
<Box sx={{ fontStyle: 'normal' }}>…
<Box sx={{ fontStyle: 'italic' }}>…
<Box sx={{ fontStyle: 'oblique' }}>…
Font family
<Box sx={{ lineHeight: 'normal' }}>…
<Box sx={{ lineHeight: 10 }}>…
API
import { typography } from '@mui/system';
| Import name | Prop | CSS property | Theme key |
|---|---|---|---|
typography |
typography |
font-family, font-weight, font-size, line-height, letter-spacing, text-transform |
typography |
fontFamily |
fontFamily |
font-family |
typography |
fontSize |
fontSize |
font-size |
typography |
fontStyle |
fontStyle |
font-style |
typography |
fontWeight |
fontWeight |
font-weight |
typography |
letterSpacing |
letterSpacing |
letter-spacing |
none |
lineHeight |
lineHeight |
line-height |
none |
textAlign |
textAlign |
text-align |
none |
textTransform |
textTransform |
text-transform |
none |