Responsive font size for high resolutions not working in MUI 5

Admin 1
Viewed 1746

I am using Material UI v5 in my React app.

And using responsiveFontSizes to generate responsive typography settings based on the options received.

So the responsiveFontSizes works fine for all device sizes, but only for the default Material UI breakpoints.

enter image description here

The font sizes on a device which has a high or ultra high resolution like 2560 * 1440, 2340 * 1080 or even 3200 * 1440 don't work at all.

They look very small.

If I look into the inspect mode, then I can see a Typography with h3 has 2.9991rem as maximum.

enter image description here

All of the Typography components I used in Container.

<Container maxWidth="md">
  <Typography variant="h1">h1 test</Typography>
  ...
</Container>

How can I make the responsiveFontSizes work on a high resolution device as well?

material-ui reactjs font-size
1 Answers

I have faced same issue. if you check the https://mui.com/customization/typography/#responsive-font-sizes there is chart which shows how responsiveFontSizes() displays. basically at lower screen resolutions higher fontsize shrinks faster compared to lower fontsize. so I skipped responsiveFontSizes() all together.

I wrote my custom typograhy tags with rem units w.r.t 1024px media breakpoint. the added breakpoint in index.css to increase the html font-size

Option1: lower to higher screen resolution

App.js

import * as React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import './index.css';

const theme = createTheme({
  typography: {
    h1: {
      fontWeight: 600,
      fontSize: '2.25rem',
      lineHeight: 2.75,
    },
    h2: {
      fontWeight: 600,
      fontSize: '1.625rem',
      lineHeight: 2.125, 
    },
    ...
  },
});

export default function MyApp() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="h1" color="primary">Heading 1</Typography>
      <Typography variant="h2" color="primary">Heading 2</Typography>
    </ThemeProvider>
  );
}

index.css

@media only screen and (min-width: 1024px) {
    html {
    font-size: 100%;
    }
  };
  @media only screen and (min-width: 1280px) {
    html {
    font-size: 125%;
    }
  };
  @media only screen and (min-width: 1536px) {
    html {
    font-size: 150%;
    }
  };
  @media only screen and (min-width: 1920px) {
    html {
    font-size: 187.5%;
    }
  };

Options2: with responsiveFontSizes (higher to lower scrensizes) : for this you have to set typography fontsize based on the highest resolution. check https://mui.com/customization/theming/#responsivefontsizes-theme-options-theme for other options and further tweaking.

import * as React from 'react';
import { createTheme, ThemeProvider, responsiveFontSizes } from '@mui/material/styles';
import Typography from '@mui/material/Typography';

const theme = createTheme({
  typography: {
    h1: { fontSize: '5rem' },
  },
  breakpoints: {
    values: {
      xs: 0,
      sm: 425,
      md: 768,
      lg: 1024,
      xl: 1280,
      '2xl': 1536,
      '3xl': 1920,
      '4xl': 2560,
      '5xl': 3200,
    },
  },
});

export default function MyApp() {
  return (
    <ThemeProvider theme={responsiveFontSizes(theme, { breakpoints: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'], factor: 5 })}>
      <Typography variant="h1" color="primary">
        Heading 1
      </Typography>
      <Typography variant="h6" color="primary">
        Heading 6
      </Typography>
      <Typography variant="body1" color="primary">
        Body 1
      </Typography>
    </ThemeProvider>
  );
}
user_176200660
Related