Convert to rems during render

[siddharthkp]

Authoring styles on a scale removes the need to think in units, but we should recommend folks to define their themes with rems instead of px (including the default themes) so that we make sure the result is accessible :)

[ankibalyan]

we can do it by converting our base font to 10px and with that calculation will also become easier for rem units.
We can set body size as 10px in % so that it respects browser's zoom-in zoom-out functionality. to do so.

body {
  fontSize: 62.5%; // 10/16 = 0.625
}

so this will be conversion afterwards.

5px = 0.5rem
10px = 1rem
25px = 2.5rem

reference: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

[ankibalyan]

Open for discussion, let me know if you've something else in mind.

[ankibalyan]

Another reference from Material-UI, they suggest this change from theme creation utility function.
https://material-ui.com/customization/typography/#html-font-size

[oliviertassinari]

@ankibalyan you can look at the history of this MUI markdown, I think that we link an older article about the topic, maybe from 2011.

[ankibalyan]

@oliviertassinari sorry, I did't see any old article. can you please link it.
I just checked this one, and here is the diff that you've committed link mui/material-ui@d798533