Skip to content

🎉 v5 release candidate is out! Head to the v5 documentation to get started.

Typography

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

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 textAlign="left"><Box textAlign="center"><Box textAlign="right">

Font weight

Light
Regular
Medium
500
Bold
<Box fontWeight="fontWeightLight"><Box fontWeight="fontWeightRegular"><Box fontWeight="fontWeightMedium"><Box fontWeight={500}><Box fontWeight="fontWeightBold">

Font size

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

Font Style

Normal font style.
Italic font Style.
Oblique font style.
<Box fontStyle="normal"><Box fontStyle="italic"><Box fontStyle="oblique">

Font family

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

Letter Spacing

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

Line Height

Normal height.
line-height: 2
<Box lineHeight="normal"><Box lineHeight={10}>

API

import { typography } from '@material-ui/system';
Import name Prop CSS property Theme key
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