[typography] Fix h4 variant when using responsiveFontSizes()

packages/mui-material/src/styles/responsiveFontSizes.js

@@ -71,16 +71,28 @@ export default function responsiveFontSizes(themeInput, options = {}) {
         });
     }
 
+    const responsive = responsiveProperty({
+      cssProperty: 'fontSize',
+      min: minFontSize,
+      max: maxFontSize,
+      unit: 'rem',
+      breakpoints: breakpointValues,
+      transform,
+    });
+
+    // https://github.com/mui/material-ui/issues/40255
+    // Preserve the original font size at the largest breakpoint.
+    // Grid alignment can snap the max value away from the original designed size.
+    if (breakpointValues.length > 0) {
+      const lastBreakpoint = breakpointValues[breakpointValues.length - 1];
+      responsive[`@media (min-width:${lastBreakpoint}px)`] = {
+        fontSize: `${Math.round(maxFontSize * 10000) / 10000}rem`,
+      };
+    }
+
     typography[variant] = {
       ...style,
-      ...responsiveProperty({
-        cssProperty: 'fontSize',
-        min: minFontSize,
-        max: maxFontSize,
-        unit: 'rem',
-        breakpoints: breakpointValues,
-        transform,
-      }),
+      ...responsive,
     };
   });
 

packages/mui-material/src/styles/responsiveFontSizes.test.js

@@ -59,6 +59,33 @@ describe('responsiveFontSizes', () => {
     });
   });
 
+  it('should preserve the original font size at the largest breakpoint', () => {
+    // Regression test for https://github.com/mui/material-ui/issues/40255
+    // h4 (34px = 2.125rem, lineHeight 1.235) has a font size that falls between
+    // grid alignment points, causing alignProperty to snap it ~1.6px away.
+    // Uses px input to also verify that the largest-breakpoint value is
+    // normalized to rem (consistent with the other breakpoints).
+    const defaultVariant = {
+      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+      fontSize: '34px',
+      fontWeight: 400,
+      letterSpacing: '0.00735em',
+      lineHeight: 1.235,
+    };
+
+    const theme = createTheme({
+      typography: {
+        h4: defaultVariant,
+      },
+    });
+    const { typography } = responsiveFontSizes(theme);
+    expect(
+      typography.h4[`@media (min-width:${defaultTheme.breakpoints.values.lg}px)`],
+    ).to.deep.equal({
+      fontSize: '2.125rem',
+    });
+  });
+
   it('should handle variants that have been reset to undefined', () => {
     const theme = createTheme({
       typography: {