REM CSS : guide complet pour un design responsive
Développement
•
X min
•
06.03.2026
Résumez cet article avec l'IA
L'unité CSS rem (root em) est relative à la taille de police de l'élément racine html, soit 16px par défaut. Elle garantit des tailles cohérentes sur tout le site, respecte les préférences d'accessibilité des utilisateurs, et simplifie la maintenance d'un design responsive. C'est aujourd'hui la best practice recommandée par les développeurs front-end pour la typographie et les espacements. Dans Webflow, rem est disponible nativement dans le Designer et constitue la base de la méthodologie Client-First. Cet article explique ce qu'est rem, pourquoi les développeurs l'utilisent, comment l'adopter dans Webflow, et quelles erreurs éviter.
Si vous travaillez sur un site Webflow ou si vous collaborez avec un développeur front-end, vous avez probablement vu passer l'unité "rem" dans les fichiers CSS ou dans le Designer. Elle apparaît dans les tailles de texte, les marges, les paddings, et remplace de plus en plus les pixels dans les projets professionnels. Pourtant, beaucoup de designers et de responsables marketing ne savent pas exactement ce que rem signifie, ni pourquoi les développeurs insistent pour l'utiliser à la place des pixels.
La réponse courte : rem signifie "root em". C'est une unité de mesure CSS qui se base sur la taille de police de l'élément racine html, fixée à 16px par défaut par tous les navigateurs. Quand un développeur écrit font-size: 1.5rem, cela équivaut à 24px (1.5 × 16). L'intérêt est que toutes les valeurs en rem partagent la même référence, ce qui rend le design cohérent, maintenable et accessible.
Cet article explique en détail ce qu'est rem, pourquoi c'est devenu une best practice incontournable pour les développeurs, comment elle se compare aux pixels et à em, comment l'utiliser concrètement dans Webflow, et quelles erreurs éviter pour en tirer le maximum de bénéfices.
Qu'est-ce que l'unité rem en CSS ?
REM signifie "root em". C'est une unité de mesure CSS dont la valeur est calculée par rapport à la taille de police de l'élément racine du document, c'est-à-dire la balise <html>. Par défaut, tous les navigateurs modernes fixent cette taille racine à 16px. Cela signifie que 1rem = 16px, 2rem = 32px, 0.5rem = 8px, et ainsi de suite. La formule est toujours la même : la valeur en rem multipliée par la taille racine donne le résultat en pixels.
Ce qui rend rem particulièrement utile, c'est que cette référence est unique et stable. Contrairement à l'unité em, qui se calcule par rapport à l'élément parent (et dont la valeur peut donc varier selon le niveau d'imbrication dans le HTML), rem pointe toujours vers la même source : la racine. Peu importe que l'élément soit imbriqué dans trois ou dix conteneurs, 1.5rem donnera toujours exactement le même résultat. Cette prévisibilité est la raison principale pour laquelle les développeurs front-end préfèrent rem à em pour les tailles globales.
Voici un exemple minimal qui illustre le fonctionnement :
/* La racine garde la valeur par défaut du navigateur */html { font-size: 100%; /* = 16px par défaut */}/* Toutes les valeurs rem se réfèrent à cette racine */h1 { font-size: 2rem; /* = 32px */}p { font-size: 1rem; /* = 16px */ margin-bottom: 1.5rem; /* = 24px */}Le support navigateur est universel. L'unité rem est supportée par tous les navigateurs modernes, y compris les versions mobiles, et la compatibilité remonte jusqu'à IE9. Il n'existe aucune raison technique de ne pas l'adopter en 2026.
Pourquoi les développeurs utilisent rem (et pas les pixels)
Les pixels sont intuitifs. 16px, c'est clair, c'est précis, on sait exactement ce qu'on obtient. Alors pourquoi les développeurs professionnels recommandent-ils d'utiliser rem pour la typographie et les espacements plutôt que les pixels ? La réponse tient en trois raisons concrètes qui ont un impact direct sur la qualité d'un site web.
La première raison est l'accessibilité. Quand un utilisateur modifie la taille de police par défaut de son navigateur (ce qui est courant chez les personnes malvoyantes ou ayant des difficultés de lecture), les éléments dimensionnés en rem s'adaptent automatiquement et proportionnellement. Un paragraphe à 1rem passera de 16px à 20px si l'utilisateur a configuré sa taille par défaut à 20px. Avec des pixels, rien ne change : le texte reste figé à la valeur choisie par le développeur, et l'utilisateur perd la capacité d'adapter l'affichage à ses besoins. Les WCAG, les recommandations internationales en matière d'accessibilité web, demandent explicitement de ne pas bloquer le redimensionnement du texte. Utiliser rem respecte cette exigence de façon native, sans effort supplémentaire.
La deuxième raison est la maintenabilité. Quand toutes les tailles de texte, marges et paddings d'un site sont exprimées en rem, elles partagent la même base de référence. Si l'équipe décide d'ajuster l'échelle typographique globale, il suffit de modifier la taille racine (via une media query, par exemple) pour que l'ensemble du design s'adapte proportionnellement. Avec des pixels, il faudrait modifier chaque valeur individuellement, ce qui est fastidieux sur un site de 30 pages et source d'incohérences. Sur les projets de taille moyenne à grande, cette différence représente un gain de temps concret en maintenance et en évolution du design.
La troisième raison est la cohérence du design system. Les méthodologies modernes comme Client-First (Finsweet) ou d'autres systèmes de classes structurés utilisent rem comme unité de base pour tout le système d'espacements et de typographie, avec des paliers standardisés (0.5rem, 1rem, 1.5rem, 2rem, etc.). Un site construit en rem avec des valeurs cohérentes est plus facile à reprendre par un autre prestataire, plus lisible pour un développeur qui rejoint le projet en cours de route, et plus simple à faire évoluer dans le temps. C'est un investissement en structure qui réduit les coûts de maintenance sur le long terme.
REM vs px vs em : comprendre les différences
Pour choisir la bonne unité au bon endroit, il faut comprendre ce que chacune fait et dans quel contexte elle excelle.
L'unité px est absolue. 16px reste 16px quelles que soient les préférences de l'utilisateur, le niveau d'imbrication dans le HTML, ou la taille de l'écran. Cette rigidité est un avantage pour les éléments qui doivent garder une dimension fixe : bordures fines (1px, 2px), ombres portées, icônes décoratives et détails visuels qui ne doivent pas changer avec la taille du texte. En revanche, utiliser px pour la typographie ou les espacements empêche le design de s'adapter aux préférences utilisateur et aux différents contextes d'affichage.
L'unité em est relative à l'élément parent. Si un conteneur a un font-size de 18px, alors 1em à l'intérieur de ce conteneur vaut 18px. C'est utile pour créer des composants auto-proportionnés, comme un bouton dont le padding s'adapte automatiquement quand on change la taille du texte. Le problème apparaît avec l'imbrication : chaque niveau multiplie la valeur. Un font-size de 1.2em dans un élément imbriqué trois niveaux donne 1.2 × 1.2 × 1.2 = 1.728em, un résultat difficile à anticiper et à déboguer. C'est pour cette raison que em est recommandé uniquement pour des ajustements locaux à l'intérieur de composants isolés, et non pour structurer l'ensemble du design.
L'unité rem est relative à la racine html, donc constante à travers tout le document. 1.5rem donne toujours le même résultat, que l'élément soit au premier niveau du DOM ou imbriqué dans dix conteneurs. Cette prévisibilité en fait le choix par défaut pour tout ce qui structure visuellement une page : typographie, marges, paddings, espacements entre sections.
La règle d'or qui fait consensus parmi les développeurs front-end : rem pour la typographie et les espacements, px pour les bordures et les ombres, % pour les largeurs fluides, et vh/vw pour les layouts plein écran.
Comment convertir px en rem
La formule est simple : valeur en rem = pixels souhaités ÷ taille de police racine. Avec la base par défaut de 16px, cela donne par exemple 24px ÷ 16 = 1.5rem. Une fois la logique comprise, la conversion devient un réflexe. Les valeurs les plus courantes finissent par être mémorisées naturellement, et une table de référence permet de retrouver les autres en quelques secondes.
Une technique populaire consiste à définir html { font-size: 62.5% } pour obtenir 1rem = 10px et simplifier les calculs mentaux (2.4rem = 24px, 1.6rem = 16px). Cette approche a un avantage réel de lisibilité, mais elle comporte un risque important. En réduisant la taille de base à 10px, elle force à redéfinir explicitement toutes les tailles de police du site. Si un composant tiers ou un élément n'est pas redéfini, il héritera de cette taille réduite et le résultat sera illisible. Certains experts front-end déconseillent cette technique pour cette raison, et nous partageons cet avis.
La recommandation la plus sûre est de garder html { font-size: 100% } (soit 16px par défaut) et de travailler directement avec les valeurs rem correspondantes. C'est plus fiable pour l'accessibilité, c'est l'approche adoptée par la majorité des design systems modernes, et c'est aussi celle que recommande la méthodologie Client-First.
Utiliser rem dans Webflow : guide pratique
Webflow utilise px par défaut dans le Designer, mais le passage à rem est simple et natif. Il n'y a rien à installer ni à configurer. Pour changer l'unité d'un champ (font-size, margin, padding, width, gap, etc.), il suffit de cliquer sur le menu déroulant d'unité à côté du champ de saisie et de sélectionner "rem". L'unité rem est disponible pour l'ensemble des propriétés numériques du Designer, ce qui permet de l'adopter progressivement ou intégralement selon les besoins du projet.
Webflow propose aussi un raccourci très utile pour la conversion. Le Designer supporte les calculs mathématiques directement dans les champs de saisie. Si vous connaissez la valeur en pixels et souhaitez la convertir en rem, tapez par exemple 24/16rem dans le champ. Webflow effectuera le calcul automatiquement et affichera 1.5rem. Ce raccourci évite de consulter une table de conversion à chaque fois et accélère considérablement le workflow quand on bascule un projet existant de px vers rem.
La méthodologie Client-First développée par Finsweet a fait de rem la pierre angulaire de son système de design. Toutes les tailles typographiques et les espacements y sont définis en rem, avec des paliers standardisés : 0.5rem, 1rem, 1.5rem, 2rem, 2.5rem, 3rem, et ainsi de suite. Cette approche rend le design system lisible et prévisible. Quand un nouveau prestataire reprend un projet construit en Client-First, il comprend immédiatement la logique des espacements sans avoir besoin de documentation supplémentaire, ce qui réduit le temps d'onboarding et les risques d'incohérence.
Un point fondamental à comprendre : Webflow respecte nativement la font-size du navigateur quand les valeurs sont en rem. Si un utilisateur a configuré sa taille de police par défaut à 20px au lieu de 16px (ce qui est courant chez les personnes malvoyantes), un texte à 1rem s'affichera à 20px sur son écran. C'est l'accessibilité qui fonctionne automatiquement, sans configuration supplémentaire, à la seule condition de ne pas avoir défini de font-size en px sur l'élément html. C'est un avantage que les pixels ne peuvent tout simplement pas offrir.
Pour démarrer un nouveau projet Webflow en rem, la méthode la plus efficace est de poser les fondations dès le début. Commencez par définir toutes les classes typographiques (titres h1 à h6, corps de texte, légendes, labels) en rem. Passez ensuite aux paddings et marges des sections et des composants, toujours en rem. Les bordures et les ombres peuvent rester en px sans aucun problème, puisque ces éléments n'ont pas besoin de s'adapter aux préférences utilisateur. Cette approche s'intègre naturellement dans un workflow de création de site Webflow structuré et facilite la maintenance sur le long terme.
Aller plus loin : clamp() et typographie fluide
La fonction CSS clamp() est le complément naturel de rem pour les équipes qui veulent aller un cran plus loin dans le responsive. Elle permet de créer une typographie qui s'adapte de façon fluide à la largeur de l'écran, sans avoir besoin de définir des media queries pour chaque breakpoint. La syntaxe prend trois paramètres : un minimum, une valeur préférée, et un maximum. Les bornes minimum et maximum sont généralement exprimées en rem, tandis que la valeur préférée utilise vw (viewport width) pour créer une interpolation progressive entre les deux.
/* Typographie fluide : le titre s'adapte entre 1.5rem et 3rem */h2 { font-size: clamp(1.5rem, 2.5vw, 3rem);}Dans cet exemple, le titre fera au minimum 1.5rem (24px sur une base 16px), au maximum 3rem (48px), et s'adaptera progressivement entre les deux en fonction de la largeur du viewport. Le résultat est une transition douce entre les tailles, sans saut brusque d'un breakpoint à l'autre, ce qui produit un rendu beaucoup plus naturel et professionnel que les changements de taille discrets.
Un point à noter pour les utilisateurs Webflow : clamp() n'est pas encore supporté nativement dans le Designer. Pour l'utiliser, il faut passer par du custom code via un embed HTML ou une balise <style> dans le head du projet. Si votre projet utilise déjà du custom code pour des animations GSAP par exemple, l'ajout de clamp() dans le même workflow ne représente pas un effort supplémentaire significatif. Les deux approches se combinent très bien et le code reste simple à maintenir.
Erreurs fréquentes avec rem (et comment les éviter)
Plusieurs erreurs reviennent régulièrement dans les projets qui adoptent rem. Certaines peuvent annuler complètement les bénéfices attendus, ce qui est d'autant plus frustrant qu'elles sont faciles à éviter une fois identifiées.
La plus problématique est de définir une font-size en px sur l'élément html. Écrire html { font-size: 16px } semble anodin, mais cette déclaration annule le bénéfice principal de rem. Si l'utilisateur a configuré sa taille par défaut à 20px dans son navigateur, cette ligne de code la force à 16px et l'accessibilité est perdue. La bonne pratique est de toujours garder html { font-size: 100% } ou de ne pas définir de font-size sur html du tout, ce qui laisse le navigateur utiliser sa valeur par défaut et préserve le lien entre rem et les préférences utilisateur.
La deuxième erreur est d'utiliser des valeurs rem avec des décimales longues qui rendent le code difficile à lire et à maintenir. Un padding de 1.4375rem (23px) est techniquement correct, mais quand le fichier CSS contient des dizaines de valeurs de ce type, la maintenance devient pénible et les erreurs se multiplient. Il vaut mieux arrondir aux valeurs standardisées (1.5rem pour 24px plutôt que 1.4375rem pour 23px) ou utiliser les paliers définis par le design system du projet. La cohérence prime sur la précision au pixel près.
La troisième erreur est de mélanger px et rem sans logique claire. Si les titres sont en rem, les corps de texte en px et les marges en em, la maintenance devient complexe et le comportement responsive imprévisible. La règle est simple : choisir rem comme unité par défaut pour tout ce qui concerne la typographie et les espacements, et réserver px uniquement aux éléments qui doivent rester fixes comme les bordures, les ombres et les détails décoratifs. Cette convention doit être partagée avec toute l'équipe dès le début du projet.
La quatrième erreur est d'oublier de tester avec différentes tailles de police navigateur. Beaucoup de designers testent uniquement avec la taille par défaut de 16px et considèrent le travail terminé. Pour vérifier que le design s'adapte correctement en rem, il faut modifier la taille de police dans les paramètres du navigateur (20px, 24px) et observer le rendu. C'est lors de ces tests que les débordements, les chevauchements et les problèmes de mise en page apparaissent. Les corriger en amont est beaucoup plus simple qu'après la mise en production.
Enfin, utiliser rem pour les bordures est une erreur courante mais inutile. Une bordure de 1px doit rester à 1px quelle que soit la taille du texte. La définir en rem la ferait grossir proportionnellement quand l'utilisateur augmente sa taille de police, ce qui produit un résultat visuellement incohérent et n'apporte aucun bénéfice en termes d'accessibilité.
Checklist : passer un projet Webflow en rem
- Vérifier que l'élément html n'a pas de font-size définie en px. Si c'est le cas, la remplacer par
font-size: 100%ou la supprimer entièrement pour laisser le navigateur utiliser sa valeur par défaut. - Définir toutes les classes typographiques (h1 à h6, corps de texte, légendes, labels) en rem dès le début du projet, avant de commencer l'intégration des contenus.
- Convertir les marges et paddings des sections et des composants en rem. Utiliser l'astuce Webflow
valeur/16remdans les champs de saisie pour convertir rapidement depuis les pixels. - Garder les bordures, ombres portées et détails décoratifs en px, car ces éléments doivent conserver une taille fixe indépendamment des préférences utilisateur.
- Adopter des valeurs rem standardisées et lisibles : 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4. Éviter les décimales longues comme 1.4375rem qui rendent le code difficile à maintenir.
- Tester le design avec au moins trois tailles de police navigateur différentes (16px, 20px, 24px) pour vérifier le comportement responsive et détecter les débordements éventuels.
- Vérifier l'accessibilité : le zoom navigateur à 200 % ne doit pas provoquer de chevauchements ni de contenus coupés.
- Documenter les valeurs rem utilisées dans le projet (table de correspondance px/rem) pour que tout contributeur puisse maintenir la cohérence du design system.
- Si le projet suit la méthodologie Client-First, aligner les valeurs rem sur les paliers standardisés (0.5rem, 1rem, 1.5rem, 2rem, etc.) pour garantir la compatibilité avec l'écosystème Finsweet.
- Avant la mise en production, faire une vérification complète sur mobile, tablette et desktop pour s'assurer que les espacements en rem se comportent correctement sur tous les breakpoints.
Conclusion
Rem est l'unité CSS de référence pour construire un design responsive et accessible. Elle offre une base de référence unique via l'élément racine, une cohérence à l'échelle du site, et le respect automatique des préférences utilisateur. Dans Webflow, son adoption est simple, native et compatible avec les méthodologies professionnelles comme Client-First. C'est pour ces raisons que les développeurs front-end la recommandent systématiquement pour la typographie et les espacements.
Le point de départ est concret : basculer les classes typographiques et les espacements en rem, garder px pour les bordures et les ombres, tester avec différentes tailles de police navigateur, et documenter les valeurs utilisées. Ces quelques changements suffisent à améliorer significativement la qualité responsive et l'accessibilité d'un projet.
Si vous lancez un projet Webflow et souhaitez partir sur des bases solides avec un design system structuré, un responsive propre et une accessibilité intégrée dès le départ, vous pouvez nous contacter pour un premier échange sur votre projet.
FAQ
Qu'est-ce que l'unité rem en CSS ?
REM est l'abréviation de « root em ». Il s'agit d'une unité CSS relative à la taille de police de l'élément HTML racine. Par défaut, les navigateurs définissent cette taille à 16 pixels, donc 1rem = 16 pixels. Contrairement à em (qui dépend de l'élément parent), rem fait toujours référence à la racine, ce qui la rend prévisible et cohérente quelle que soit la profondeur d'imbrication dans le code HTML.
Quelle est la différence entre rem et em ?
Em est relative à la taille de police de l'élément parent direct. Lors de l'imbrication, les valeurs se multiplient (1,2 em × 1,2 em = 1,44 em), ce qui peut produire des résultats imprévisibles. Rem est toujours relatif à l'élément HTML racine, il reste donc constant dans tout le document. Pour la typographie et l'espacement global, rem est la recommandation par défaut des développeurs frontaux.
Comment convertir des pixels en rem ?
La formule est la suivante : valeur rem = pixels ÷ taille de police racine. Avec une base par défaut de 16 pixels, cela donne 24 px ÷ 16 = 1,5 rem. Dans Webflow, vous pouvez taper 24/16rem directement dans un champ de saisie Designer et le calcul sera effectué automatiquement.
Devriez-vous utiliser rem ou px dans Webflow ?
Rem est recommandé pour la typographie, les marges et les remplissages. Px convient aux bordures, aux ombres et aux détails décoratifs qui doivent conserver une taille fixe. Webflow prend en charge rem de manière native dans le Designer et respecte les préférences de taille de police du navigateur lorsque rem est utilisé, ce qui améliore l'accessibilité du site sans aucune configuration supplémentaire.
L'astuce des 62,5 % est-elle recommandée ?
Définir html {font-size : 62,5 %} pour obtenir 1rem = 10px simplifie les mathématiques mentales, mais comporte des risques. Il réduit la taille de base à 10 pixels, ce qui vous oblige à redéfinir chaque taille de police du site. Si un élément n'est pas redéfini, il héritera de la taille réduite et deviendra illisible. La recommandation la plus sûre est de conserver html {font-size : 100%} et de travailler avec des valeurs rem basées sur la valeur par défaut de 16 pixels.
Est-ce que rem améliore l'accessibilité du site Web ?
Oui Les unités Rem respectent les préférences de taille de police configurées par l'utilisateur dans son navigateur. Si un utilisateur augmente sa taille par défaut (ce qui est courant chez les personnes malvoyantes), l'ensemble du design basé sur les rem s'adapte proportionnellement. Les WCAG recommandent de ne pas bloquer le zoom et de ne pas définir de tailles de pixels absolues sur le texte. L'utilisation de rem contribue directement à répondre à ces critères, et c'est l'une des principales raisons pour lesquelles les développeurs frontaux en ont fait la norme.
Nos derniers articles
Vous trouverez ici des articles sur les outils No-Code, des conseils et astuces, ainsi que des études de cas pour des secteurs d'activité spécifiques. Nous publions régulièrement des articles pour vous aider à tirer le meilleur parti de votre prochain projet.
Essayez gratuitement nos derniers outils pour mettre à jour votre site Web
BeBranded Contents: find your next tools to optimize your Webflow website.
Prêt à booster vos conversions ?
Notre équipe est là pour comprendre vos besoins et travailler avec vous pour créer vos prochains projets.