REM and Pixel: what difference does it make on your site?

Rem and pixel (px) are two frequently used measurement units in CSS and HTML for defining font size, margin, or even image size, for example.

However, the two units have a significant difference in terms of web accessibility, because a pixel is not responsive and that is why it is preferable to use REM. Let us explain why.

The problem with pixels

A pixel (px) is not responsive

Pixels are a fixed value. 1 pixel = 1 pixel. It is an absolute and defined unit. This seems advantageous at first glance, as it allows for precise pixel-perfect design.

But shouldn’t a tailored design be one that adapts to its various users? That, in fact, is my definition of good design. This is where pixels become an issue, as an absolute value 1 px will always remain 1 px. Therefore, it will not adapt to the preferences of the internet users visiting our websites.

The units -Pixels- thus create barriers to web accessibility (such as for visually impaired individuals).

Rem units: the solution?

1 REM (root em size, root = root in English) adapts to the resolution choices of its user! Yes, CSS and HTML design will adjust according to the preferences set by the user in their browser. (For example, Google)

By default, 1 rem = 16 pixels, but you can specify in your preferences that 1 rem = 24 pixels. This allows for a larger font design, thereby improving readability.

An example?

You have probably already noticed this functionality. Take an iPhone, for example. A "zoom" effect on messages, emails, etc. This responsive display feature, tailored to user preferences, elegantly illustrates the advantage of using REM (relative units) in your pages.  

Test your site! Directly test the adaptive display of your elements and texts  :

1. Go to your browser settings
2. Appearance tab
3. Change the font size
4. Return to your site
5. Test your displays in REM vs Pixel

Converting pixels to REM

Do you have a website designed in Pixels and want to convert it to REM? It's quite simple. (Especially if you’re using Webflow 😉)

1 rem = 16 pixels. So you just need to divide your pixel design units by 16.

For example, a font size that was 32 pixels becomes: 2 rem

32 (px) / 16 = 2 (rem)

How to convert Pixels to REM in Webflow?

"Webflow made it easy"

You can perform the division directly in the designer.

‍