Why use rem instead px when it's the same anyway?

Question

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?

Answer 1

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;
}