Coding Newbie

css units px em rem

CSS Units Quick Guide: PX vs EM vs REM

When you start learning CSS, the default unit for font-size, width, height, and all size related properties in general, are declared in pixels (px). However, CSS is offering us many other options, with two quite useful CSS units when it comes to declaring font-size: em and rem.

Which one should you use? Let’s take a closer look at each option first.

What is px?

Pixels are the basic unit and the most commonly used unit size. Px is a unit of length roughly equivalent to the size of a single dot that may be seen without effort by the human eye.

In fact, it is considered to be as small as possible. Pixels are simple and easy to use.

However, it is not a scalable, but rather an absolute unit. If we use pixels in our web page, when the user decides to zoom or change default settings on his device regarding font size, nothing will happen. Increasing font size on his device will not affect the font size on our website, as we used pixels, the absolute unit. This kind of solution for font size may result in low quality user experience.

What is em?

Unlike px, em is a relative type of unit. One em is equal to the computed font-size of the element’s parent font size.

This means that when the parent element font size changes, the font size of the element changes automatically.

For instance, if we have a div element with the font size of 16px, and a paragraph inside that div with font size of 1em, the paragraph sizes in pixels will also be 16px. Changing the div font size to 20px, reflects on a paragraph font size, which will also be 20px now. If the paragraph’s font size is 0.5em, the newly declared font size is 10px. If font-size isn’t specified explicitly, it will be taken from the parent element one after the other, right up until the root element.

Please see the following examples for clarification.

<div>
    <p>
        Paragraph Text
    </p>
</div>
div {
    font-size: 16px;
}

p {
    font-size: 1em;
    /* paragraph with font size of 1em, will have the exact font size of the parent element, which will be 16px in this case */
    /* changing parent's font size, will reflect the paragraph font size */
}
div {
    font-size: 16px;
}

p {
    font-size: 0.5em;
    /* paragraph with font size of 0.5em, will have the exact font size of the parent element, which will be 8px in this case */
}

When we look at the em unit, the calculated pixel value is determined after taking into consideration inherited (parent and grandparent) values for font size.

However, if the element’s font size is declared in px, than any other property value which is set in em unit, will derive from the styled element’s font size. This is extremely useful when setting margins and padding, especially when it comes to styling navigation items and buttons.

<div>
    <button>Click Here</button>
</div>
div {
    font-size: 16px;
}

button {
    font-size: 20px;
    padding: 0.5em;
    /* as the padding of a button is set to 0.5em, because the element's font size is determined, it will not take into consideration the parent's font size */
    /* due to this, the padding of a button will not be 8, but 10px (0.5 *20) */
    /* changing the button font size, will affect the padding, which makes the element's styling more dynamic and easier to change*/
}

What is rem?

Rem unit is also a relative unit type. In contrast to em, rem is not relative to the parent element, but relative to the root, html element.

If font-size is not specifically declared in the root element, 1rem will be equivalent to the browser’s default font-size (which is usually 16px). Changing default root font size, will transfer throughout the page and 1rem will have a different value expressed in pixels.

<div>
    <p>
        Paragraph Text
    </p>
</div>
html {
    font-size: 20px;
}

div {
    font-size: 10px;
}

p {
    font-size: 2rem; /* = 40px */
}

As seen in the example above, rem unit is not behaving as em. It ignores the parent font-size, but takes the root, html element font size into consideration.

The Compounding Effect

Important difference to keep in mind when it comes to em and rem, is the so-called compounding effect, or the effect of inheritance.

When numerous elements are used one within the other, and declared font size is in em units, this leads to compounding of font size.

Let’s examine that effect in an example.

<section>
    <div>
        <p></p>
    </div>
</section>
section {
    font-size: 10px;
}

div {
    font-size: 1.5em; /* = 15px */
}

p {
    font-size: 2em; /* = 30px */
}

If you take a more detailed view on the code above, you will notice what is in fact a compounding effect. A div element has 1.5em font-size, and it will reflect parent’s font-size, which is 10px. So, our div element will have a font-size of 1.5 * 10 = 15px.

However, a div’s child element, a paragraph, has a determined font size of 2em. It will not reference on section’s font-size, but on the font-size of it’s parent, which is a div in this case. So, a paragraph font size will be 2 * 15 = 30px.

Compounding effect sometimes can result in complicated problems with design. As the result of these potential problems, a rem unit was created.

Using rem units allows us to avoid the compounding effect of font size. There are no surprises with rem because everything is constantly and consistently dependent on the font-size of the root element. The same is true for values other than font-size (margin, padding, etc.). Using rem units on those will always keep the font-size of the root element in mind.

Which one to use?

In accordance with the need to create websites that are user friendly and responsive to different screen sizes, it is a modern practice to use relative units, such as em and rem.

Which one of these you will use, it actually comes down to a personal choice. There is no general consensus which unit is superior, some developers like to use em units and the benefit of compounding, other ones prefer rem units and the consistency.

On the other hand, there are cases when using absolute unit such as px is a better option.

It all depends on what unit behavior better suits your design. I myself for instance, prefer using ems for margins and paddings, and rems for font size.

Conclusion

Building a website is often an overwhelming task, which costs you a lot of time and energy. Taking that into consideration, picking a proper unit can have a great impact on your website building and maintance.

From the perspective of making your website easily maintainable, I believe rem is the best option to achieve that goal.

However, other units are also quite useful, em especially for paddings and margins of buttons and navigation menu items.

Which unit you will use, depends of your personal preference and the desired effect on your styling.

In order to get better control over styling elements, it is vital to get better grasp over CSS selectors. This is available in the article “What Are CSS Selectors And How Do They Work?“. You are more than welcome to read it and leave a comment.

Leave a Comment

Your email address will not be published.

%d bloggers like this: