I usually use meters. It is the only sane unit of measurement. ;-)

All. Rem, em, viewport based units, px, fr, turn, deg, percentage and so on. You should use the appropriate unit case by case and not be sticked to one unit for everything... absolute and relative units have different applications

+1 for REMs

should be REMs. EMs are relative to the element and will have some expected results when nesting. Pixel fonts are not reliable when zooming in.

I normally use SASS and have a little mixin that does the calculation from px to rem, so you can add your base font size and then add with px and it will spit out rems.

REMs baby!!!

I personally use em and rem a lot. But there are cases and cases.

Let's restrict to just length measures. I personally use:

• px for border widths, specifically one pixel borders, which are always rendered crisply in most use cases;
• em for typographical spaces: box padding, margins, borders radii and shadows (when they make sense, i.e. inline components), larger border widths, (usually minimum) widths of text content boxes;
• rem for layout components (wrt sizes, margins, padding, border radii, box shadows);
• percentages (including vw and vh) for precise layout displacement, or relative font sizing;
• cm or mm for printing.

REM for base elements, and EM for relative/nested elements. I'm not a fan of "pixel perfect" designs and lean towards flexibility in layout.

And EMs allow for using percentage based calculations down the line.

I see a lot of people only using rem or only using px, but I tend to use a hybrid approach.

Base font size on the body is in px. Every other font size is rem to it scales based on my chosen base. Padding and margin is usually px throughout the app, but I suppose that setting base padding and margin in px and using rem could apply here too.

For text I prefer rem. I don't know any cases where the font size being dependent on the parent's font size would have been useful for me. Usually it ends up producing unexpected effects (this text should be 60px, why is it 48px? I have to keep going up until I find it...) And if there were a use case for making a nested container a different font size, I could make a more specific CSS rule instead.

What ruler tool are you using? Mine doesn't have the pixel value summed in the middle like that but I wish it did.

The most sensible one. If an input field needs a padding of one character, I use 1ch, if there are non-scaling measures, it's px... I think one of the really fun things about CSS are all those quirky units.

lol its not such a trivial point as other posters suggest in jest, I am more comfortable and familiar with em, but agree that we need to move past the measurements that are not professionally relevant and clean up the code base of its manifold uselessness before it becomes akin to the common law in its esoteric complexity. Such a range of potentialities simply makes it harder to learn/debug/maintain and so we should work towards a better civil law like form.

EDIT: Why I use EM, the conversion is easy to do in my head and I never llooked up the REM conversion due to the academic environment I learned to use it in preferring the EM units. Upon doing some inspections, I am not firm on the point and would concede to REM for its wider adoption if there was to be a standard.

Though the country is not run by the President, whatever your opinion of him. We haven't nearly an impulsive form of government in the United States as our alarmists or those not versed in the divisions of power abroad ever seem to realize, despite being relatively intelligent otherwise :]

I've generally have followed this guide css-tricks.com/rems-ems/ I think it's sensible and should work well in most cases.

Rather than repeat myself:

Use rem.

Here's how, and why:

stackoverflow.com/a/43131958/497418

I also use em, px, and occasionally %. What's the greatness of rem? Never really seen them explained.

~All units have their purpose, so, all.