Quelle unité pour les polices sur Webflow ?

Il existe de nombreuses unités pour choisir la taille de la police sur un site web, mais deux d’entre elles sont nettement les plus populaires : les pixels et les REM. 

Par défaut, la majorité des CRM proposent d’exprimer la taille en pixel, car cette unité est absolue. Cela signifie qu’elle est de la même taille pour tout le monde et sur tous supports de navigation. 

Ce qui est bien une erreur ! En effet, le REM est plus ergonomique et accessible car il s’adapte constamment à la page et au support sur lequel il est affiché. 

Voici un guide complet pour comprendre ce qu’est le REM, en quoi c’est la meilleure unité pour les polices et comment convertir des textes en REM sur Webflow. 

I. Qu’est qu’un REM ? 

Un REM, pour « Root em » est une unité basée sur la taille par défaut du navigateur internet de l’internaute. Un texte en REM s’adapte donc aux modifications de préférence. Cela signifie que le REM est une unité relative, qui adopte des propriétés « responsives ». 

A contrario, le Pixel est une unité absolue. La taille d’une police exprimée en pixels est donc strictement définie. Par exemple, si vous définissez une taille de police de 16 pixels, celle-ci sera constante. Elle sera indépendante de toutes modifications de sa racine ou d'autres éléments. 

Il est souvent recommandé d'utiliser les REM pour la définition de la taille de police car cela offre une meilleure adaptabilité et une meilleure expérience utilisateur, en particulier sur les appareils mobiles ou lorsque le contenu est redimensionné. 

Pour des questions d’accessibilité, il est également recommandé et nécessaire d’établir ses polices en REM. En effet, pour les personnes mal voyantes ou rencontrant des difficultés à lire votre contenu, il est primordial d’avoir l’option d’agrandir le contenu pour en améliorer la lisibilité. 

SI vous souhaitez obtenir plus d’informations sur les règles à respecter pour répondre aux normes d’accessibilité, nous vous invitons à lire notre article sur l’accessibilité numérique. 

II. Comment convertir un texte en REM sur Webflow ? 

Par défaut, la valeur d’un REM est de 16 pixels. 

Pour utiliser les REM dans votre projet Webflow, il vous suffit donc de diviser toutes vos polices définies en pixels par 16 et opter pour l’unité REM. 

La majorité des polices sur Webflow héritent de leur taille depuis des éléments globaux comme « All Paragraph », qui définit le style à appliquer à chaque paragraphe. 

Pour modifier l’ensemble de vos polices, nous vous recommandons d’utiliser des tailles en REM directement au sein de l’élément Body. 

Pour simplifier vos conversions, vous pouvez également utiliser des extensions de Webflow. Chez Afalence, nous utilisons Wizardry Technique Converter pour sa simplicité d’utilisation. Une fois l’extension installée, vous pouvez convertir une unité en REM en ajoutant un espace à la suite de la valeur en pixel. Appuyez par la suite sur Enter, et la conversion est effectuée ! 

III. Conclusion 

Il est recommandé d’utiliser les REM pour définir la taille de vos polices mais également pour définir la taille de vos éléments graphiques. En effet, si la police grandit mais que son contenant ne s’adapte pas, vous risquez d’obtenir des textes désorganisés et illisibles.  

En règle générale, les pixels ne sont à utiliser que dans certains cas précis : définir la largeur d’une bordure, arrondir les angles d’un rectangle… 

Si vous souhaitez être accompagné lors de la conversion de vos polices en REM, n’hésitez pas à nous contacter ! 

Pour retrouver d’autres astuces sur Webflow, nous vous invitons à lire nos tutoriels sur Webflow !