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 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 '@material-ui/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