Rem
Webflow utilise par défaut les unités px. Si nous tapons "10" dans n'importe quelle entrée du Designer et que nous appuyons sur "Enter", il définira "10px".
Client-First utilise les unités rem, que nous pouvons sélectionner dans la liste déroulante des unités. (Ou nous pouvons directement taper notre valeur + REM + enter)
C’est quoi un REM ?
Rem est l'abréviation de "Root EM".
- Le rem est une unité de mesure relative basée sur la taille de la police (font-size) de l'élément racine.
- L'élément racine est html.
- Rem est donc relatif à la taille de la police html.
- La plupart des tailles appliquées dans Client-First sont en rem.
REM vs Pixel quelle est la différence ?
Application de la taille de la police du navigateur
Dans Client-First, nous appliquons les tailles de police (font-size) html du navigateur.
Les navigateurs utilisent 16px comme taille de police (font-size) html par défaut.
La conversion 1rem = 16px est donc la valeur par défaut du navigateur.
Sur la base des tailles approuvées par Client-First, nous pouvons effectuer des conversions rapides de px en rem. Par exemple, les valeurs approuvées par Client-First sont 0,5, 1, 1.5, 2, 2.5, 3, et ainsi de suite.
Rem et Client-First forment un puissant mix pour suivre les meilleures pratiques d'accessibilité web.
Un peu de maths
Chaque 16px correspond à 1rem lorsque la taille de la police (font-size) du navigateur est définie sur "default" dans les paramètres du navigateur.
Lorsque nous construisons notre projet Webflow, nous utilisons toujours 16px comme valeur de base pour le calcul des rem.
Chaque conversion de mesure rem est un multiple de 16.
Pour convertir une valeur en px en rem, divisez cette valeur par 16.
64px / 16px = 4rem
À l’inverse, pour convertir une valeur rem en px, multipliez cette valeur par 16.
2rem x 16px = 32px
Pour des raisons de confort, nous suggérons d'utiliser des valeurs REM facilement lisibles comme 1, 2, 2.5, 3, 4, 5.
Nous voulons éviter l'utilisation de valeurs numériques longues comme 8,4375rem. Ces valeurs sont plus difficiles à mémoriser et nous ralentissent dans notre travail.
Calculer directement dans le designer Webflow
Dans la plupart des entrées d'unités du designer Webflow, nous pouvons calculer nativement la valeur rem.
Dans l'entrée “width” du Designer, tapez "100/16rem", appuyez sur "Enter", et vous verrez la valeur rem calculée.
Nous pouvons diviser n'importe quel nombre par 16 pour obtenir sa valeur en rem, directement dans le designer Webflow.
Pourquoi et comment utiliser les REM dans Webflow ?
Les avantages en matière d'accessibilité
Définir sur la taille de la police du navigateur
Les navigateurs utilisent 16px comme taille de police html par défaut mais les navigateurs permettent à l'utilisateur de mettre à jour la taille de police par défaut selon leurs préférences.
La modification des préférences utilisateurs permet de modifier les paramètres de la taille de la police.
Les paramètres de taille de police des navigateurs sont un sujet essentiel en matière d'accessibilité. Lorsque les utilisateurs mettent à jour la police de leur navigateur, le contenu du site Web doit s'adapter à ce changement.
Le système rem de Client-First s'adapte parfaitement aux paramètres de taille de police du navigateur de l'utilisateur.
Lorsque nous travaillons dans d'autres unités de mesure, comme les px et les vw, nous ignorons les préférences de l'utilisateur pour mettre à jour les paramètres de taille de police de son navigateur.
Le zoom du navigateur
Le rem respecte également les commandes de zoom du navigateur de l'utilisateur. Lorsqu'un utilisateur effectue un zoom avant ou arrière sur la page, la mise en page et le contenu en Rem s'adaptent à l'utilisateur.
Lorsque nous utilisons des unités vw ou vh, le zoom du navigateur ne fonctionne pas.
VW repose sur la largeur de la fenêtre du navigateur (ou sa hauteur dans le cas de vh). Seul un changement de la taille de la fenêtre du navigateur affectera les tailles définies par ces unités.
Client-First suit les meilleures pratiques en termes d'accessibilité web. La décision de travailler en rem est directement liée à cet avantage d'accessibilité et d'UX.
Pour en savoir plus sur l'accessibilité à l'aide des rem, consultez l’article comparatif entre Wizardry et Client-First. Il s'agit d'un aperçu technique des avantages du rem comme unité de mesure accessible.
PX → Rem : les valeurs recommandées
Vous trouverez ci-dessous une liste de toutes les valeurs rem recommandées une fois convertie des px.
Ces valeurs approuvées par Client-First sont une recommandation et non une exigence stricte.
Cette liste de tailles est interactive. Mettez les valeurs à jour par le biais du menu de navigation
{{fs-calc_component}}
Client-First suggère de travailler avec ces valeurs.
Mais il y a 3 exceptions à l'utilisation des valeurs ci-dessus.
1. Typographie
L'utilisation de 14px comme taille de la police est courante et recommandée lorsque 16px est trop grand.
En revanche, une taille de police de 12px est souvent trop petite pour la typographie.
14px = 0.875rem
2. Espacement de 2px
Pour un espacement minuscule, utilisez 2px. Si un espacement inférieur à 4px est nécessaire, utilisez 2px.
2px = 0.125rem
3. 1px est 1px
Lorsque vous utilisez 1px, par exemple comme bordure (border) CSS, utilisez 1px comme valeur.
Nous ne recommandons pas de convertir 1px en rem.
Les appareils Retina ont des règles de mise à l'échelle différentes de celles des périphériques non-retina. L'utilisation de 1px créera une ligne de 1px parfaitement similaire sur n'importe quel périphérique, avec ou sans retina.
1px = 1px
Finsweet Extension : un outil de migration des px vers rem
Finsweet Extension vous offre un outil pour convertir les projets créés en px en rem, en un clic!
Il convertira toutes les valeurs de votre projet en px à sa valeur convertie en rem.
Dans l'onglet Client-First de l'extension Finsweet, choisissez la fonctionnalité "PX to REM Migrator" pour faire transformer tous les pixels de votre en site en REM automatiquement.