Responsive web design

Memosha Sinha
Nov 4 · 6 min read

What to choose em or rem in css ?

When I came across em/rem for units of measurement in css , I started wondering which one to use?

To begin let’s try to find out how its different from pixel(px).

em/rem denotes flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in our design. If we use a value of 1em or 1rem, it could translate in the browser as anything from 16px to 160px or any other value.

css for paragraph 
p {
font-size: 16px;
padding: 1em;
}

As we can see that CSS padding set to 1em which gets computed to 16px same as font-size units.px values are used by the browser as is, so 1px will always display as exactly 1px.

How rem Units Translate to Pixel Values

When using rem units, the pixel size they translate to depends on the font size of the root element of the page, i.e. the html element. That root font size is multiplied by whatever number you’re using with your rem unit.

For example, with a root element font size of 20px, 1rem would equate to 20px, i.e. 1 x 20= 20.

How em Units Translate to Pixel Values

When using em units, the pixel value you end up with is a multiplication of the font size on the element being styled.

For example, if a div has a font size of 18px, 10em would equate to 180px, i.e. 10 x 18 = 180.

Important to Know:

As per the W3 spec, they are relative to the font size “of the element on which they are used”.

Parent element font sizes can effect em values, but when that happens it’s solely because of inheritance. Let’s see how this works in action.

The Effect of Inheritance on em Units

Working with em units can start to get tricky when it comes to inheritance, because every element automatically inherits the font size of its parent. The effect of inheritance can only be overridden by explicitly setting a font size with a unit not subject to inheritance, such as px or vw.

The font size of the element on which em units are used determines their size. But that element may have inherited a font size from its parent, which inherited a font size from its parent, and so on. As such it’s possible for any em value to be effected by the font size of any of its parents.

Example of em Inheritance

If we have a page with a root font size of 16px (usually the default) and a child div inside it with padding of 1.5em, that div will inherit the font size of 16px from the root element. Hence its padding will translate to 24px, i.e. 1.5 x 16 = 24.

<div class="wrap">
<div class="inheritance_demo box">
Inheritance with em units demo
</div>
</div>
.box {
background: #3498db;
color: #fff;
}

.wrap {
font-size: 1.25em;
}

Our wrap div inherits the root font size of 16px and multiplies that by its own font-size setting of 1.25em. This sets the div to have a font size of 20px, i.e. 1.25 x 16 = 20.

Now our original div is no longer inheriting directly from the root element, instead it’s inheriting a font size of 20px from its new parent div. Its padding value of 1.5em now equates to 30px, i.e. 1.5 x 20 = 30.

This scaling effect can be compounded even further if we add an em based font size to our original div, let’s say 1.2em. he div inherits the 20px font size from its parent, then multiplies that by its own 1.2em setting, giving it a new font size of 24px, i.e. 1.2 x 20 = 24.

The 1.5em padding on our div will now change in size again with the new font size, this time to 36px, i.e. 1.5 x 24 = 36.

Let’s see what happens to our padding of 1.5em if we explicitly set the div to use a font size of 14px, a value not subject to inheritance, our padding has dropped down to 21px, i.e. 1.5 x 14 = 21. It is unaffected by the font size of the parent element.

Default Font Size

By default browsers usually have a font size of 16px, but this can be changed to anywhere from 9px to 72px by the user.

Why Use rem Units:

We should userem units to ensure that whatever default font size a user has their browser set to, the layout will adjust to accommodate the size of text within it.

A site can be designed initially focusing on the most common default browser font size of 16px.

Increase font size

Integrity of the layout will be preserved, and the text won’t get squashed up in a rigid space meant for smaller text.

Decrease font size

Entire layout scales down, and they won’t be left with a tiny smattering of text in a wasteland of white space.

Why Use em Units

The key value em units offer is they allow sizing values to be determined by a font size other than that of the html element. Primary purpose of em units should be to allow for scalability within the context of a specific design element.

For example, you might set the padding, margin and line-height around a navigation menu item to use em values.This way if you change the menu’s font size the spacing around the menu items will scale proportionately, independently of the rest of the layout.

Use em Units For:

Any sizing that should scale depending on the font-size of an element other than the root.

As per our example above, design components like menu items, buttons, and headings may have their own explicitly stated font sizes. If you change these font sizes, you want the entire component to scale proportionately.

Common properties this guideline will apply to are margin, padding, width, height and line-height settings, when used on elements with non default font sizing.

Use rem units for:

Any sizing that doesn’t need em units for the reasons described above, and that should scale depending on browser font size settings.

This accounts for almost everything in a standard design including most heights, most widths, most padding, most margins, border widths, most font sizes, shadows, basically almost every part of your layout.

Always Use rem Media Queries

Importantly, when using rem units to create a uniformly scalable design, your media queries should also be in rem units. This will ensure that whatever a user’s browser font size, your media queries will respond to it and adjust your layout.

Don’t Use em or rem For:

Multi Column Layout Widths

Column widths in a layout should typically be % based so they can fluidly fit unpredictably sized viewports.

However single columns should still generally incorporate rem values via a max-width setting.

For example:

css .container { width: 100%; max-width: 75rem; }

This keeps the column flexible and scalable, but prevents it from becoming too wide for the text therein to be comfortably readable.

Memosha Sinha

Written by

Software Engineer, Fitness lover, Traveller, wanderlust, optimistic

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade