REM vs PX : quelle unité CSS choisir pour votre site ?

REM vs PX : la réponse courte

Le px et le rem ne s'opposent pas : ils ne répondent pas au même besoin. Le tableau ci-dessous résume ce qui les distingue en pratique.

Qu'est-ce que le pixel (px) en CSS ?

Le px est une unité de longueur absolue en CSS. Contrairement à une idée reçue, un px CSS n'est pas un pixel physique de l'écran : la documentation MDN sur les longueurs CSS rappelle qu'il vaut 1/96e de pouce. Le navigateur l'adapte à la densité de l'écran : sur un écran haute définition, 1px CSS occupe plusieurs pixels physiques.

Ce qui compte en pratique : une taille en px grossit quand l'internaute zoome sur la page, mais elle ignore la taille de police par défaut qu'il a choisie dans les paramètres de son navigateur. C'est là que se joue la différence avec le rem.

Ses atouts : une lecture directe des valeurs de la maquette Figma et un contrôle exact des détails fins (bordure de 1px, ombre). Sa limite : un texte en px reste à la même taille pour quelqu'un qui a demandé des caractères plus grands.

Qu'est-ce que le rem (root em) ?

Le rem (root em) est une unité relative égale à la taille de police de l'élément racine du document, la balise html. Si la racine est à 16 px, 1rem vaut 16px et 1.5rem vaut 24px. Si l'internaute passe sa taille de police par défaut à 20 px, 1rem vaut 20px et tout ce qui est en rem grandit dans les mêmes proportions.

Ne confondez pas rem et em. Le em dépend de la taille de police de l'élément parent (ou de l'élément lui-même), ce qui crée des effets de cascade quand les éléments sont imbriqués. Le rem n'a qu'une seule référence, la racine, et reste donc prévisible partout dans la page.

Pourquoi le rem est plus accessible que le px

Les navigateurs permettent de modifier la taille de police par défaut, par exemple dans Chrome via Paramètres, puis Apparence, puis Taille de la police. Les personnes malvoyantes et beaucoup de seniors utilisent ce réglage. Un texte défini en rem le respecte, un texte défini en px ne le respecte pas.

Le critère 1.4.4 des WCAG 2.2 (W3C) exige qu'un texte puisse être agrandi jusqu'à 200 % sans perte de contenu ni de fonctionnalité. Le zoom suffit techniquement à respecter ce critère, mais le rem va plus loin : il applique la préférence de l'internaute sans qu'il ait à zoomer sur chaque site. Pour le reste des bonnes pratiques, voir notre guide sur l'accessibilité web.

Webflow va dans le même sens : la documentation de FlowKit, son framework CSS officiel, fait du rem l'unité principale pour la typographie et les espacements, et réserve le px aux bordures et aux ombres, « à utiliser avec parcimonie ».

Quand utiliser px, rem ou une autre unité ?

La convention que nous appliquons chez Synqro sur nos intégrations Webflow tient en une phrase : textes et espacements en rem, bordures et ombres en px, largeurs en pourcentage plafonnées par un max-width. Une convention écrite compte plus que l'unité elle-même, car elle évite qu'un site mélange les deux au hasard au fil des mises à jour.

Comment convertir des px en rem ?

La formule : valeur en rem = valeur en px ÷ taille de police de la racine. Avec la valeur par défaut de 16 px, 24px ÷ 16 = 1.5rem. Voici les conversions les plus courantes.

L'astuce des 62,5 % : utile, mais avec précautions

Certains intégrateurs écrivent html { font-size: 62.5%; } pour que 1rem vaille 10px avec le réglage par défaut. Les calculs deviennent plus simples (24px = 2.4rem) et la préférence de l'internaute reste respectée, car la valeur est exprimée en pourcentage.

Deux précautions : redéfinissez la taille du body (1.6rem pour retrouver 16 px), et vérifiez les composants tiers qui supposent 1rem = 16px. Surtout, n'écrivez jamais html { font-size: 10px; } : une valeur en px sur la racine écrase la préférence de l'internaute et annule l'intérêt du rem.

Utiliser le rem dans Webflow

Le Designer de Webflow utilise le px par défaut, mais chaque champ de taille accepte d'autres unités. Voici la méthode que nous suivons.

1. Saisir l'unité. Dans le Style panel, tapez directement la valeur avec son unité (1.125rem) ou cliquez sur l'unité affichée à droite du champ pour choisir REM.
2. Poser la base. Stylez le tag Body (All pages) et les balises H1 à H6 en rem, pour que tout le site en hérite.
3. Créer des variables de taille. Dans le panneau Variables, créez vos tailles de texte et d'espacement en rem. Selon l'aide Webflow (mise à jour en juin 2025), une variable peut contenir clamp(), calc(), min(), max() ou color-mix(). Par exemple clamp(2rem, 1.5rem + 2vw, 3.5rem) pour un titre fluide.
4. Changer la racine si besoin. Webflow n'a pas de réglage dédié : il faut une règle html { font-size: ... } en code personnalisé. Préférez un pourcentage à une valeur en px.
5. Tester. Passez la taille de police de votre navigateur sur « Très grande » et parcourez les pages : aucun texte ne doit déborder ni être coupé.

Le rem ne règle pas tout le responsive : il faut toujours adapter les mises en page par breakpoint. Voir notre guide pour créer un site responsive sur Webflow et notre article sur la méthode Client-First, qui structure les classes et les tailles d'un projet Webflow.

Les erreurs fréquentes avec px et rem

• Fixer la taille de la balise html en px, ce qui neutralise la préférence de l'internaute.
• Écrire tous les textes en px parce que la maquette Figma est en px.
• Imbriquer des tailles en em, qui se multiplient d'un niveau à l'autre.
• Donner une hauteur fixe en px à un bloc de texte : le texte déborde dès qu'il est agrandi.
• Mélanger les unités sans convention écrite, ce qui rend le site difficile à maintenir.

Synqro, Webflow Premium Partner fondé en 2019, intègre des sites Webflow avec ces conventions dès la première page. Si votre site actuel mélange les unités sans logique, notre équipe Webflow peut auditer et reprendre la base de styles.