px vs em

ATTENTION!

This article is over 4 years old, it may be outdated!

px vs em

Published on 08/15/2013 | 15.08.12013 HE

Recently Tim Pietrusky wrote and article about px vs em that contains a few links on resources that explain why you should use em instead of px as measure unit on websites.

I was using pixel like forever and I couldn’t think of any reason to switch to a new unit until Tim explained why em is better: em is more responsive and it is scalable. In fact when you switch from pixel to em you’ll feel like working on a completely new Level. The fact you can scale all elements of your website by simply passing a new value to :root {font-size:1em;} or body {font-size:1em;}.

My _responsive.scss works this way. Because I think it’s good to have large texts on smartphones I applied font-size:120% to the .main-content class that holds all elements.

One of the main reasons to use em instead of pixel is that this measurement unit doesn’t depend on the screen size in Pixel while the pixel unit does. An button that has the markup you see below will look the same on any device at any scale - it is fully responsive in other words.

.button {
	padding:.5em .7em;
}

Another important point is that em Media Queries apply even if the user zooms the page. Go ahead an try to zoom this blog, at some point the responsive layout (breakpoint 55em) will apply - if you use pixel in your breakpoint (for example @media all and (max-width:800px)) it will not apply the responsive layout when someone zooms in.

Final Words

em is a lot better than pixel even if it takes some time to change your mind and work flow. It is more flexible, more scalable and - which is the most important, completely responsive. So if you create a new responsive website, and you should always do so, do your self a favor and use em instead of px.

Further Reading

More articles on this topic:

Categories

Like this?

This website contains no advertisement, no tracking, no paid articles, and no shady-things-whatsoever. It is just content, provided free of charge and with accessibility in mind.

If you would like to support me in providing content - and code - for free or if this page has helped you or your company, consider supporting me directly.

You can support me via:

A colorful image of me wearing my DIY mask. The image has a colorful glitch effect.

Kevin Gimbel

is a DevOps Engineer and avid (Video) Gamer. He’s also interested in Sci-Fi, Cyberpunk, and dystopian books.

Wearing a mask is a good idea!

You can find out more about me if you wish.