CSS has a lot of different units that you can choose from. In many cases, there is one unit that’s clearly better than any others. However, one

PX or REM in CSS? Just Use REM

submited by

Style Pass

2022-12-03 20:00:27

CSS has a lot of different units that you can choose from. In many cases, there is one unit that’s clearly better than any others.

However, one question that seems to come up throughout my career is whether you should use pixels or rems on certain properties where it doesn’t seem to make a clear difference.

Pixels are an absolute unit, so when you set the font size to 24 pixels, it’s going to be 24 pixels. Rems, on the other hand, are relative units that are based on the document’s font-size. The document’s default font size is 16 pixels, so 1.5rems x 16px is the equivalent of 24 pixels.

The fact that rems are relative and they’re based on a default of 16 pixels makes them harder to work with than pixels. Which is why, more often than not, I see folks using pixels. But I think it’s a mistake.

In the past, there was some confusion around how retina or high-density displays affected pixels and pixel density. Without getting too far into it, there was a moment when pixels scaled weirdly, but that issue has since been fixed.