[typography] Fix h4 variant when using responsiveFontSizes()

[mj12albert]

The involved APIs in the original repro are technically deprecated (experimental_extendTheme as extendTheme) but the issue occurs with the v9 APIs and the fix fixes both.

Repro with v9 APIs: https://stackblitz.com/edit/7zbt8fan?file=src%2FDemo.tsx

Fix with v9 APIs: https://stackblitz.com/edit/7zbt8fan-jinxmej9?file=src%2FDemo.tsx

Claude Code explanation of the bug:

The bug is in the interaction between alignProperty (grid alignment) and h4’s specific font-size / line-height combination.

How responsiveFontSizes works:

It computes a minFontSize and uses the original as maxFontSize
It linearly interpolates font sizes across breakpoints (sm → md → lg)
At each breakpoint, it applies grid alignment via alignProperty to snap font sizes to a typographic grid (multiples of 4px / (lineHeight * htmlFontSize))
Why h4 is affected:

h4: fontSize: 34px (2.125rem), lineHeight: 1.235
Grid interval: 4 / (1.235 × 16) = 0.2024rem
Grid points near 2.125rem: 2.0243rem (32.39px) and 2.2267rem (35.63px)
2.125rem falls almost exactly between these two grid points, and gets snapped down to 2.0243rem
Deviation: 1.61px — matching the ~2px reported
Why other variants are fine:

h1 (96px, lineHeight 1.167): deviation = 0.03px (line height 112.03px ≈ grid point 112px)
h2 (60px, lineHeight 1.2): deviation = 0px (line height 72px falls exactly on a grid point)
h3 (48px, lineHeight 1.167): deviation = 0.01px
The core issue is in cssUtils.js:55-60 — alignProperty is applied at the last breakpoint (lg), where the font size should return to its original designed value. The existing test at responsiveFontSizes.test.js:27-29 confirms this intent — it expects defaultVariant.fontSize at the lg breakpoint — but only passes because h1 with lineHeight: 1 happens to fall exactly on the grid.

Fixes #40255

• I have followed (at least) the PR section of the contributing guide.

[code-infra-dashboard]

Bundle size

Bundle	Parsed size	Gzip size
@mui/material	🔺+115B(+0.02%)	🔺+30B(+0.02%)
@mui/lab	0B(0.00%)	0B(0.00%)
@mui/private-theming	0B(0.00%)	0B(0.00%)
@mui/system	0B(0.00%)	0B(0.00%)
@mui/utils	0B(0.00%)	0B(0.00%)

Details of bundle changes

Deploy preview

https://deploy-preview-48314--material-ui.netlify.app/

---

Check out the code infra dashboard for more information about this PR.