[typography] Fix h4 variant when using responsiveFontSizes() by mj12albert · Pull Request #48314 · mui/material-ui (original) (raw)

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.

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.