Stop using pixels in your CSS (and what to use instead)

DanielNovember 28, 2022

This article explores why using px in our CSS (especially for font sizes) is not a great idea and we should use relative units like em or rem.

Why do we tend to overuse px in CSS?

Let's first try to estimate what is the root of the problem. Why do we use so often use px in our CSS code?

Well, a first idea may be the fact that we receive the designs in px or pt. So easy to blame this one on the designers :))

But the main reason I think we tend to overuse the px unit is that we think it's such an easy concept to process: "oh, so my screen resolution is 800 x 600px therefore if I make this H1 of 80px it will be that 10% of the height of my screen."

It looks simple and convenient. Intuitively, we think we understand this unit, however, it may lead us to unwanted results.

Why using px can cause problems?

The biggest issue with using px in our CSS are the font sizes and accessibility.

A user can set their preferred font size for the browser. A bigger or smaller font size based on their vision needs.

However, if we use px values in CSS font sizes we will override the preferred size that comes from the browser:

body { font-size: 20px; }
/* this will override the preferred font-size set in the browser*/ 

Also, the px units in CSS are not mapped to the old hardware pixels. As the w3 consortium states:

"Note: If the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels."

Long gone are the days we could see the actual pixels on the screen. Now we have different pixel densities, retina displays, we can zoom, and much more.

Therefore a px in CSS is not the same as a px hardware screen, so we can get some strange sizes for the elements.

And there goes our initial reason to use px, the ease of use.

What to use instead of px?

Instead of using an absolute value in px, we should use relative units like rem or em.

The main advantage of using rem is that rem is the base value of the body font size. So, if we say:

body { font-size: 18px; } 

Then:

p { font-size: 2rem; } /* 36px */

This means that we can change the font-size in the body and that change will be reflected in all the elements that use rems

And even better, if we don't declare any value for the body font size then the preferred font size of the user will be used.

By default, one rem is approx 16px.

1 rem = 16px 
/* if no other changes are done */

The em units are values relative to the size of the parent container. Wrote this article about what is the difference between rem and em units.

Should I never use px in my CSS?

Actullay yes. It's ok to use pixels for pixel-based things. Borders are a great example of this:

h1 {
    border: 1px solid red;
}

You may also be interested in reading more about CSS units like vh, vw, vmax or vmin.