(CSS units) Bye Bye "px" -- Hello "em"

[Under S.]

Most developers have their own bag of bad habits they carry with them since forever. In my case, one of them is being unnecessarily loyal to the "px" measurement unit. So I've decided to take the "em" plunge.

First thing I learned there, is that it doesn't make much sense to use "px" values on margins, padding, line-height or letter-spacing when all the font sizes are set by magnification level. In other words, once you start using "em", it's just logical to go all the way with it. If you decide you want that title font larger in the future, you're going to want those other 3 values to follow suit. I can't even think of a scenario when you wouldn't.

So, "em" all the way, right?

What about images, which would be placed via Div backgrounds... could the canvas area maintain its proportionate size via "em", or would I have to go "%" there?

Which leads us to my final question...

Since "em" is just a fancier "%" why not use "%" for everything?

PS: I've read what all these units do in theory, I'm looking for more of a practical answer from people who've committed to a unit and why they chose that unit (what obstacle they might've encountered along the way that made them commit to it).

[Rob Hecker2 · Accepted solution]

So, "em" all the way, right? . . .from people who've committed to a unit

I use a combination of px, em, rem, % and vw. I'll bet a lot of others here do as well. Each unit has its place.

I generally prefer REM over em because in some cases em can give you unexpected results. vw is an interesting unit but can result in super tiny text or super large text if you don't tame it with media queries.

[Nancy OShea]

Nothing is all or nothing anymore.  You kind of have to go with what works best for your goals and then evaluate if  browser support is sufficient enough to run it in the wild.

Personally, I have used Rems, Ems and %.  But I kind of like Viewport Units too.  It depends on the use case.

Viewport Sized Typography | CSS-Tricks

http://caniuse.com/#feat=viewport-units

Nancy

[osgood_]

https://forums.adobe.com/people/Under+S.  wrote

So, "em" all the way, right?

Nope, I stilll prefer px for font sizing and line height.

https://forums.adobe.com/people/Under+S.  wrote

Since "em" is just a fancier "%" why not use "%" for everything?

Personally Ive never used em and dont intend to. I dont understand it. If I set a container to be 80% wide I know its going to take up 80% of the browser window width. I have zero idea what that would equate to in ems. I'm sure there is some kind of mathematical formula to calculate it but to me it just seems much simpler and easier to set everything on the horizontal axis in percent.

The only place I will set measurement in px is on the vertical axis . Again I kind of know what 30px is, no idea what that is in ems. Ems is a lazy way to set measurement in my opinon. The only way to get a layout correct is to feed the device which your layout will appear on a media query, that's why there are so many shite mobile layouts around, which look like a bag of spanners compared to the desktop version, because developers take short cuts, hoping one measurement fits all - it doesnt.

Oh yeah and as Rob mentioned I use vh as well in some cases when suited to what I'm trying to accomplish. But em, not for me.

[Jon Fritz]

"Committing to a unit" is sort of a silly concept to me, I use px, em, vw, vh and %, depending on my mood and what I'm doing.

I haven't gotten to rem yet, I guess I just haven't "needed" it. I never use ex, ch, vmin or vmax.

calc(), though not a "unit" in and of itself has been coming in pretty handy for me quite a bit lately.

For image backgrounds I rarely ever use anything but %, vh/vw, cover or contain settings. I don't think I've ever used em there.

[BenPleysier]

em's, rem's, ex's, ch, vh/vw's and %'s are translated into px's by the browser. Hence one might argue to using px's in the first place, saving the browser the calculations.

But hey, we are talking flexible and responsive layouts. Perhaps we should allow the browser to do the calculations for us.

[Under S.]

I was afraid you guys would say something like that.

[Rob Hecker2]

I was afraid you guys would say something like that.

You are not wrong in wishing there was a single unit you could focus on. At least the variety of options gives us different approaches to solving responsive design issues.