What is the purpose of the fontSize theme setting when all typography variants are `rem`?

Question

The documentation for Material UI Typography settings (https://mui.com/material-ui/customization/typography/) are confusing and don't really make sense:

MUI uses rem units for the font size. The browser element default font size is 16px, but browsers have an option to change this value, so rem units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance.

To change the font-size of MUI you can provide a fontSize property. The default value is 14px.

So which is it? It uses REM or use the font-size as a base for the typography variants? If you look at the default theme (https://mui.com/material-ui/customization/default-theme/?expand-path=$.typography) all the variants are supposed to use rem -- and the documents even talk about customizing this value in htmlFontSize.

So I'm really struggling to understand the use/purpose for the fontSize theme setting?

Answer 1

The typography.fontSize and typography.htmlFontSize values are expected to be in pixels but those pixel values do not get put directly onto the page. Instead, the material ui code will take the pixel value and calculate a corresponding rem value. That rem value is what gets put into the css class, and thus rendered by the browser. By using rems as the final value, the user's browser settings can change the final size

The equation they use for this calculation is show in the article:

computed = specification * (typography.fontSize / 14) * (html fontsize / typography.htmlFontSize)

Example 1: everything is set to its defaults, with typography.fontSize set to 14, typography.htmlFontSize set to 16, and typography.h3.fontSize set to "1.2rem". You then render a <Typography variant="h3">. In that case, the calculation would be:

computed = 1.2rem * (14 / 14) * (16 / 16)

This works out to having a size of 1.2rem, and that's what will be put into the css class.

Example 2: You now changed typography.fontSize to 12, typography.htmlFontSize to 18, and typography.h3.fontSize to "1.5rem". With those values, the calculation will be:

computed = 1.5rem * (12 / 14) * (16 / 18)

This works out to about 1.143 rem.

In practice, if you want to change all your fonts to be bigger or smaller, change typography.fontSize; each variant will scale based on that. If you want to change a specific variant to be bigger while leaving the rest the same, then modify typography.[variant].fontSize. I don't see a reason you would want to change typography.htmlFontSize, but that knob is available if you need it.