Why use Pixels Ems and Rems A quick guide for 2019

Proper font sizing and clear typography are key components to good design and accessibility for all users. With the importance of responsive web design growing as more users access the internet via mobile devices, having your typography properly scale is an essential element of the design and development process.

Pixels are a common and familiar unit of measurement to those with any experience with web or graphic design, but there are other units more appropriate for layouts that need to scale. These two units that we will discuss are the em and rem.

While the px is a static unit of measurement, both em and rem are fluid, their actual sizes being relative to a parent unit.

“Ems” explained

Although the px has long been the standard unit used for any kind of sizing in web design, the term “em” actually has a long history, originally stemming from print design. An “em” is defined as the size of an uppercase M, in any given typeface. In digital/web design, the definition is essentially the same: 1 “em” is equivalent to a set parent element, measured in a specific amount of pixels. This makes the unit’s actual size relative to how it appears in the chosen font, making it a superior choice over pixels for keeping the sizing and spacing proportionate.

You can think of ems as working almost like percentage values, based on the parent unit’s value. One practical example of this is that, by changing the sizing of a single parent element, all font sizes nested within the parent element will scale proportionally. This ensures that all users will view all of the text scaled the same way, regardless of browser, device, or how much the page is zoomed in/out.

The most important thing to remember when working with “ems” is how exactly they scale relative to the parent element.

As an example, let’s say we have a <div> container with a font-size of 16px. Any elements nested within it will have the following sizes:

  • 1 em = 16 pixels.
  • 2 em = 32 pixels.
  • 1.5 em = 24 pixels.
  • .5 em = 8 pixels.
  • 1.2 em = 19.2 pixels.

See the Pen ems by Sunlight Media (@sunlightmedia) on CodePen.


How em and rem differ

Ems and rems are virtually identical, with one major difference. A shorthand for “root em”, rems are scaled proportionally solely from the size of the root element (in an HTML web page, this would be the <html> element). This means that whatever the font-size of the html element is set at (either by the developer or the browser default), all rem units in the page will be scaled according to that.

This differs from the em, as you can have multiple parent elements in a webpage, with the ems nested in each parent element only scaling to their specific parent. This also means that the value of ems can be compounded, as each nested element inherit the values of its parent. Both ems and rems have their uses, but sticking with rems, at least initially, will be the most simple way of taking advantage of relative measurements.

While ems and rems are great choices for typography, it should be noted that utilizing pixels or actual percentage values are usually a better choice for working with padding, margins or other elements of spacing and layout.