Skip to content

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={500}><Box fontWeight="fontWeightBold">
Light
Regular
Medium
500
Bold

Font size

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

Font Style

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

Font family

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

Letter Spacing

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

Line Height

<Box lineHeight="normal"><Box lineHeight={10}>
Normal height.
10 px.

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