Badge Webflow Award Winner 2023

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

Pourquoi nous utilisons les REM plutôt que les pixels dans nos développements web ? Une explication claire et précise de la différence entre deux unités de mesures REM et pixels.

Publié le 
22/2/2022
Modifié le 
23/3/2023
5 min
Pixels barré vs REM

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

Prêt(e) à avoir un site qui convertit ?

Améliorer votre visibilité en ligne grâce à l’experience, l’excellence et la réactivité de Digidop !

Restez informés de l’actu Digidop !