REM et Pixel : quelle différence sur votre site ?

Documentation
February 22, 2022
3 min
Pixels barré vs REM
Résumez cet article avec une IA
Points clés de l'article

Rem et pixel (px) sont deux unités de mesures fréquemment utilisés en CSS et HTML pour définir la taille de la police, la marge ou bien une taille d'image par d'exemple.

Les deux unités ont pourtant une grande différence en terme d'accessibilité web, car un pixel n'est pas responsif et c'est pour cela qu'il est préférable d'utiliser les REM. On vous explique pourquoi.

Le problème des pixels

Un pixel (px) n'est pas responsif

Les pixels sont une valeur fixe. 1 pixel = 1 pixel. C'est une unité absolue et définit. C'est un bon point à première vue, car vous pouvez donc designer sur mesure, au pixel près.

Mais sur mesure ne devrait-il pas plutôt être un design qui s'adapte à ses différents utilisateurs ? C'est en tout cas ma définition d'un bon design. Et c'est là, que les pixels me posent un problème, car en tant que valeur absolue 1 px restera toujours 1 Px. Il ne s'adaptera donc pas aux préférences des internautes de nos sites webs.

Les unités -Pixels- crées donc des barrières à l'accessibilité web (pour les malvoyants par exemple).

Unité Rem : la solution ?

1 REM (root empheral unit, root = racine en anglais) s'adapte lui aux choix de résolution de son utilisateur ! Oui le design CSS et l'HTML s'adapteront en fonction des préférences définit par l'internaute dans son navigateur. (Google par exemple)

Par défaut 1 rem = 16 pixels, mais vous pouvez par exemple définir dans vos préférences qu'un 1 rem = 24 pixels. Cela permettra d'avoir, un design de police plus grosse et donc plus lisible.

Un exemple ?

Vous avez déjà sûrement vue cette fonctionnalité . Sur un Iphone par exemple. Un effet  "zoom" sur les messages, e-mails, etc.. Cette fonctionnalité d'affichage responsif, adaptée aux préférences utilisateurs est une belle illustration de l'avantage d'utiliser les REM (unité relatif) sur vos pages.  

Changement des préférences apparence dans le navigateur Google

Testez votre site ! Testez directement l'affichage adaptatif de vos éléments et textes  :

  1. Allez sur vos paramètres de navigateurs
  2. Onglet apparence
  3. Changez la taille de la police
  4. Retournez sur votre site
  5. Testez vos affichages en REM vs Pixel

Convertir les pixels en REM

Vous avez un site web avec un design en Pixel et souhaitez le convertir en REM ? C'est assez simple. (Surtout si vous utilisez Webflow 😉)

1 rem = 16 pixel. Il vous suffit donc de diviser les unités de vos design en pixel par 16.

Par exemple, une police d'écriture qui avait pour mesure 32 pixels devient : 2 rem

32 (px) /1 6 = 2 (rem)

Comment convertir les Pixel en REM sur Webflow ?

"Webflow made it easy"

Vous pouvez effectuer la division directement dans le designer.

Coversion de pixels en rem dans le designer Webflow
Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Evénements
Webflow

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.
Aperçu visuel de plusieurs typographies modernes utilisées sur le web en 2025, chacune présentée sur une image de fond inspirante : Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, et d’autres — une composition graphique mettant en avant la diversité typographique.
Documentation
Design

Les 20 meilleures typographies pour un site web moderne et impactant en 2025

Les 20 meilleures typographies pour un site web moderne et impactant en 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Transformez votre site web en un moteur de croissance.

Nous contacter