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 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