Why do we use REM instead of pixels in our web developments? A clear and precise explanation of the difference between the two units of measurement REM and pixels.
Rem and pixel (px) are two units of measurement frequently used in CSS and HTML to define font size, margin or image size for example.
However, the two units have a big difference in terms of web accessibility, because a pixel is not responsive and that's why it'sbetter to use REM. We explain why.
The pixel problem
A pixel (px) is not responsive
Pixels are a fixed value. 1 pixel = 1 pixel. It is an absolute and defined unit. This is a good point at first sight, because you can design to size, pixel by pixel.
But shouldn't bespoke be a design that adapts to its different users? That's my definition of good design. And that's where I have a problem with pixels, because as an absolute value, 1 px will always remain 1 px. It will not adapt to the preferences of the users of our websites.
The units -Pixels- therefore create barriers to web accessibility (for the visually impaired for example).
Rem Unit: the solution?
1 REM(root empheral unit ) adapts itself to the resolution choices of its user! Yes, the CSS design and HTML will adapt to the preferences defined by the user in his browser. (Google for example)
By default 1 rem = 16 pixels, but you can for example define in your preferences that 1 rem = 24 pixels. This will allow for a larger and more readable font design.
An example?
You have probably already seen this feature. On an iPhone for example. A "zoom" effect on messages, e-mails, etc. This responsive display functionality, adapted to user preferences, is a good illustration of the advantage of using REM (relative unit) on your pages.
Test your site! Test the adaptive display of your elements and texts directly:
- Go to your browser settings
- Appearance tab
- Change the font size
- Return to your site
- Test your displays in REM vs Pixel
Converting pixels to REM
You have a website with a Pixel design and want to convert it to REM? It's quite simple. (Especially if you use Webflow 😉 )
1 rem = 16 pixels. So all you have to do is divide the units of your design in pixels by 16.
For example, a font that was 32 pixels in size becomes: 2 rem
32 (px) /1 6 = 2 (rem)
How to convert Pixels to REM on Webflow?
"Webflow made it easy
You can perform the division directly in the designer.
.jpg)
.jpg)
