Search

CSS Fixed and Relative Units of Measurement for Font-Size

    Ankita Raikundalia
Listen to this article

Units of MeasurementFor 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;

[pre]body
{
font-size: 16px;
}
h1
{
font-size: 30px;
}
h2
{
font-size: 26px;
}[/pre]

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.

[pre]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>[/pre]

Thus using em, allows you to define element properties, in proportion to the parent element.

[space]

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:

[pre]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>[/pre]

Additional nesting would keep on increasing (or decreasing) the font-size.

[space]

%: 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).

[pre]p
{
font-size: 10px;
}
p
{
/* line-height: 15px; */
line-height: 150%;
}[/pre]

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:

[pre]<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>[/pre]

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:

[pre]p{
font-size: 16px;
font-size:1.6rem;
}[/pre]

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?

[space]

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.

Picture of Ankita Raikundalia

Ankita Raikundalia

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads