Px, em, or rem?
Hi there - I haven't decided which unit I should use... Do you recommend px, em, or rem? I've read several articles about this topic but they just go over my head... Basically my question is: why shouldn't I use em for absolutely everything?
12 Replies
Someone else will probably have a more in-depth answer, but here's an easy way to pick what unit you should use in any given circumstance: https://whatunit.com/
the short answer is that you should use the right tools for the right jobs.
em as a unit is unpredictable for font-sizes, because it depends on the parent's font-size. It's also not a relative unit, so it's not going to be responsive when the size of the viewport changes.great resource, I'll check that out, thanks!
Eh I just use rem for everything 😂
All three units can be used for different things, you should never use one everywhere. Rem should be used for font sizes and anything you want to increase when increasing the browser font size. Ems should be used for anything you want to increase in relation to the font size, things such as gaps, padding, margin etc. and px for things you want to fix in size, such as heights when you need to use them and grid rows/column sizes in certain situations.
This is what I do, it keeps things nice and simple.
gotta be careful fixing heights and then using em and rem inside there though
Oh yeah of course, only use fixed heights for the correct purposes, it may take a while to understand the correct purposes but after that it becomes pretty easy to know when and when not to do it
Also watch out for value stacking when using em too
I see... and for media queries to define screen sizes the best unit would be px, right?
either em or rem
A bit late to the convo, but my personal take:
*
px should only be used for visual flourishes or image sizes. Things like border radius/width
* rem is great for font sizes as it respects the user's chosen font size (as rem is a multiple of what the base is), scales when the browser is zoomed in/out (another way the visually-impaired make things bigger), and doesn't compound with itself like em can so it's "safer" to use
* em is for relative sizes, and things that should be based on the current font size. Margin/padding, for example, as bigger font sizes need more "breathing room". Also useful for media queries, max-widths, and things of that nature.
But, of course, the answer is always "it depends" so take all advice you get with a grain of salt. Except for this: NEVER use px for font size and ALWAYS include rem or em in any font-size calculation. To not include them removes the user's choice and that's horrible for accessibility and is a big middle-finger to those who want/need bigger font sizes. You're making a site for them to use so make sure everyone can use it.Going to ping both @Muhct here because he asked, and @snxxwyy because he gave an answer, but these days, I suggest giving media query breakpoints in
px now, because it's simpler.
em and rem are the same with media queries, and both of them will not change even if you change the font-size on the html element.
There was a bug in Safari that, when you zoomed in or out, it would cause the breakpoints to be different in other browsers unless you used em. That was fixed about a year ago, so all the browsers are consistent whether you use em, rem, or px (or any other unit) now, so going with px is the one that will have the least amount of people confused, and is the easiest to understand in general.
Now, if we're talking about container queries, that's an entirely different discussion 😅oh i didn't know that haha, time to go back to px, i appreciate the info 😄