Responsive Typography in Material UI?


MUI v4 has responsive typography built in! Check here for details.

Old response

@Luke’s answer is great. I wanted to add some detail to make this work in practice, because both breakpoints and pxToRem are accessible on the theme object… making this becomes a chicken and egg problem! My approach:

import { createMuiTheme } from "@material-ui/core"

const defaultTheme = createMuiTheme({ ... customisations that don’t rely on theme properties... })
const { breakpoints, typography: { pxToRem } } = defaultTheme

const theme = {
  overrides: {
    MuiTypography: {
      h1: {
        fontSize: "5rem",
        [breakpoints.down("xs")]: {
          fontSize: "3rem"

export default theme

Leave a Comment