PX or REM in CSS? Just Use REM

Isn&#x27;t a lot of this somewhat moot with PX being a defined thing in browsers that isn&#x27;t necessarily pixels? Per <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Glossary&#x2F;CSS_pixel" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Glossary&#x2F;CSS_pixel</a><p><pre><code> The term CSS pixel is synonymous with the CSS unit of absolute length px — which is normatively defined as being exactly 1&#x2F;96th of 1 inch.</code></pre>

I&#x27;m not buying the font size argument at all. When you zoom in or out on a webpage, your base font size isn&#x27;t changed, the whole page is zoomed instead, making this whole discussion moot. I would wager many (most?) nontechnical users don&#x27;t even know they can change the base font size.

The author&#x27;s website sets a root font size of 18px. That completely eliminates any benefit you may have by using rems &quot;for accessibility&quot;. Setting the root font size with an absolute unit completely overwrites the users&#x27; font size settings. Even the ones that the author mentions in the &quot;The Real-real Problem&quot; section. If you really want to change the root font size, you probably should use the `em` unit. It will be based on the users&#x27; settings.

If the solution actually was &quot;just use REM&quot; there&#x27;d be no point, as you could create a browser setting that does px-&gt;rem on all pages, as this is how the font is scaled in the first place.<p>This article is part of the problem; accessibility is not just a matter of ticking boxes with a &quot;she&#x27;ll be right&quot; mentality so you can claim you support accessibility even though you&#x27;re not doing it in a caring way that addresses users needs.<p>If you really care about accessibility you&#x27;ll be using REM where it makes sense (fixing padding&#x2F;margins that surround text), and not just by default like the article suggests.

It’s odd how they seemed to know the difference between browser zoom and font size settings, but came to that conclusion<p>You should only use the unit that scales with the font size setting for font size related properties. That’s font-size, line-height, and letter spacing

Yeah hard disagree.<p>Having fixed px values doesn&#x27;t mean the page is less accessible. For sufficiently complex layouts you will always have to mix px, em, and rem.<p>Examples of things that should not scale with the root font size and usually set with px&#x2F;em are layout elements like headers, footers, etc. as well as components like buttons, labels, icons, etc. Those should only scale with screen size so the page doesn&#x27;t turn into an incomprehensible mess.

<a href="https:&#x2F;&#x2F;www.joshwcomeau.com&#x2F;css&#x2F;surprising-truth-about-pixels-and-accessibility&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.joshwcomeau.com&#x2F;css&#x2F;surprising-truth-about-pixel...</a> is a better breakdown, it&#x27;s nuanced.

I think this is pretty common knowledge anyway. It&#x27;s rare to see anyone use px anymore, but I know for a fact the GitHub Blog does, and uses @media queries for mobile&#x2F;desktop versions. Not sure what the reasoning is there.

I prefer to use REM, but I have experienced the following relatively frequently: large organizations in which the developers are somewhat uncomfortable with REM and as such use a converter function that turns your 1.2rem into an absolute pixel value as part of the build - surprisingly enough one place I worked at did this and also mandated that everyone should use rem which caused me to consider the expert they had consulting there that made this rule didn&#x27;t actually understand the purpose of rem.<p>that said - rem with functions such as clamp, min, and max would seem to me to be problematic as it would be extremely difficult to understand all the potential effects it would have, since I think these functions, clamp especially are the most important for handling responsive displays I would probably drop the rem usage for anything but fonts.<p>Actually maybe even for fonts, if you increase the size of your base browser fonts from 16 to 18, it and h1 is specified as 1.5 rem it might be that the user wants most text on page - paragraphs etc. to be 18px but don&#x27;t really want headings to be bigger than 24px. Also as clamp allows you to specify text size of an area fluidly based on container size this also seems to me as a better solution to most problems people will experience.<p>Unfortunately changing a single setting is too reductive to really help.

This is probably not for every website, but an interesting trick is to set your root element font size to 1vw, which is 1% the width of the viewport.<p>Then size everything using rems, including the width of your layout. The whole design scales with the width of your browser.

I don’t get it. I am semi visually impaired and often use command +&#x2F;- to increase the font size, and on iPhone, use the reader viewer view for websites. Rems are terrible to use in CSS because they stack relative to their parent, making components non-portable and required hacks to undo parent sizing. Is default font size that prevalent that it’s worth the crappy units?