When to use rem, em, or pixels

When we start studying web development, particularly the concepts of CSS and the use of measurement units, it’s normal to have some doubts about the three main units presented to us: px, rem, and em.

My doubts began when I started studying and creating components in ReactJS. It’s not always clear when to prefer one unit over another, so here is a brief explanation of each unit’s concept and the best time to use each.

What is the Px Dimension?

It’s important to clarify initially that the pixel we use in CSS is not exactly the same as the physical pixel. CSS defines what we can call a reference pixel, which measures the size of a pixel on a 96dpi screen. When we specify the pixel unit in a project, the agent using the value assigned will rescale it to its unit that corresponds to the reference pixel.

Moreover, the pixel is an absolute and non-scalable unit. Changing its value does not affect other absolute unit values; that is, the pixel value remains unchanged even after user settings.

What is rem?

Unlike pixels, rem is a scalable and relative unit. It varies according to the root dimension of your browser (by default, this unit is 16px), so 1rem = 16px most of the time. It can vary if the root font size is changed.

Below, you can see that the root font size in Chrome is set to 16px.

To convert pixels to rem, you can manually calculate it with a basic division:

To create an element with a size of 32px, divide 32px by 16px = 2rem. Alternatively, you can use ready-made applications for this conversion:

Here is a simple application I developed for converting px to rem or vice versa - Access here

The big question is, if rem is essentially a model that converts pixels to another scale, what’s the difference in the code? If the user doesn’t change their root font size, there is no difference since pixels and rem will have the same value. However, for those who change the root size for better accessibility, all elements sized in rem would change proportionally.

It’s important to remember that when zoom is used in a browser, pixels scale correctly, but user default settings’ unpredictability forces us to use methodologies that cover all configuration variations.

Small Tip on Using rem

We can use a small trick to simplify the use of rem and its conversion. It involves changing the font-size value of html to 62.5%, which equals 10px, and setting the body value back to 16px:

html {
  font-size: 62.5%; //10px
}

body {
  font-size: 1.6rem; //16px
}

This way, 1rem = 10px, making the conversion much simpler since you only need to divide the pixel value by 10 to get the rem value.

Read more here

What is em?

The em is also a dynamic unit, but its reference is not the browser’s root value. According to w3Schools, em equals the calculated value of the font-size property of the element it is used in, often the element’s parent. A brief example: an element with a font-size of 2rem (32px if we consider the root value) has a child with a font-size of 1em, so the child’s value will be 32px, as the reference value in this case is the parent.

When to Use Each One?

Pixel (px)

Primarily for fine adjustments or small margins. You can use pixels to define border thickness, for example, or for precise positioning of an element with absolute positioning. This will not break your layout when changing the root of a browser.

rem

You can use rem throughout your project; it’s great for keeping things accessible and adaptable. Use tools that help with formatting. In VSCode, for example, there’s px to rem that can make conversion much easier. Also, always comment next to a rem dimension with its pixel equivalent for future code changes:

body {
  font-size: 1rem; //16px
}

em

It’s a great alternative for padding, line heights, and margins. A practical example is a section with text elements. Using em to size line heights will make the display of elements more dynamic if the layout view changes.

Start practicing the use of these three units in your projects whenever possible and see how they behave with changes in root size. Your code will be much more elegant and your project much more beautiful.

References:

Sizing in CSS: px vs em vs rem
Why Designers Should Move from px to rem and How to Do That in Figma
CSS3 Values and Units
Should I Use px or rem Value Units in My CSS?