Why use rem instead of px when all the same?

Question

Well, firstly, yes, I read a lot of articles ( Should I use px or rem units in my CSS? ) And forums about that.

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

In all articles I read that everyone loves rem, and should be used for font-size in a modern browser, but also use px as a rollback for IE8 and below. I see that the main reason people use rem is because the size scales better and is more mobile. Now I unexpectedly read articles that say that all modern browsers support viewport , so scalibilty is no longer a problem.

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

So, after all this confusion, if scalibilty is not a problem due to viewports, but 1rem is converted to 10px via html 62.5%, plus I will use the pixels back anyway, then why use rem in the first place, and not just stick to the pixel? I no longer see the benefits of using rem .

Or did I miss some important rem advantage?

Answer 1

So, after all the research, I came to the conclusion that the only advantage of rem is that users who use a larger font size in their browser settings will get the font size scaled correctly, and the px will not scale. In other words, using rem for font-size , adds Accessibility support to your site.

Summarizing:

• rem is a way to add Accessibility support to your site.
• Keep in mind that most users use scaling instead of changing the font size in their browser and phones, because access to it is much easier.
• Enlarging the browser has an additional effect on em , in other words, it evenly scales rem and px .
• Since 2012, rem supported by all major browsers on desktop and mobile devices.
• Use px as a return option for IE8 and below.
• Despite the fact that W3C is not specified, all browsers on desktop and mobile devices implemented a default font-size of 16 pixels (do not be shy yourself), which is equal to 1 rem / em
• To simplify the conversion between px and rem , you can use html {font-size: 62.5%;} , which converts 10px to 1rem

In one sentence: use rem from px to font-size to support accessibility.

 html { font-size: 62.5%; } .your_class { font-size: 16px; font-size: 1.6rem; } 

Answer 2

62.5% only works if the default font-size browser remains 16px by default. Just because you, as an ordinary healthy person (or at least a person with normal vision), have default settings for font-size , you cannot assume that this is true for the entire population.

Consider those with poor eyesight. In their case, they will have a font size of 20px or 28px for very poor vision. If everything is supported in px , then your display will not change for users with different needs. Content overflows its containers and your site will look broken.

Or maybe you can relate to having a piece of the trash computer in the place where you work. I used to have old 800x600 monitors on the factory floor at my first job. The default font size is 10 pixels. Websites looked awful on them, and all because everyone expected that the content on their site would consume much more space than it actually was.

The obvious solution is to make the layout respond to the content. font-size is one of the few elements that the browser brings to the table on its own, based on the user's preference. Since this user is your audience, you should respect their preferences, as you want them to continue to visit your site, and do not hate to use it when they do it.

Just my 2 ¢ (and, well, the actual reason people click rem , not px ).