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