Issue with "font-size": recommend to users not to set font-size with "em" units

[queengooborg]

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

A user in the MDN Web Docs Matrix room commented about how the mdn/css-examples repo defines its body font sizes with the em unit (that is, the interactive example at the top of the page).

Using em to define a font size isn't a good practice, because ems are based upon the font size -- in other words, this is setting a font size to...well, relative to the parent's font size. On the body, this isn't as big of an issue, but say you set font-size: 1.25em on something like div, which can have many children: now, each child div is going to have a font size of 125% relative to its parent's font size, creating a constantly-growing font size.

I think that the example shouldn't include an em as one of its default options, especially not as the first option. I also think that we should update the MDN page to include a note at the top to state as such and add a section to explain why.

I found a video that explains why to avoid ems as a font size, which I used as a reference for this.

MDN Content page report details

• Folder: en-us/web/css/font-size
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/font-size/index.md
• Last commit: 4264855
• Document last modified: 2022-02-18T11:38:26.000Z

[wbamberg]

@queengooborg when you say:

the mdn/css-examples repo defines its body font sizes with the em unit.

...are you referring to the interactive example at the top of the page?

[queengooborg]

Yes, I'm referring to the interactive example at the top of the page!

[Josh-Cena]

We already fully explain the em compounding pitfall on this page (from the very start) and mdn/interactive-examples#2604 fixed the example. I'll consider it done.