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

import React from 'react';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

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

<Box fontFamily="fontFamily">…
<Box fontFamily="Monospace">…

Letter Spacing

Letter Spacing 6px.

Letter Spacing 10px.

import React from 'react';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

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

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

Line Height

Normal height.

10 px.

import React from 'react';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

export default function LineHeight() {
  return (
    <Typography component="div">
      <Box lineHeight="normal" m={1}>
        Normal height.
      </Box>
      <Box lineHeight={10} m={1}>
        10 px.
      </Box>
    </Typography>
  );
}

<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