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 sx={{ textAlign: "left" }}>…
<Box sx={{ textAlign: "center" }}>…
<Box sx={{ textAlign: "right" }}>…

Font weight

Light

Regular

Medium

500

Bold

<Box sx={{ fontWeight: "fontWeightLight" }}>…
<Box sx={{ fontWeight: "fontWeightRegular" }}>…
<Box sx={{ fontWeight: "fontWeightMedium" }}>…
<Box sx={{ fontWeight: 500 }}>…
<Box sx={{ fontWeight: "fontWeightBold" }}>…

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: "fontFamily" }}>…
<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