Although browser zoom works well when defining font sizes in px, it won't scale typography when using global font size adjustments in the browser (or 'font scaling'). And yes, people do change this setting.
Setting type in relative units such as rem or em works with both of these.
Crucially, this means that you can't use a non-relative unit anywhere in the tree. If you set a px value on the html, the use of rem has now become meaningless. You'll always reference that root, not the user's setting.
As a sidenote, the default value of browsers isn't always 16px. https://nicolas-hoizey.com/articles/2016/03/02/people-don-t-change-the-default-16px-font-size-in-their-browser
A general rule is:
“Should this value scale up as the user increases their browser's default font size?”
If yes, rem. Otherwise, px.
In practice that usually means rem for at least text size.
Using rem for something like padding can actually make things worse - as the font scales and [[20210201144247-line-length]] becomes shorter as a result, padding will get larger, compounding the issue.
em can be useful for things related to text. e.g. vertical rhythm ([[20200314213706-flow-containers]]), margin on headings, text containers, etc.
https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/
https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/ https://nicolas-hoizey.com/articles/2016/03/02/people-don-t-change-the-default-16px-font-size-in-their-browser/ https://adrianroselli.com/2019/12/responsive-type-and-zoom.html https://joshcollinsworth.com/blog/never-use-px-for-font-size https://medium.com/@vamptvo/pixels-vs-ems-users-do-change-font-size-5cfb20831773 https://www.smashingmagazine.com/2023/11/addressing-accessibility-concerns-fluid-type/