Guide: EM vs REM vs PX. Which should you use?

About

12/19/2020, 1:26 PMWork(/)

Solutions &Blog

Careers

ContactServices

4th January 2017

EM vs REM vs PX – Why you shouldn't“just use pixels”
Roughly an 8 minute read by Simon (/about/simon-willans)

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 1 of 13

Guide: EM vs REM vs PX. Which should you use?

12/19/2020, 1:26 PM

The debate has been had many times - what units of measurement should we use in ourCSS?
We, like many others[1][2], were ready to ditch REMs and return to the beloved pixel. We
lost track of why we adopted the use of REMs in the first place. The problem doesn’t justrevolve around font-sizes - it’s also about accessibility.
TL;DR:
Pixels are ignorant, don’t use them.
Use REMs for sizes and spacing.
Use EMs for media queries.

PixelsPixels (px) are what we’ve all become accustomed to over the years. Everyone knows
what a pixel is (although the size of a pixel isn’t always the same, but that’s for anotherday). Everyone is comfortable with using pixels. They’re easily translatable. Designers
typically work in pixels, so it’s easy to take sizes directly from Photoshop straight into build.
So what’s wrong with pixels?

Accessibility
I’m a big advocate of accessibility on the web. I’d take accessibility over “pre!y”
any day.
If you’re se!ing all of your font-sizes, element sizes and spacing in pixels, you’re nottreating the end user with respect.
https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 2 of 13

Guide: EM vs REM vs PX. Which should you use?

12/19/2020, 1:26 PM

In most browsers, a user can set their default browser font-size to be a diﬀerent size tothe default (typically 16px). If the user sets their default to 20px, all font-sizes should
scale accordingly.
However, if the website explicitly sets font-sizes in pixels, a heading set at 30px will
always be 30px. That might sound great from a designer/developer point of view - but
you’re not the user, stop making websites for yourself.
Thankfully, se!ing font-sizes in pixels doesn’t completely ruin accessibility. The user canstill zoom in and out with ctrl plus +/- (cmd instead of ctrl on OS X). However, we cando be!er.

REMs
If you’re in any way familiar with the web design world, you will undoubtedly haveheard of REMs. If you’re not, REMs are a way of se!ing font-sizes based on the font-sizeof the root HTML element. They also allow you to quickly scale an entire project bychanging the root font-size (for example at a certain media query/screen size).
“[The REM] unit represents the font-size of the root element (e.g. the font-size of the<html>element). When used on the font-size on this root element, it represents its initialvalue.”[3]How to calculate PX from REM
A basic and most common example: html font-size is set to 10px, paragraph is set to1.6rem - 1.6rem * 10px = 16px.

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 3 of 13

Guide: EM vs REM vs PX. Which should you use?

12/19/2020, 1:26 PMSe!ing a root font-size of 10px is the most common scenario when I see people usingREMs. It allows for a quick conversion between pixel values to REM values simply bydividing the number by 10.
However, se!ing the base font-size in pixels still has the same problem as the pixel
example above. Accessibility overridden.
While REMs certainly have their uses, I’m willing to bet that most people use REMs
because they are seen as cooler than pixels. I rarely see a project where someone
actually changes the root HTML font-size depending on screen size; and rightfully so.
Unless you’ve got a very typographically heavy design, you’re unlikely to want to scale
everything at once.

So how can we un-break our accessibility faux pas?
Set the root HTML font-size as a percentage. That’s a percentage of the user’s default
browser font-size. A typical method is to set the HTML font-size to 62.5%. That’s because
62.5% of 16px (typical default browser font-size) is 10px. That would still make 1.6rem =16px. This now means that if the user’s default browser font-size is changed to, forexample, 20px, 1.6rem would now equal 20px. So if your user wants bigger fonts, letthem. Happy designer. Happy developer. All numbers are still easy to work with.
The ideal scenario would be to leave the HTML font-size as 100%, but that does makethe maths a li!le bit harder. For example, 16px is now 1rem, 20px is 1.25rem, 24px is1.5rem etc.

Sass/SCSS to the rescue

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 4 of 13

Guide: EM vs REM vs PX. Which should you use?

12/19/2020, 1:26 PM

