A short guide to units of measurement with CSS

Units of measurement... What a huge topic! A subject that can be a bit confusing when you start but is nonetheless essential when embarking on our projects. In this short guide, let's discover together everything you need to know about measurement units in CSS.

"Old-school" Measurement Units

Among all the measurement units available to us, we have the good old traditional units, used for decades:

• px - to specify a size in pixels;
• % - to specify a dynamic size in percentages;
• cm - to specify a size in centimeters (yes, it's possible);
• in - to specify a size in inches (they thought of our American friends).

These are the main ones.

Note that it is discouraged to use the cm and in units and it is recommended to favor the px and % measurement units (regarding traditional measurement units – we will see later that there are more interesting units).

All these units are compatible with all CSS properties that can accept a size in pixels, such as for example:

margin: 5px;
/* or */
margin: 5%;
/* or */
margin: 5cm;
/* or */
margin: 5in;

Of course, all these values do not give the same size.

1 in = 2.54 cm = 96 pixels

So, when you specify 5 in, you will have a size of 5 x 96 pixels, which is 480 pixels. A size much too large most of the time. This is why the measurement units in cm and in are discouraged; they are not precise enough.

The pixel (px), centimeter (cm), and inch (in) units are all absolute measurement units, which means that a value of 1 pixel will always correspond to 1 pixel on the screen. In other words, we will never be surprised because a text that is 16 pixels will not have a different size depending on where it is located. This is very different from the measurement units em and rem.

The Case of "em" and "rem" Measurement Units

Now that we have thoroughly reviewed the "traditional" measurement units, let's take a look at the em and rem measurement units.

These two measurement units are very often sources of confusion, and for good reason: at first glance, they do exactly the same thing... Until the day we realize that the size we expected is not the one we see in our project.

But then? What's the difference between em and rem?

We'll give you a little hint... Because we like you a lot. 😊

rem stands for root em.

Well, that doesn't help you, does it? So, let's explain a bit about what happens when we use the em unit to understand why the rem unit is interesting.

.title {
    font-size: 3em;
}

In the example above, we declared a size of 3em. Imagine we use this .title class on a paragraph.

<p class="title">My main paragraph</p>

Do you know what pixel size corresponds to 3em? The correct answer is 48. Yes, 48 pixels.

If we assume that the base size of the element is 16 pixels, then 1 em = 16 px. So, 3 em = 3x16 = 48 px. Yes, we do the math.

Now, let's say we want to wrap our paragraph in a main tag and say that the text is 10% larger with font-size: 1.1em.

<main>
    <h1 class="title">My awesome site</h1>
</main>

main {
    font-size: 1.1em;
}

.title {
    font-size: 3em;
}

Do you know what pixel size corresponds to 3em for our title? 48? You would be completely wrong.

Remember: 1 em equals the base size of the element, but here, we inherit from the size of main, so our size is 10% larger at the base!

The base size will thus be 1 em = 17.6 px (10% of 16px gives 1.6px more). So, 3 em = 3x17.6 = 52.8 px. Our title is therefore 4.8 pixels larger than what we had at the base (10% of 48 pixels gives 4.8 pixels – the math adds up)!

We can therefore conclude that 1 em corresponds to the default size of the element we are on, the inherited size. Specifying that we want 1.1 em as a size on a title thus means that we want a title 10% larger than its inherited size.

Using the em measurement unit is therefore very effective, but it results in a small issue with inheritance regarding the base size of the element. Indeed, it's not very practical to juggle from one element to another with the em unit, because changing a parent tag's size will make the elements become transformed with larger or smaller units – which can cause some problems and make us lose flexibility.

For this reason, the rem unit was created. The fact that it stands for root em means that it will be based on the root element of your website, and not on the element it is applied to. Thus, 1 rem will take the value of the font-size property defined for your body or html tag. And don't forget that body and html also have a standard size defined in browsers, which generally equals 16 px (depending on user preferences).

If we modify the .title class by changing em to rem:

.title {
    font-size: 3rem;
}

Our paragraph and our level 1 title will both have the same size of 48 pixels (because 1 rem = 16px, so 3 x 16px = 48px)!

This allows us to have more flexibility and to specify sizes for all our elements based on the project's base size without worrying about modifying a h1 title to a h2 or a paragraph to a h5, for example.

Why Prefer em or rem Over px?

We have discovered: px specifies a fixed (absolute) size, whereas with em and rem units, we specify a dynamic size based on the user's browser settings.

But what does that mean? Why should we prefer em or rem over px?

By using em or rem instead of px, you allow yourself to base sizes on your user's preferences and their browser settings. A user who has difficulty seeing will want to go into their browser preferences to increase the size of the websites they visit. For that, they can specify a base size of 19 pixels, for example. This means that 1 em will equal 19 pixels instead of 16 pixels.

To make your site more accessible, it is therefore recommended to favor these units. However, rest assured: modern websites can also adjust sizes in pixels, so it's no longer a problem if you continue to use the px measurement unit.

The problem, on the other hand, is that by using px units, you lose flexibility and will have to modify sizes one by one when you want to reduce text size for responsive design (to ensure your site looks clean on all browsers and screens).

With the rem unit, you will simply need to modify the font-size property of the body tag, for example, and all texts will be reduced or increased according to what you want to achieve.

Therefore, prefer the em or rem unit as much as possible.

New Measurement Units (vh, vw, vmin, vmax)

Over time, other measurement units have emerged:

• vh - Allows you to specify the height of the viewport;
• vw - Allows you to specify the width of the viewport;
• vmin - Allows you to specify the minimum viewport;
• vmax - Allows you to specify the maximum viewport.

Let's start by looking at the vw and vh units together.

These two measurement units are similar: their only difference is that they depend respectively on the width and height of the browser, or rather the browser window (that is, without the browser's navigation bar).

• 1vh = 1% of the viewport height;
• 1vw = 1% of the viewport width.

We generally use the vh unit to specify a height to respect. For example, to make an element take up 100% of the viewport height, we used to do it like this:

html, body {
    min-height: 100%;
}

body .banner {
    height: 100%;
}

And we've only shown the shortest version; it's not uncommon to have to go through a large number of parent tags to specify the height of our element.

Fortunately, now, with the vh measurement unit, this problem is a thing of the past.

For example, here's what we can do now:

.banner {
    height: 100vh;
}

Our banner will thus be 100% of the viewport height; we don't need to specify anything else! As you have understood, the vw and vh units are very useful for defining dimensions based on the browser window without being constrained by the sizes of parent elements.

As for the vmin and vmax measurement units, we find exactly the same principle.

• vmin - Allows you to base on the minimum viewport size;
• vmax - Allows you to base on the maximum viewport size.

Isn't that very clear? Let's go through an example.

With vmin, we refer to the side of the browser window that is the smallest: if our site is displayed at 1500 px width and 1000 px height, then vmin will refer to vh (because the height is smaller than the width).

With vmax, using the same example, we will refer this time to vw (because the width is larger than the height).

For example, we can specify:

.title {
    font-size: 30vmin;
}

This will give us a size that corresponds to 30% of the smaller side: 30 vh if the height is smaller than the width, 30 vw if the width is smaller than the height.

The use of vmin and vmax measurement units is quite rare because they are interesting in few situations.

Generally, they are very useful for main titles, so that their sizes adapt to screen dimensions without being too imposing.

That's all we wanted to present to you about measurement units! You now know everything you need to know to use them. If you want to learn more about HTML and CSS, we have a complete training dedicated to these two programming languages. Also, feel free to share this article with your friends on your social networks. Thank you!