For quite some time now, web developers have debated about which units are better when setting values for length or size properties, such as width, height, font-size, padding, etc. With quite a few options available such as px, cm, em, etc, and the latest rem, it is important to have a clear idea of the advantages and disadvantages of various units. This would help us decide which units are the best to use, for certain use cases. In this article, we will highlight a few popular methods to set length and size properties.
px: Absolute Length Unit
The pixel units (px) is by far the most popular and probably the most used. It is the go to option when setting different values. It is important to know that px unit is not the same as a physical pixel. For any device, a reference pixel is defined based on resolution. The user agent scales px to match this reference pixel, and accordingly a size is set.
One would use px in a style-sheet as below;
body
{
font-size: 16px;
}
h1
{
font-size: 30px;
}
h2
{
font-size: 26px;
}Using px unit makes it very easy to set measurements, since calculations are pretty straightforward. Also, sizes are pretty consistent across all devices. That being said, units defined in px are fixed. Meaning, the element properties defined using px, will not be responsive by default. You will have to use media queries to make them responsive.
px had some usability issues in IE5 to IE8, (because users were limited from adjusting the size of the text), but this was resolved in IE9, when zooming was introduced.
em: Relative Unit
If only someone could answer what ’em’ actually stood for. With em, sizes are always relative to the parent element. This would mean, for the below example, if body is 10px, the font-size of h1 would be 20px and h2 would be 16px.
body
{
font-size: 10px;
}
h1
{
font-size: 2em;
}
h2
{
font-size: 1.6em;
}
<h1>This will be 10*2 = 20 pixel units.</h1>
<h2>This will be 10*1.6 = 16 pixel units.</h2>
Thus using em, allows you to define element properties, in proportion to the parent element.
But the compounding issue… For multi-level nested elements, em could potentially lead you to a compounding issue, where the size of nested elements, could get increasingly larger or smaller. For example:
body
{
font-size: 10px;
}
li
{
font-size: 1.2px;
}
<ul>
<li>Font size will be 10*1.2 = 12px.</li>
<li>
<li>Font size will be 12 (from parent li)*1.2 = 14.4px</li>
</li>
</ul>
Additional nesting would keep on increasing (or decreasing) the font-size.
%: Another Relative Unit
Percentage values are not units, but are used to define measurement properties. Percentage values are very similar to em units. The value set for a length or size unit using %, is relative to a property of either the same element, a parent element or that of the containing block. The resulting measurement unit is percentage times the value of that property.
For example, since line-height is computed based on font-size, in the below example, the line-height will be set to 15px (150% of font-size).
p
{
font-size: 10px;
}
p
{
/* line-height: 15px; */
line-height: 150%;
}Now, similar to em, percentages can also cause the same compounding issues.
rem: Relative Unit without the Compounding Issue
The rem unit is a computed value based on the size of the root element. And is best used when setting font-sizes. The root element, is one, which does not have a parent. In HTML, <html> is the root element. Since the size is not dependant on the parent, but on a fixed value defined in the root element, the issue of compounding is resolved.
Thus in our previous example for em, if html font-size is 10px, we would have:
<ul>
<li>Font size will be 10*1.2 = 12px.</li>
<li>
<li>Font size will be 10 (from root)*1.2 = 12px</li>
</li>
</ul>rem is supported by most recent versions of browsers. But as a fallback, a good practice to employ is, to define units in px, and then in rem. For example:
p{
font-size: 16px;
font-size:1.6rem;
}Older browsers which do not support rem will use px, whereas newer browsers will use rem. So then if you have to define px, is there any point to use rem?
Conclusion
For font-sizes, it is a good practice to use rem, because the major advantage you receive is an option to change all the sizes at once, by just changing the root element. For other length properties, like width, height, or padding, you could use px. It would save a lot of calculation time for you. It all really depends on what you would prefer. So which unit do you prefer?
Reference: CSS3 rem Units.
Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!
Leave a Reply