Should I be using rem or px?

The TL;DR is, use rem when things should scale proportionally and px when it should remain fixed. However, you probably want everything to scale proportionally. As that's how we create a responsive website. Let me explain...

Rem

Firstly, what is a rem? Rem stands for 'root element's font size'. As in, the font size specified for the css class for 'html'. Inside of every browser you can dictate what the root size of fonts should be. By default that's 16px, but you could increase or decrease it at your leisure. But why would you? Check the accessibility section below

Pixels

px is short for pixel and theoretically represents a single pixel on your webpage (CSS actually defines a 'reference pixel' then the user/device rescales it accordingly). It's a fairly intuitive length to understand as 10px is well... 10px. Whereas say 10 rem becomes a calculation - 10 rem, 10 x root font size, 10 x 16px (by default) = 160px.

Accessibility

The key reason to implement rem sizing over px comes down to accessibility. Given that a visually impaired user is reading your website, they should be able to read the text with ease. However, if the root font size is 16px that may prove difficult for them. So how can they navigate this situation? They have two choices, one is to zoom in on the web page, the other is to change the root font size in their browser (i.e. change what 1rem equals).

However zooming in on every web page is cumbersome. Imagine having to zoom in on every single web page you visit? Not ideal. So changing the default root font size is a more pragmatic answer, as it applies to all websites the browser visits. However if you've used px sizes for all of your fonts then the text isn't going to become any larger. As it's set to a fixed px size. That's where rem saves the day. Given that the user has changed the root font size and that you've implemented rem across font sizes, the text will scale as required. Choice!

It's worth noting that in order to meet WCAG standards, "Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality".

But what about containers? Should containers use rem too? Or is it only font sizes?

Unfortunately, that depends. Should this container scale? Or should it be fixed? Josh Comeau brilliantly covered this in his article around pixels and accessibility. He recommends that you use your intuition and try it out manually. Set your browser's default font to something larger and see what the user experience is like. You can ask yourself two questions, if you were a visually impaired user 'can I read it?' and from a UX/design perspective 'does it look right?'.

Some small notes to aid you,

• containers should increase in width/height to keep text readable,
• however gutters and spacing horizontally should probably stay fixed. As if margins continued to scale sentences would become squished.
• Although vertical spacing should scale with the increase to keep functional breaks between sentences.

What are CSS frameworks doing?

Tailwind, a CSS giant in modern web uses rem values extensively. Their breakpoints are set via rem, so are their font sizes, heights, widths and much more. They've leaned into using rem heavily by default. This does seem to be the ideal approach, although as noted above some edge cases aren't served by this all on rem approach. Thankfully breaking out of the tailwind defaults is as simple as using 'arbitrary values'. In tailwind we apply a margin of 1rem via writing "m-4", to use px values over rem we just write "m-[16]". Simple as!

Bootstrap, a long standing and never dying framework that does more than just CSS also by default relies heavily on rem. With the above example for a horizontal margin you write near identical CSS "m-3". Bootstrap uses customisable a '$spacer' variable to determine spacing values against their fixed calculations

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

In order to get around this limitation and set a fixed px value you'd need to either write a custom CSS class, or utilise inline styles instead.

It seems that the modern web has heavily shifted in favour of using rem everywhere. Bootstrap swapped over from their v4 release in 2018. Tailwind has been rem-first since it's first commit. So it's safe to say we're in a rem world.

Conclusion

So to answer our question, Should I be using px or rem? It depends, but you probably want rem more often than not. The CSS framework landscape backs that up too.