Skip to content

Typography

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

Variant

subtitle2
body1
body2
<Box sx={{ typography: 'subtitle2' }}>// theme.typography.subtitle2
<Box sx={{ typography: 'body1' }}><Box sx={{ typography: 'body2' }}>

Text alignment

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.
<Box sx={{ textAlign: 'left' }}><Box sx={{ textAlign: 'center' }}><Box sx={{ textAlign: 'right' }}>

Font weight

Light
Regular
Medium
500
Bold
<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

Default
h6.fontSize
16px
<Box sx={{ fontSize: 'default' }}>// theme.typography.fontSize
<Box sx={{ fontSize: 'h6.fontSize' }}><Box sx={{ fontSize: 16 }}>

Font style

Normal font style.
Italic font Style.
Oblique font style.
<Box sx={{ fontStyle: 'normal' }}><Box sx={{ fontStyle: 'italic' }}><Box sx={{ fontStyle: 'oblique' }}>

Font family

Default
Monospace
<Box sx={{ fontFamily: 'default' }}><Box sx={{ fontFamily: 'Monospace' }}>

Letter spacing

Letter Spacing 6px.
Letter Spacing 10px.
<Box sx={{ letterSpacing: 6 }}><Box sx={{ letterSpacing: 10 }}>

Line height

Normal height.
line-height: 2
<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