I tried to make Typography component responsible in this site.

We can achieve it by using theme.

const theme = createTheme();

theme.typography.h3 = {
  fontSize: '1.2rem',
  '@media (min-width:600px)': {
    fontSize: '1.5rem',
  },
  [theme.breakpoints.up('md')]: {
    fontSize: '2.4rem',
  },
};

https://mui.com/material-ui/customization/typography/#responsive-font-sizes

breakpoints means the thresholds of screen sizes where layouts should be changed.

https://mui.com/material-ui/customization/breakpoints/

We can use responsiveFontSizes to make a theme responsible and it's easy to use.

import { createTheme, responsiveFontSizes } from '@mui/material/styles';

let theme = createTheme();
theme = responsiveFontSizes(theme);

I decided to use this this time.