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
There are many articles that have discussed this in detail. A simple Google of "rem vs." will provide you with an abundance of articles.
I'm curious what everyone's thoughts are on this. Feel free to comment here as well as in the GitHub issue.
Oldest comments (30)
Then there's the whole debate of meters vs. yards. You just can't win. 😉
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 ;)
And then there's the UK, being unable to finish the metrification since the 60s... :P
Hey, Liberia uses our system too! We're not completely alone!
+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!!!
Update it to the responsive typography formula.
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.
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
This
px
It's already scaled by browsers when you zoom anyway, and it works in all the old MSIE versions, so why not?
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.
Absolutely REM's for base elements and fluid typography using calc() with pixels
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.
Using base padding and margin isn't such a good idea as in most projects you reset the body padding and margin to 0.
I've generally have followed this guide css-tricks.com/rems-ems/ I think it's sensible and should work well in most cases.
I also use
em,px, and occasionally%. What's the greatness ofrem? Never really seen them explained.None if you don’t change the root font size