Must-Know CSS Length Units: px, em, and rem

An explanation of 3 confusing CSS font-size units

Photo by Pankaj Patel on Unsplash

In order to make your page responsive by the size of width or height, you should consider use percentage (%) — probably. When many designers work with front-end developers, they give the developers the percentage units, at least from my own experience.

But there are more useful units, not only for responsive websites but also to make framing your elements in the right position easier.

The Meaning of Length in CSS

In CSS, the values you put into the DOM elements, such as 17px for the width, are internally called length values. But what does it mean? In CSS, length refers to the distance value.

For example, for width, length means the distance of the content box from the left square side to the right. For font size, length means the distance of a letter from its left side to its right side.

So, the easy summary is that length in CSS basically means the distance of some object, which could be font-size or width, from its start position to its end position. We represent that size with px, em, or so.

What Is px?

I’m going to try to explain this a little more deeply with some interesting stories.

You can check your computer monitor’s resolution in the settings tab, as long as you use Mac. Here’s the resolution status of my monitors, Retina 13-inch, Retina 15-inch, and LG 27-inch. Can you see all the different numbers within the parenthesis, such as 2560 x 1600? Those numbers represent the resolution by width-pixels x height-pixels.

Retina 13–inch / Retina 15-inch / LG 27-inch monitor resolutions

But in Chrome, the width of the full-size window doesn’t show you the same pixels as your Mac settings tab showed you. For example, my full-size Chrome window width in a 27-inch monitor is 1920.

Check out this awesome video about pixels: “What are pixels and how do they work?”