CSS units for font-size: px, em and rem

In this tutorial, we’ll learn different units to measure font-size in CSS i.e. px, em, and rem, their differences, and which one to use when.

Default font-size

Let’s understand the browser’s font-size first which is a key concept in difference between px, em, and rem.

Most browsers provide an ability to change the font-size from the settings. Default font-size is 16px, which user can always change according to their preference as below:

You can override the default font-size setting of the browser using CSS in this way:

html {
	font-size: 32px;
}

or

html {
  font-size: 200%;
}

Though it is not recommended to override default behavior of the browser otherwise it won’t honor user preference which is not a good idea.

PX

The pixel px is an absolute and fixed-size unit in CSS.

Pixels are easily translatable. For example using below CSS, font-size of p (paragraph) element will always remain 12px on all devices and screens regardless of changing the browser font-size setting, or any of its parent element’s font-size.

p { font-size: 12px; }

Although the size of a pixel isn’t always the same across devices and screens, means the actual width of the block having width: 120px on laptop is not same as on iPad.

What is the problem with px?

The problem arises, when user changes the default font-size of the browser say they want to see bigger font-size. In that case p (paragraph) element with above CSS will still be displayed as font-size: 12px since its an absolute value. User preference is not reflected which is not considered as a good user experience.

When to use px?

Pixel px is still a good choice for fixed layout measurement and fixed spacing (padding, margin, etc.) but not a good choice for flexible layouts and font-size measurement.

Alternate of px?

The em and rem are the relative (or flexible) units as oppose to px, which is an absolute (or fixed) unit. Both em and rem are translated by the browser into pixel (px) values, depending on the default font-size setting of the browser. Say, if browser’s default font-size is 16px, then

1em = 16px;
1rem = 16px;

EM

The em unit is relative to its direct or nearest parent element.

If font-size is not defined explicitly, that element will inherit it from the parent element. The inheritance continues to take place this way amongst ancestors up until the root element. Default font-size of the root element is provided by browser.

When to use em?

1. Nested Structure

We can use the em where you want to apply font-size relative to the parent element such as menu structure.

<style>
.menu-container {
  font-size: 100px;
  border: 1px solid black;
}
.menu-item {
  font-size: 0.5em;
  padding-left: 20px;
}
.menu-item::before {
  content: '▾'
}
</style>

<div id="container" class="menu-container">
  <div id="menu" class="menu-item">
    Menu
    <div id="submenu" class="menu-item">
      Submenu
      <div id="subsubmenu" class="menu-item">
        Subsubmenu
      </div>
      <div id="another_subsubmenu">
        Another Subsubmenu
      </div>
    </div>
  </div>
</div>

We see that font-size is reducing as we go to the nested levels of menu structure even though we have applied the same CSS class .menu-item to all nested menu items. Let’s break down how browser is calculating the the pixel (px) from rem relative values.

1. The #menu item font-size: 0.5em is relative to the #container so font-size in pixel would be 100x0.5 = 50px
2. The #submenu item font-size: 0.5em is relative to the #menu so font-size in pixel would be 50x0.5 = 25px
3. The #subsubmenu item font-size: 0.5em is relative to the #submenu so font-size in pixel would be 25x0.5 = 12.5px
4. The #another_subsubmenu item class and font-size is not defined so font-size in pixel would be same as its parent #submenu i.e. 25px

2. Media Queries

The em should be used to define screen width in media queries. Here is an interesting post which explains why em should be used for media queries.

What is the problem with em?

The main problem with em is that you need to do all mathematical calculation of font-size of child elements as we did. Moreover, if you want to apply a specific font-size to child element, you cannot do that using em.

Alternate of em?

The rem is the solution of our problem. It is a relative unit and not dependent on parent elements. Let’s look at it.

REM

The rem unit is relative to the html (root) element.

If the font-size of root html element is 16px i.e.

:root {
   font-size: 16px;
}

then

1rem = 16px

for all the elements.

If font-size is not explicitly defined in root element then 1rem will be equal to the default font-size provided by the browser (usually 16px).

When to use rem?

It is recommended to use rem for spacing (margin, padding, etc.) and font size in CSS as it honors user’s preferences and provide better user experience.

px to rem when root is 16px

you can use the following table to convert from px to rem when root font-size is 16px:

You can also calculate rem using Pixel to Rem Converter

Final Thoughts

The best practice for the web developers is to:

• Use px for fixed size layout (width, height, etc.) or fixed spacing (margin, padding, etc.)
• Use em for nested elements (tree, menu, etc.) and media queries
• Use rem for flexible layout, spacing, and font-size