Responsive typography in Material-UI?

Update

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 ... meaking 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 = {
  ...defaultTheme,
  overrides: {
    MuiTypography: {
      h1: {
        fontSize: "5rem",
        [breakpoints.down("xs")]: {
          fontSize: "3rem"
        }
      }
    }
  }
}

export default theme

Hope this is of use to somebody!


Update

The latest version of Material UI (v4) fully supports response typography. See the official documentation for details.

Original Answer

As of version 1.x, Material UI does not have a specific mechanism for handling responsive typography.

You can scale the size of all MUI Typography by changing the font-size of the <html> element, as you mentioned. (docs)

const styles = theme => ({
  "@global": {
    html: {
      [theme.breakpoints.up("sm")]: {
        fontSize: 18
      }
    }
  }
}

Edit Material UI - scale font size

Theme overrides

As far as i know, the only other option is to use theme overrides to define custom styles for each of the Typography variants.

This requires replicating some of the logic in createTypography.js (ie setting line heights to maintain vertical rhythm)

const theme = createMuiTheme({
  overrides: {
    MuiTypography: {
      headline: {
        fontSize: pxToRem(24),
        [breakpoints.up("md")]: {
          fontSize: pxToRem(32)
        }
      }
    }
  }

Edit Material UI - Responsive font size


As described in the docs you can use the responsiveFontSizes() helper to make Typography font sizes in the theme responsive.

import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';

let theme = createMuiTheme();
theme = responsiveFontSizes(theme);

Tags:

Typography

Responsive Design

Reactjs

Material Ui

Recent Posts