Working all of these numbers out in your head would be pre!y time consuming.
Thankfully, if you use Sass/SCSS, LESS, or any other CSS pre-processor, you shouldn’tworry. You can use functions to calculate these things for you.

What about EMs?
EMs perform initially in a similar fashion to REMs, until it comes to nesting. I’ve neverbeen a fan of EMs, especially when it comes to font-sizes. For example, take a div with afont-size of 2em, then add a paragraph with a font-size of 2em. The font-size of thatparagraph is now 2ems relative to the div. I quickly lose track of the maths and whatsize is what, and it quickly becomes unmanageable. This is what REMs solve - the size
always refers back to the root.

What about media queries?
So we’ve established that using pixel values overrides browser default se!ings, so
simply converting all pixel sizes to REMs is the best thing to do, right? Not quite.
This blog post highlights some of the key the diﬀerences between using pixels, EMs andREMs in media queries (h!ps://zellwk.com/blog/media-query-units/). Go have a read andthen come back.
In summary, both pixels and REMs for media queries fail in various browsers when usingbrowser zoom, and EMs are the best option we have. REMs fail much more than pixels at
this point, so we’re going to discount them completely.
It does get a bit more tricky though. Both EMs and pixels have their downfalls withmedia queries when it comes to the diﬀerence of a decimal place of that unit. If you
happen to use both min and max width media queries in the same block of code, you’re
https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 5 of 13

Guide: EM vs REM vs PX. Which should you use?

12/19/2020, 1:26 PM

going to have a bad time as soon as the user starts to change their browser zoom ordefault font-size.

Here are some examples:
We use 6 decimal places because certain browsers show no diﬀerence between 2-5.d.p.
For clarity, we’re using a font size of 10px on the body to make the maths a li!le clearer.
Example 1: Browser zoom set to 100%, browser width set to 640px

min-width: 64em = Hit
max-width: 63.99em = Miss
max-width: 63.999999em = Hit
min-width: 640px = Hit
max-width: 639px = Miss
max-width: 639.999999px = Miss

Example 1b: Browser zoom set to 100%, browser width set to 639px

min-width: 64em = Miss
max-width: 63.99em = Hit
max-width: 63.999999em = Hit
min-width: 640px = Miss
max-width: 639px = Hit
max-width: 639.999999px = Hit

So we can’t use 6dp for EMs, because it hits both media queries.
Example 2: Browser zoom set to 110%, browser width set to 704px (because 640px * 110%= 704px)
https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 6 of 13

Guide: EM vs REM vs PX. Which should you use?

12/19/2020, 1:26 PM

min-width: 64em = Miss
max-width: 63.99em = Miss
max-width: 63.999999em = Hit
min-width: 640px = Miss
max-width: 639px = Miss
max-width: 639.999999px = Hit

Example 2b: Browser zoom set to 110%, browser width set to 705px

min-width: 64em = Hit
max-width: 63.99em = Miss
max-width: 63.999999em = Miss
min-width: 640px = Hit
max-width: 639px = Miss
max-width: 639.999999px = Miss

So we can’t use 2dp for EMs. So all we’re le# with at this stage is 6dp pixels. This works
with browser zoom. However…
Example 3: Browser zoom set to 100%, browser font size set to 20px, browser width set
to 800 (because 640 * 125% = 800)

min-width: 64em = Hit
max-width: 63.99em = Miss
max-width: 63.999999em = Hit

So again, 6dp EMs are still out. And we can’t use pixels for media queries at all, because
they still fire at 640px/639px because they ignore EMs/REMs.

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 7 of 13

Guide: EM vs REM vs PX. Which should you use?

12/19/2020, 1:26 PM

So what’s the solution?
Unfortunately, there isn’t an answer. Until browsers sort out rounding issues, we’re abit stuck.
The simplest acceptable option, is that we never create a min-width and max-width
overlap in the same block. Example:

body {@media screen and (max-width: 63.99em) {background: blue;}@media screen and (min-width: 64em) {background: blue;}}

The problem with the above is that there are certain scenarios where both media
queries are hit, or both are ignore. So the safe bet would be to write something like:body {
background: blue;@media screen and (min-width: 64em) {background: blue;}}

Why isn’t there a real solution? I don’t believe enough people care. Any statistics sayingthat people don’t change their default browser font-size are definitely skewed. The
options in Chrome to change the default font-size is now very buried in the advanced
https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 8 of 13

Guide: EM vs REM vs PX. Which should you use?

12/19/2020, 1:26 PMbrowser options.

Pitfalls
There are some pitfalls to this approach:If you’re used to writing both min-width and max-width media queries in the samecode block, it will take longer.
It increases complexity as you’ll have to override CSS one direction or the other,rather than telling the browser to use option A or B.
It will increases file size due to these overrides. Not by much, but it’sworth considering.
Depending on the project, who’s developing it, and various other factors such as projectbudgets (we have to be realistic here), pixels might be easier and quicker. It also might
be easier and quicker to ignore accessibility.
Remember who you’re building websites for.
It’s also worth noting that this blog post is accurate at the time of writing, but with theconstant updates to the way browsers work, this issue could become a thing ofthe past.
1. Just use pixels (h!ps://benfrain.com/just-use-pixels/)
2. R.I.P. REM, Viva CSS Reference Pixel! (h!ps://mindtheshi#.wordpress.com/2015/04/02/r-i-p-rem-viva-cssreference-pixel/)

3. Length - Mozilla Developer Network (h!ps://developer.mozilla.org/en/docs/Web/CSS/length)

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 9 of 13

Guide: EM vs REM vs PX. Which should you use?

12/19/2020, 1:26 PM(h!ps://engageinteractive.co.uk/blog/emvs-rem-vspx)
Simon (/about/simon-willans) spends the majority of his time building responsivewebsites, focusing heavily on large-scale frameworks.

You should also read…

(h!ps://engageinteractive.co.uk/blog/digitalmarketingin-the-runup-tochristmas)

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 10 of 13

Guide: EM vs REM vs PX. Which should you use?

12/19/2020, 1:26 PM

16th October 2020

Digital marketing in the run up to Christmas: what do
hospitality brands need to know?
Why the hospitality sector should be investing in digital marketing right now, and how it
can be used to engage customers and generate revenue in the run up to Christmas.

(h!ps://engageinteractive.co.uk/blog/digital-marketing-in-the-run-up-tochristmas)(h!ps://engageinteractive.co.uk/blog/ourjourney-tobcorpcertification)
7th August 2020

Our journey to BCORP certification
Becoming a certified BCORP indicates that your business meets the highest standards ofverified social and environmental performance, public transparency, and legal
accountability to balance profit and purpose.

(h!ps://engageinteractive.co.uk/blog/our-journey-to-bcorp-certification)

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 11 of 13

Guide: EM vs REM vs PX. Which should you use?

12/19/2020, 1:26 PM(h!ps://engageinteractive.co.uk/blog/teamingup-withthisinstituteto-helpthe-nhs)
3rd August 2020

Teaming up with THIS Institute to help the NHS
We’ve recently been appointed by The Healthcare Improvement Studies (THIS) Instituteto work on a project to improve the quality and safety of healthcare in the NHS.

(h!ps://engageinteractive.co.uk/blog/teaming-up-with-this-institute-to-helpthe-nhs)

Get our monthly newsle!erEnter your email

https://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 12 of 13

Guide: EM vs REM vs PX. Which should you use?

12/19/2020, 1:26 PM

1st Floor, Munro House
Duke StreetLeeds
LS9 8AG
View map(h!ps://www.google.co.uk/maps/place/Engage/@53.7968588,-1.5339366,15z/data=!4m
1.5339366)0113 457 4090 (tel:01134574090)
hello@engageinteractive.co.uk (mailto:hello@engageinteractive.co.uk)(h!ps://instagram.com/engageinteractive)(h!ps://facebook.com/engageinteractive.co.uk)(h!ps://twi!er.com/engagetweet)(h!ps://leedsdigitalfestival.org/)
By using this site you are agreeing to our cookie policy (/cookie-policy)
Cookiepolicy (/cookie-policy) Careers (/careers) Contact (/contact) © Engage 2020
Accepthttps://engageinteractive.co.uk/blog/em-vs-rem-vs-px

Page 13 of 13