Pixels vs Em vs Rem vs Percent: When and Why to Use Each

If you did more coding than just writing “Hello, world!” with a regular font on a big, blank page, chances are that you’ve come across to these different measurement units: pixels, EMs, REMs and Percent. Over the years, much has been debated about these four coding units of measurement and when is the best time to use each. Despite the attempts of hundreds of web developers from all over the world to thoroughly explain the best practices of pixels, EMs, REMs and Percent, this topic is still utterly confusing for the simple reason that different projects are completed in different ways, using different measurement units.

If you’re looking for the long, thoroughly explained answer, keep reading as I’m going to explain as plain and simple as possible. But, if you’re looking for a quick answer just so you can resolve that old dilemma, let me help you:

• Pixels: versatile, yet not recommended for responsive websites as they’re not scalable;
• EMs: flexible and scalable unit which the browser translates into pixel values depending on the font size settings in your CSS;
• REMs: flexible, scalable and always relative to the HTML element;
• Percent: always relative to another value and suitable for responsive web designs

Pixels – When and Why

Before the (now) old trend of responsive web designs emerged, Pixels were the default choice for font sizing and everything else: from typography to padding and margin. One pixel dot equals one computer screen dot. Therefore, these fixed-sized units do not change when opened on a different screen, because they’re not scalable. Although it is not impossible to build a responsive website using pixels, sorting all those pixel values in your CSS can get pretty messy. But you can save yourself from trouble by simply using other, scalable measurement units, such as EM and REM.

EM vs REM – When Should You Use EM or REM?

You probably noticed that EM and REM are both flexible and scalable and are translated by the browser into pixels, so what’s the difference?

First of all, you need to know how the two of them are defined. By definition, EM is the unit of typography that is equal to the currently specified point-size and REM, (which stands for Root EM), and is a kind of an upgrade over EM, or a robust alternative to EM, if you will, used for same purposes. The obvious advantage of using EM and REM units is the flexibility they give to our web designs and the ability to easily scale up and down.

Both of these flexible units provide flexibility, but how can you know when to use EM units and when to use REM? Despite being incredibly similar and used for the same purposes, there is one big, crucial thing that sets them apart, which is how the browser determines the pixels value they need to be translated into. To learn when to use EM and when to use REM, first, you need to understand the major difference between both.

EM

As aforementioned, EM is a flexible and scalable unit that the browser converts into pixel values. For example, the default font size in Google Chrome is 16 px and that equals 1em. Many believe that EM is relative to the font size of the parent element, but actually, EM is relative to the font size of the element on which they are used. This unit is often used for headings, paragraphs, texts and other elements associated with typography, such as padding and margin.

REM

REM is relative to the font size of the HTML (or also known as the root) element. If you’re familiar with the world of web design or web development even a little bit, chances are you’ve heard of REM. The reason why REM is so popular is because it allows you to quickly scale your whole project by changing the root font size. Simple and efficient, REM is a widely used measurement unit by web designers and developers.

Percent – When and Why

The Percent unit is quite similar to the EM unit because it is always relative to another value. However, they still have fundamental differences. This unit is also used in responsive web designs and web document texts as well, as it is fully scalable and flexible just like the EM and REM unit. Also, the Percent unit is often used for the height and width properties of containers and divisions. To make myself clear why the Percent and the EM unit are similar, let me compare them.

EM vs Percent

As Pixels are not as suitable for responsive web design as EMs and Percent and they seem to be going out of practice, it is important to get a better understanding of these two widely used units. In theory, both measurement units are identical and used for the same purposes, but in practice, there are some important differences you need to consider. Although the EM unit is used for its scalability, in some cases, the text scales can be very rough and leave a bad impression on the user. In a worst-case scenario, the EM unit will make texts too small and nearly impossible to read.

The Percent unit, on the other hand, is much more reliable, more consistent and more accessible for users. When a user changes the default settings, the Percent unit makes the conversion much easier to the eye of the reader and it also maintains the visual design better.

I’m sure there are many of you who would challenge my understanding and my preferred approach. However, I hope I helped you to better understand the differences between EM, REM, Pixels and Percent units and now you have a complete picture of exactly how they all work. I would like to recommend you to try and use each measurement unit yourself because it’s the best way to see how they work in practical use. If you don’t like to Google much and would prefer the firsthand information from a front-end web developer on this topic, please feel free to contact me – I’d be more than happy to help you out!