Typography

A living reference for your type scale. The list below is read from theme.typography, so it always reflects the fonts and sizes your site actually uses. For color tokens, see the Design System page.

Type scale

Each row shows a variant, its token name, font size, and weight — a quick way for contributors to see the whole scale at a glance.

How this page is built

This page renders one small component that maps over theme.typography. Copy it into your components/ folder as components/TypeScale.jsx:

jsx
import { Box, Paper, Typography, useTheme } from "@mui/material";

const typeTokens = [
  "h1",
  "h2",
  "h3",
  "h4",
  "h5",
  "h6",
  "subtitle1",
  "subtitle2",
  "body1",
  "body2",
  "button",
  "caption",
  "overline",
];

function TypeScale() {
  const theme = useTheme();

  return (
    <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5, my: 3 }}>
      {typeTokens.map((variant) => {
        const token = theme.typography[variant] || {};
        return (
          <Paper
            key={variant}
            variant="outlined"
            sx={{
              p: 2,
              display: "flex",
              flexDirection: { xs: "column", sm: "row" },
              alignItems: { sm: "baseline" },
              justifyContent: "space-between",
              gap: 1,
            }}
          >
            <Typography variant={variant} sx={{ m: 0 }}>
              {variant}
            </Typography>
            <Typography
              variant="caption"
              color="text.secondary"
              sx={{ flexShrink: 0, fontFamily: "monospace" }}
            >
              typography.{variant} · {token.fontSize || "—"} / {token.fontWeight || "—"}
            </Typography>
          </Paper>
        );
      })}
    </Box>
  );
}

export default TypeScale;

Then render it on any MDX page:

mdx
import TypeScale from "../components/TypeScale.jsx";

## Type scale

<TypeScale />

Configuring the scale

Define your scale in the theme so every page inherits it:

jsx
import { createTheme } from "@mui/material/styles";

const theme = createTheme({
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
    h1: { fontSize: "2.5rem", fontWeight: 700, lineHeight: 1.2 },
    h2: { fontSize: "2rem", fontWeight: 600, lineHeight: 1.3 },
    body1: { fontSize: "1rem", fontWeight: 400, lineHeight: 1.5 },
    caption: { fontSize: "0.75rem", lineHeight: 1.66 },
  },
});

Each variant accepts fontSize, fontWeight, lineHeight, letterSpacing, fontFamily, textTransform, and fontStyle.

Responsive type

Scale type across breakpoints by nesting media queries inside a variant:

jsx
const theme = createTheme({
  typography: {
    h1: {
      fontSize: "2rem",
      "@media (min-width:600px)": { fontSize: "2.5rem" },
      "@media (min-width:900px)": { fontSize: "3rem" },
    },
  },
});

Learn more

• Material UI — Theme customization