DEV Community

loading...
Cover image for Which units of measure do you use and why in CSS?

Which units of measure do you use and why in CSS?

Nick Taylor (he/him)
Lead software engineer at Forem. Caught the live coding bug on Twitch at livecoding.ca
Originally published at iamdeveloper.com Updated on ・1 min read

I just opened an issue in the dev.to repo in regards to considering standardizing units of measure in the CSS part of the codebase. In a nutshell, I'm promoting the usage of rem (and em when necessary) like I use in my day to day at work as I'm sold on rem.

Consider using rem units #987

Is your feature request related to a problem? Please describe. This relates to #966

I noticed in most of the SASS files something that should be addressed. font-sizes and other properties with measurement values are set as em, px, %.

Describe the solution you'd like

Consider using rem (and em when necessary). Browsers by default consider 1rem to be 16px on the root element, but if a user has different font settings, that 1rem will be equal to that value. So using rem, everything will be sized based off of the browser's or user's font-size setting. em is also useful when whatever is being sized is dependent on its element's font-size, not the root element's font-size.

There’s a great discussion in the Bootstrap repo about all this, Why has Bootstrap 4 changed to using rem? · Issue #19943 · twbs/bootstrap · GitHub. This is a good comment in there, https://github.com/twbs/bootstrap/issues/19943#issuecomment-224439306

It’s not a quick simple fix, but given this is OSS, I’m sure there would be many that could help with this.

Side note: I think this could be a great issue that could be done with mentors/mentees that are interested in CSS.

Describe alternatives you've considered N/A

Additional context

image

image

There are many articles that have discussed this in detail. A simple Google of "rem vs." will provide you with an abundance of articles.

screenshot of a Google search on "rem vs."

I'm curious what everyone's thoughts are on this. Feel free to comment here as well as in the GitHub issue.

Discussion (30)

Collapse
tux0r profile image
tux0r

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

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

Then there's the whole debate of meters vs. yards. You just can't win. 😉

Collapse
pojntfx profile image
Felix Pojtinger

Well ... seems like you can, after all the whole world is using the metric system except for a country that's run by a tyrant and thus behaves like one ;)

Thread Thread
stephanie profile image
Stephanie Handsteiner

And then there's the UK, being unable to finish the metrification since the 60s... :P

Thread Thread
dmfay profile image
Dian Fay

Hey, Liberia uses our system too! We're not completely alone!

Collapse
equinusocio profile image
Mattia Astorino • Edited

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

Collapse
gustvandewal profile image
Gust van de Wal

This

Collapse
rhymes profile image
rhymes

+1 for REMs

Collapse
keinchy profile image
Frederick Jaime

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!!!

Collapse
equinusocio profile image
Mattia Astorino

Update it to the responsive typography formula.

Collapse
maxart2501 profile image
Massimo Artizzu

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.
Collapse
whoisryosuke profile image
Ryosuke

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.

Collapse
iamschulz profile image
I am Schulz

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.

Collapse
ryan profile image
Ryan

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.

Collapse
jwkicklighter profile image
Jordan Kicklighter

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.

Collapse
coolshaurya profile image
Shaurya

Using base padding and margin isn't such a good idea as in most projects you reset the body padding and margin to 0.

Collapse
ruvans profile image
Ruth Evans

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

Collapse
nickytonline profile image
Nick Taylor (he/him) Author

I'm using xScope, xscopeapp.com. It has a tonne of other tools as well. 🔥

Collapse
ruvans profile image
Ruth Evans

Neat, Thank you! ⭐⭐⭐⭐⭐

Collapse
thomashighbaugh profile image
Thomas Leon Highbaugh • Edited

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 :]

Collapse
zzzzbov profile image
Timothy

Rather than repeat myself:

Use rem.

Here's how, and why:

stackoverflow.com/a/43131958/497418

Collapse
itzsaga profile image
Seth

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

Collapse
nektro profile image
Meghan (she/her)

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

Collapse
equinusocio profile image
Mattia Astorino

None if you don’t change the root font size

Collapse
outthislife profile image
Talasan Nicholson

~All units have their purpose, so, all.

Collapse
estebanrocha profile image
Esteban Rocha

Absolutely REM's for base elements and fluid typography using calc() with pixels

Collapse
dean profile image
Dean Bassett

Use what's appropriate. There's several unit types for a reason!

Collapse
xthecapx profile image
xthecapx

html {
font-size: 16px;
}

and use rem ?

Collapse
notriddle profile image
Michael "notriddle" Howell

px

It's already scaled by browsers when you zoom anyway, and it works in all the old MSIE versions, so why not?

Collapse
ryan profile image
Ryan • Edited

px is not affected by a user's default zoom setting. em/rem with a root percentage value is.

Users can always zoom per site, but that's annoying for a user who has a preference, or has a disability and requires a larger font, to have to change it on every site individually.