MUI Typography

Material UI > MUI Typography

The Typography component in Material UI provides a helpful variety of styled text components.

The actual React/HTML component to be used is determined by the variant prop. So a variant of h1 renders a <h1>, and so on for h2, h3, h4, h5 and h6. Then, you have subtitle1 and subtitle2 which are variations of h6, and body1 and body2 which are variations of <p> paragraph with font size 16px and 14px respectively. There are also overline and caption caption variants which are both smaller font sized <span> components.

Typography Usage

The default <Typography> with no props will render a body1 variant, which is just a <p>. So: <Typography> my text </Typography> is just like rendering <p> my text </p> except Material-UI will apply additional CSS. To render an <h1>, simply pass "h1" as the variant to the <Typography component:

  <Typography variant="h1">Typography h1</Typography>

Typography Sandbox

To view more examples, see the examples in our editor to the right.

What CSS is applied for Typography components?

In addition to changing the element's tag, Material UI will apply CSS for each typography variant. For example, theme.typography.h1 is applied when the variant prop is "h1".

If we look at Material UI's default theme, that applies this CSS:

h1: Object
  fontFamily: ""Roboto", "Helvetica", "Arial", sans-serif"
  fontWeight: 300
  fontSize: "6rem"
  lineHeight: 1.167
  letterSpacing: "-0.01562em"

Typography color

If you want to use the color prop, you are given the typical color prop selections: initial, inherit, primary, secondary, textPrimary, textSecondary, error which correspond to your theme's colors.

Custom Typography Color, Bold, CSS

To set a custom color, font-weight or other CSS for Typography, you will need to use the sx prop. See the examples in the editor.

Typography Line-break

To line break with Typography, set the display prop to block, which will break the line before the text inside. Example: <Typography display="block"> My text will be on the next line </Typography. This may apply if you are using the overline or caption variants, which are <span> and so are normally display inline-block.

Lesson 12/12

import React from "react";
import ReactDOM from "react-dom";
import Typography from "@mui/material/Typography";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";

function TypographyExamples() {
  return (
    <Card>
      <CardContent>
        <Typography variant="h1">h1</Typography>
        <Typography variant="h2" gutterBottom>
          h2 gutterBottom
        </Typography>
        <Typography variant="h3" align="right">
          h3 align right
        </Typography>
        <Typography variant="h4" align="center">
          h4 align center
        </Typography>
        <Typography variant="h5" color="primary">
          h5 color primary
        </Typography>
        <Typography variant="h6" sx={{ color: "#00EE00", fontWeight: "bold" }}>
          custom color and bold
        </Typography>
        <Typography variant="h6">h6</Typography>
        <Typography variant="subtitle1" display="inline">
          subtitle1 display inline{" "}
        </Typography>
        <Typography variant="subtitle2" display="inline">
          subtitle2 display inline{" "}
        </Typography>
        <Typography variant="body1">body1 (16px)</Typography>
        <Typography variant="body2">body2 (14px)</Typography>
        <Typography variant="button">button text</Typography>
        <Typography variant="caption" display="block">
          line break caption text
        </Typography>
        <Typography variant="overline" display="block">
          overline text
        </Typography>
      </CardContent>
    </Card>
  );
}

export default TypographyExamples;

Open Sandbox