[system] Using responsiveFontSizes results in inconsistency between <Typography> and <Box> Component

[Skaronator]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

A Typography component with Variant h4 doesn't match a Box component with fontSize h4

Expected Behavior 🤔

A Typography component with Variant h4 should match a Box component with fontSize h4

Steps to Reproduce 🕹

Example without Responsive Font: https://codesandbox.io/s/create-react-app-with-typescript-cujk5
Example with Responsive Font: https://codesandbox.io/s/create-react-app-with-typescript-jnw6x

Context 🔦

Not sure if this is a bug or it should work this way. Currently moving some components from Typography to the Box component and noticed this inconsistency.

Your Environment 🌎

Tech	Version
Material-UI	v4.4.2
React	16.9.0
Browser	Chrome 75
TypeScript	3.6.3

[azz0r]

I to am having issues with this.

If I set it to "1rem" it works. If i set it to 1, "1", 12, or "12" (seen here: https://material-ui.com/customization/typography/#responsive-font-sizes) I get: Material-UI: unsupported non-unitless line height with grid alignment. Use unitless line heights instead.

[suyogn]

I am facing same problem,
It is an inconsistency between & font sizes in the responsive view.

I tried to use fontSize="h1.fontSize" still not working same as per the Typography.

import { ThemeProvider, responsiveFontSizes } from "@material-ui/core/styles";
typography: {
h1: {
fontSize: '5.6rem',
}
}