17

Okay, first off, yes I have read many many articles (Should I use px or rem value units in my CSS?) and forums about this.

I know that 1px is not a physical pixel but rather a CSS pixel, and rem is basically the same as em, but it is relative to the root element (hence the r in rem - root), rather than the parent element. em itself is equal to the size set in the document, and it is popular due to the scalability in comparison with pixel, which cannot be scaled.

In all articles I read that everyone loves rem, and it should be used for font-size in modern browser, but also use px as a fall back for IE8 and lower. I see the main reason people use rem is so that the size scales better and is more "mobile friendly". Now suddenly I read articles saying that all modern browsers support viewport, so scalibilty is no longer that big of an issue.

Then I read to properly convert rem to px and vice versa, we can use html { font-size: 62.5%; } which then turns 1rem to 10px.

So after all this confusion, if scalibilty is no issue because of viewports and 1rem is converted to 10px via html 62.5%, plus I will use pixels as a fall back anyway, then why use rem in the first place and not just stick with pixel? I don't see any advantages of using rem anymore.

Or did I miss some major advantage of rem?

Community
  • 1
  • 1
Kevin M
  • 1,202
  • 15
  • 30
  • The thing about CSS is there are no real correct answers apart from the once that work correctly and may paths can make things work correctly. If you enjoy using PX the build your website using PX. REM is a newer standard and is not really recognised by older browsers as I am lead to believe. Also this question is a bit of a duplicate of http://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css – Andrew May 21 '15 at 13:19
  • 3
    1rem is **not** the same as 10px with font-size 62.5%. *By default* it *may* be in *some browsers*, but you can't trust that. px is px, always. rem is relative to font-size, always. – Sami Kuhmonen May 21 '15 at 13:23
  • @ Sami Kuhmonen This is strange, because you are contradicing every article I read about rem. They all say 62.5% is the same as 1:10 ration of rem to px. I tested it in all top 5 browsers and on my iPhone and they all seem the same with 62.5% – Kevin M May 21 '15 at 13:47
  • @ Andrew thanks. That's the same post I linked in my question ;) But my question is still unanswered. The whole web developer community makes that big fuzz about rem and I don't understand why you should use rem when everyone seems to scale it down by using 62.5% which then equals 1rem = 10px on a view port of 1.0. It seems to me like it's totally defeating the point of using rem in the first place. – Kevin M May 21 '15 at 13:52
  • To me, defining percentage font size in `html` is not even "right", because you're then _assuming_ the browser's default font size is `16px`, which are surely not guaranteed. Using `px` and `rem` are two different thing. The good thing of `rem` is that when the reader doesn't have a good eye, he/she can increase the base font size in browser and the whole document can be enlarged accordingly. That said, if some of your layout should stay in absolute value (e.g. `padding: 10px`), just use `px`, don't reverse calculate it to `rem`. – Passerby May 21 '15 at 14:11
  • 1
    Possible duplicate of [Should I use px or rem value units in my CSS?](https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css) – Josh Burgess Mar 07 '18 at 21:12
  • @Josh Burgess You clearly didn't read my question. I even referenced the exact same thread you mentioned and asked a very specific question not answered in the other thread. – Kevin M Mar 12 '18 at 03:22

3 Answers3

18

So after all the research, I came to the conclusion that the only advantage of rem, is that users who use a bigger default font-size in their browser setting, will get the font-size scaled properly, while px will not scale. In other words, using rem for font-size, adds support for Accessibility to your website.

To sum up:

  • rem is a way to add support for Accessibility to your website.
  • Keep in mind, most users use zoom instead of font-size change in their browser and phones, because zoom easier to access.
  • Browser zoom has additonal affect on em, in other words, it scales rem and px equally.
  • Since 2012, rem is supported by all major browsers on desktop and mobile devices.
  • Use px as fall back option for IE8 and lower.
  • Although not specified by W3C, all browser across desktop and mobile devices have implemented a default font-sizeof 16px (feel free to Google yourself), which equals to 1rem/em
  • To make the conversion easier between px and rem you can use html {font-size: 62.5%;} which converts 10px to 1rem

In one sentence: Use rem with px on font-size to support accessibility.

html {
    font-size: 62.5%;
}

.your_class {
    font-size: 16px;
    font-size: 1.6rem;
}
Kevin M
  • 1,202
  • 15
  • 30
  • I've never bothered using `rem` units, and I think they cause more problems than they solve. Upscaling from `0.75em` back up to root? Just use `1.33em`. Need responsive layouts? Percentages and media-queries. Literally the only time I've used `rem`s was to rescale the landing-page of our site on a colossal (unrealistic) screen size. The purely `em`-based layout magically scaled upwards by adding `html { font-size: 1.5em; }`... oh wait, even that didn't need `rem` units... ;-) –  Jan 08 '19 at 07:35
  • Even after all these years, I'm still of the belief that `em` units are one of CSS's most powerful features — and one that continues to be woefully unappreciated. –  Jan 08 '19 at 07:39
9

The 62.5% only works if the browser's default font-size is left at the default 16px. Just because you, as a normal able-bodied person (or at least a person with normal eyesight) have the default settings for font-size, you cannot assume that holds true for the populace at large.

Consider those with poor eyesight. In their case, they'll have their font-size set to 20px, or maybe 28px for very poor eyesight. If everything is maintained in px, then your display isn't going to be mutable for those with different needs. Content will overflow its containers and your website will look broken.

Or, maybe you can relate to having a piece-of-junk computer at the place where you work. We used to have old 800x600 monitors on a factory floor at my first job. Default font-size on those was 10px. Websites looked horrible on them, and it was because everyone expected the content in their site's content to consume much more space than it actually did.

The obvious solution is to make the layout respond to the content. font-size is one of the few elements that a browser will bring to the table on its own based on the preference of its user. Since that user is your audience, you'd do well to respect their preference as you want them to continue visiting your site, and not hate using it when they do.

Just my 2¢ (and, well, the actual reason that people push for rem as opposed to px).

Josh Burgess
  • 9,327
  • 33
  • 46
  • Thank you for the answer. When you say people who might not use the default font-size, how are they changing it? Is that the zoom option in chrome? (ctrl + mouse wheel up/down). Or is there another option? – Kevin M May 21 '15 at 18:50
  • Nope, it's not the zoom option in Chrome. It's a setting that can be done in Settings > Advanced Settings > Web Content. Then change the font-size. Phone browsers generally use a larger font-size as well, but that may be obfuscated by dynamic containers and specific media queries. – Josh Burgess May 21 '15 at 19:01
0

We should use rems or em because they are based on font-size. It may seem a bit strange but by doing so we can build more robust responsive layouts because just by changing font sizes, we will automatically change length.

Since it depends on font size and that gives us a lot of flexibility, and it's just a great technique.

Rafiq
  • 8,987
  • 4
  • 35
  • 35
  • I think you got something mixed up here. Neither `rem` nor `em` is based on the font-size.They inherit the height from either the root element (rem) or the parent elements (em) height. What you are referring to sounds similar to the `ch` unit which is relative to the fonts width of the zero character. – Kevin M Jul 17 '20 at 10:50
  • actually @KevinM, you got it mixed up – Joe Koker May 19 '22 at 06:26