Typography

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

Variant

subtitle2

body1

body2

import Box from '@mui/material/Box';

export default function Variant() {
  return (
    <div>
      <Box sx={{ typography: 'subtitle2' }}>subtitle2</Box>
      <Box sx={{ typography: 'body1' }}>body1</Box>
      <Box sx={{ typography: 'body2' }}>body2</Box>
    </div>
  );
}

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

import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

export default function TextAlignment() {
  return (
    <Typography component="div">
      <Box sx={{ textAlign: 'justify', m: 1 }}>
        Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
        fermentum. Donec sed odio operae, eu vulputate felis rhoncus.
      </Box>
      <Box sx={{ textAlign: 'left', m: 1 }}>Left aligned text.</Box>
      <Box sx={{ textAlign: 'center', m: 1 }}>Center aligned text.</Box>
      <Box sx={{ textAlign: 'right', m: 1 }}>Right aligned text.</Box>
    </Typography>
  );
}

<Box sx={{ textAlign: 'left' }}>…
<Box sx={{ textAlign: 'center' }}>…
<Box sx={{ textAlign: 'right' }}>…

Text transformation

capitalized text.

Lowercase Text.

Uppercase Text.

import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

export default function TextTransform() {
  return (
    <Typography component="div">
      <Box sx={{ textTransform: 'capitalize', m: 1 }}>capitalized text.</Box>
      <Box sx={{ textTransform: 'lowercase', m: 1 }}>Lowercase Text.</Box>
      <Box sx={{ textTransform: 'uppercase', m: 1 }}>Uppercase Text.</Box>
    </Typography>
  );
}

<Box sx={{ textTransform: 'capitalize' }}>…
<Box sx={{ textTransform: 'lowercase' }}>…
<Box sx={{ textTransform: 'uppercase' }}>…

Font weight

Light

Regular

Medium

500

Bold

import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

export default function FontWeight() {
  return (
    <Typography component="div">
      <Box sx={{ fontWeight: 'light', m: 1 }}>Light</Box>
      <Box sx={{ fontWeight: 'regular', m: 1 }}>Regular</Box>
      <Box sx={{ fontWeight: 'medium', m: 1 }}>Medium</Box>
      <Box sx={{ fontWeight: 500, m: 1 }}>500</Box>
      <Box sx={{ fontWeight: 'bold', m: 1 }}>Bold</Box>
    </Typography>
  );
}

<Box sx={{ fontWeight: 'light' }}>… // theme.typography.fontWeightLight
<Box sx={{ fontWeight: 'regular' }}>…
<Box sx={{ fontWeight: 'medium' }}>…
<Box sx={{ fontWeight: 500 }}>…
<Box sx={{ fontWeight: 'bold' }}>…

import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

export default function FontSize() {
  return (
    <Typography component="div">
      <Box sx={{ fontSize: 'default', m: 1 }}>Default</Box>
      <Box sx={{ fontSize: 'h6.fontSize', m: 1 }}>h6.fontSize</Box>
      <Box sx={{ fontSize: 16, m: 1 }}>16px</Box>
    </Typography>
  );
}

<Box sx={{ fontSize: 'default' }}>…  // theme.typography.fontSize
<Box sx={{ fontSize: 'h6.fontSize' }}>…
<Box sx={{ fontSize: 16 }}>…

Font style

Normal font style.

Italic font Style.

Oblique font style.

import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

export default function FontStyle() {
  return (
    <Typography component="div">
      <Box sx={{ fontStyle: 'normal', m: 1 }}>Normal font style.</Box>
      <Box sx={{ fontStyle: 'italic', m: 1 }}>Italic font Style.</Box>
      <Box sx={{ fontStyle: 'oblique', m: 1 }}>Oblique font style.</Box>
    </Typography>
  );
}

<Box sx={{ fontStyle: 'normal' }}>…
<Box sx={{ fontStyle: 'italic' }}>…
<Box sx={{ fontStyle: 'oblique' }}>…

Font family

Default

Monospace

import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

export default function FontFamily() {
  return (
    <Typography component="div">
      <Box sx={{ fontFamily: 'default', m: 1 }}>Default</Box>
      <Box sx={{ fontFamily: 'Monospace', fontSize: 'h6.fontSize', m: 1 }}>
        Monospace
      </Box>
    </Typography>
  );
}

<Box sx={{ fontFamily: 'default' }}>…
<Box sx={{ fontFamily: 'Monospace' }}>…

Letter spacing

Letter Spacing 6px.

Letter Spacing 10px.

import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

export default function LetterSpacing() {
  return (
    <Typography component="div">
      <Box sx={{ letterSpacing: 6, m: 1 }}>Letter Spacing 6px.</Box>
      <Box sx={{ letterSpacing: 10, m: 1 }}>Letter Spacing 10px.</Box>
    </Typography>
  );
}

<Box sx={{ letterSpacing: 6 }}>…
<Box sx={{ letterSpacing: 10 }}>…

Line height

Normal height.

line-height: 2

import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';

export default function LineHeight() {
  return (
    <Typography component="div">
      <Box sx={{ lineHeight: 'normal', m: 1 }}>Normal height.</Box>
      <Box sx={{ lineHeight: 2, m: 1 }}>line-height: 2</Box>
    </Typography>
  );
}

<Box sx={{ lineHeight: 'normal' }}>…
<Box sx={{ lineHeight: 10 }}>…

API

import { typography } from '@mui/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
`textTransform`	`textTransform`	`text-transform`	none