Px, rem, and em CSS units: Their subtle differences
Rem, Em, and Px are some of the most used units of measurement in CSS. Two out of these three units are referred to as relative CSS units. Read on to understand when to use either px, rem, or em while styling web applications using CSS.
Written By
Akande Olalekan ToheebFront-end Developer | Technical Writer | Cloud Practitioner
Reviewed By
Harrison IfeanyichukwuStaff Software Engineer
Building a responsive web application requires a great understanding of CSS. The areas of element dimensions, positions, spacing, and typography are reflected in measurements; thus, the need to understand CSS measurement units and their correct usage.
There are many other units of measurement in CSS, but for most use cases, the px, rem, and em units would do just fine. This piece will teach the differences between px vs. rem vs. em CSS units and their correct usage.
Before getting started, it is important to understand the two types of CSS measurements or units:
- Relative measurements - also known as Relative CSS Units.
- Absolute measurements - also known as Absolute CSS units.
Absolute CSS Units
Absolute CSS units are CSS measurement units that are used to specify a fixed measurement value. An absolute CSS value stays fixed irrespective of the device display size, pixel density, and zoom levels.
Examples of absolute CSS units are cm, mm, in, px, pt, and pc. Absolute CSS units should be used when the value size of the styled property of the element must be fixed at all times.
Absolute CSS Units are commonly used for giving an element a dimension. Such as setting the element's width and height properties, paddings, and margins.
Relative CSS Units
Relative CSS units express an element's property value relative to another element's property value. The browser performs some computations to get the final property value when performing painting. Relative units make comparison and measurement calculations easier.
Because of their relativity, Styling with relative CSS units, in most cases, makes the web application adapt to the screen's zoom level and pixel density.
Examples of relative CSS units are em, ex, ch, rem, vw, and vh. Relative CSS units should be used when the value size of the styled property of the element must vary based on the value of a parent element or window.
Px vs. Rem vs. Em CSS units
CSS units are numerous, and each has its use cases. The most used CSS units for styling common CSS properties for the web are px, rem, and em Units. When should a developer use one of these CSS units? Can these CSS Units be used interchangeably? These and many other questions about these three CSS Units are answered in the following sub-sections.
The Pixel(px) CSS Unit
Computer display units are measured in pixels. The smallest unit of a computer screen display is called the pixel. All relative CSS units are resolved back to a pixel value.
The px CSS unit represents a point in the visual dimension of a computer display. The pixel size will change depending on the screen resolution and the distance between the screen and your eyes.
In a nutshell, A pixel represents the smallest point in a digital image display. When used, the CSS px unit expresses a fixed measurement value. The value is resolved immediately and applied to the HTML element as written out, unlike relative units.
That said, the CSS px unit should be used when a fixed value is desired on an element's property, such as for styling an HTML element dimension properties - width, height, padding, and margin.
<style>
h1{
text-align: center;
}
p{
font-size: 16px;
}
</style>The Rem CSS Unit
rem CSS unit is a relative unit. It is a CSS unit that measures the value property of an HTML element in relation to the font size of the root HTML element.
Nrem = N x (font size of the root element in pixels)
The root element in an HTML page is the HTML element. One common and recommended usage of the rem CSS unit is for styling elements' font-size property.
In a webpage or application where font sizes are styled using the rem CSS unit, it is possible to scale up or scale down the webpage's fonts by simply changing the base font size of the root HTML element.
The root font size is the default font size specified either by the user in their browser settings or the font-size value defined on the html element by the developer.
The default font size of web browsers is usually 16px but can be changed on the OS level by the device owner.
Resolution of CSS Rem values
Rem values are resolved against the pixel-resolved font size of the HTML root element. The resolved rem value is equal to the rem value multiplied by the pixel-resolved font size of the HTML element.
Nrem = N x (font size of the root element in pixels)
html {
font-size: 16px;
}
p {
font-size: 0.5rem
}
/** the final font size of all p elements in the page would be 16 x 0.5 = 8px */The Em CSS Unit
Like the Rem unit, the CSS em unit is relative. It is a CSS unit that measures the value property of an HTML element in relation to the element's immediate parent node.
Nem = N x (font size of the element's parent node in pixels)
The root element in an HTML page is the HTML element. One common and recommended usage of the CSS em unit is for styling elements' font-size property when it is desired for the element's to be a little smaller or bigger than the surrounding text.
An example of the usage of CSS em unit can be seen in the visual representation of the HTML sup and sub elements. The element would scale according to the font size of its parent element.
The main difference between the Rem. Vs Em. CSS units lie on the target node on which the final resolved value is calculated. While Rem values are relative to the root element, em values are relative to the parent element.
<html>
<head>
<style>
html {
font-size: 100%; /** equaivalent to 16px in most browsers*/
}
#container {
font-size: 20px
}
#container > p:first-child {
font-size: 1.5em;
}
#container > p:nth-child(2) {
font-size: 2.5rem
}
#container > p:nth-child(3) {
font-size: 50px
}
</style>
<head>
<body>
<div id='container'>
<p>resolves to 30px i.e 1.5rem x 20px of parent element = 30px</p>
<p>resolves to 40px i.e 2.5rem x 16px of root element = 40px</p>
<p>50px resolves to 50px as it does not depend on anything</p>
</div>
</body>
</html>Result: Display of font-size variations in CSS Rem vs Em vs Px
The result above shows that the first paragraph in the div container with a set font size of 1.5em has a resolved font size of 30px after it got computed relative to the parent container's font size.
Likewise, the second paragraph in the div container with a set font size of 2.5em has a resolved font size of 40px after it got computed relative to the HTML root element.
Lastly, the third paragraph in the div container with a set font size of 50px has the same 50px since the CSS px unit is fixed.
Conclusion
Accessibility and text eligibility are big parts of web design; hence, the need to understand the implications of using a given CSS unit.
It is a best practice to adapt an application's base font size to the user's default font settings by using Rem and em CSS units when styling the font-size property of elements. This ensures that the application is readable to every user.
Another additional benefit of using the Rem and em CSS units is Maintainability and scalability. It becomes easier to maintain and scale the application's font sizes by simply changing the base font size of the root element or parent element respectively.