À propos de cet outil
Ce convertisseur fait deux choses : il traduit des pixels en rem et en em (et inversement) à partir de la taille de police de base, et il génère une expression CSS clamp() pour une typographie ou un espacement fluide, qui grandit en douceur entre deux largeurs d'écran. Le calcul détaille la pente et l'ordonnée à l'origine pour que vous compreniez la valeur produite.
Comment utiliser cet outil
- Réglez la taille de police de base (16 px par défaut dans la plupart des navigateurs).
- Convertissez une valeur : saisissez des pixels, des rem ou des em, les autres champs se mettent à jour.
- Pour une taille fluide, indiquez la taille minimale, la taille maximale et la plage de largeurs d'écran (par exemple 320 à 1280 px).
- Copiez la valeur clamp() générée dans votre feuille de style.
- Contrôlez l'aperçu pour voir la taille obtenue à différentes largeurs.
px, rem, em : trois unités, trois logiques
- px (pixel CSS). Une longueur absolue : 24 px restent 24 px, quels que soient les réglages de l'utilisateur. Elle ne tient pas compte de la taille de texte que la personne a choisie dans son navigateur.
- rem. Multiple de la taille de police de l'élément racine (
html). Si cette taille est celle par défaut (16 px), 1 rem vaut 16 px, 1,5 rem vaut 24 px. Si une personne agrandit le texte dans ses réglages, tous les rem s'agrandissent avec lui : c'est l'unité à privilégier pour les tailles de texte et les espacements qui doivent suivre. - em. Multiple de la taille de police de l'élément courant (ou, pour
font-size, de son parent). Utile pour des composants dont les marges doivent suivre leur propre texte (un bouton dont le padding vaut 0,75 em s'adapte à sa taille de police), mais attention : les em se multiplient en cas d'imbrication, ce qui peut produire des tailles inattendues.
px = rem × taille de base
Avec une base de 16 px : 24 px = 24 ÷ 16 = 1,5 rem ; 0,875 rem = 0,875 × 16 = 14 px. L'outil convertit dans les trois sens et vous permet de changer la base, par exemple pour une feuille de style qui utilise html { font-size: 62.5% } (base de 10 px).
Une remarque sur le « 62,5 % » : cette astuce rend les calculs faciles (1,6 rem = 16 px) mais change la taille par défaut de tout le texte qui n'est pas explicitement redimensionné, et elle est inutile avec les outils modernes. Il vaut mieux garder la base à 100 % et laisser le navigateur gérer.
Les tailles fluides avec clamp()
La fonction clamp(minimum, valeur préférée, maximum) limite une valeur entre deux bornes. Associée à une valeur préférée qui dépend de la largeur d'écran (vw), elle produit une taille qui grandit en continu entre deux largeurs de référence, sans point de rupture (@media) :
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);Ici, la taille vaut 16 px sur un écran de 320 px de large ou moins, 32 px à partir de 1 280 px, et varie linéairement entre les deux. Le calcul est celui d'une droite :
ordonnée à l'origine = taille min − pente × écran min
préférée = ordonnée (en rem) + pente × 100 (en vw)
L'outil effectue ce calcul et affiche la pente, l'ordonnée, le rapport entre le maximum et le minimum, ainsi que la valeur calculée à la largeur d'écran de votre choix, avec un échantillon de texte qui s'adapte à la fenêtre réelle de votre navigateur. Cela marche aussi pour les marges, les espacements (padding-block, gap) ou les largeurs, pas seulement pour les polices : choisissez la propriété dans la liste pour obtenir la ligne CSS complète.
Accessibilité : ne cassez pas le zoom
Une taille de texte qui dépend uniquement de la largeur d'écran (font-size: 2vw) ne réagit pas au zoom du navigateur ni à l'agrandissement du texte : c'est un problème d'accessibilité, car le critère WCAG 1.4.4 (« Redimensionnement du texte ») demande que le texte puisse être agrandi jusqu'à 200 % sans perte de contenu ni de fonctionnalité. Trois précautions :
- Combinez toujours une partie en rem avec la partie en vw. La formule générée par l'outil le fait : c'est la raison de l'ordonnée à l'origine exprimée en rem. Quand l'utilisateur agrandit le texte, la partie en rem grandit, ce qui permet de dépasser le plafond d'origine.
- Limitez le rapport maximum ÷ minimum. Une règle empirique, défendue notamment par l'expert en accessibilité Adrian Roselli, est de ne pas dépasser un rapport d'environ 2,5 entre la taille maximale et la taille minimale pour du texte : au-delà, un zoom à 200 % risque de ne pas produire un texte réellement deux fois plus grand qu'à la taille de base. L'outil vous prévient quand ce rapport est dépassé pour
font-size. - Testez avec le zoom du navigateur (Ctrl et + jusqu'à 200 %) et avec une taille de texte par défaut agrandie dans les réglages, sur un petit écran comme sur un grand.
Pour construire une échelle complète de tailles de titres et de texte avec cette technique, utilisez le générateur d'échelle typographique.
Quand utiliser quelle unité ?
| Usage | Unité conseillée | Pourquoi |
|---|---|---|
| Taille du texte | rem (ou clamp en rem + vw) | Respecte les réglages de l'utilisateur |
| Espacements d'un composant lié à son texte | em | Les marges suivent la taille de police du composant |
| Espacements généraux, marges de page | rem ou clamp() | Cohérence et échelle fluide |
| Bordures fines, ombres | px | Un trait de 1 px reste un trait de 1 px |
| Largeur de colonne de texte | ch (par exemple 65ch) | Lignes de longueur lisible, indépendante de la police |
Points de rupture @media | em ou rem | Les points de rupture suivent le zoom du texte (en media query, rem et em se réfèrent à la taille par défaut du navigateur) |
| Images, icônes de taille fixe | px, ou rem pour qu'elles suivent le texte | Dépend de ce que l'on veut |
Pour d'autres conversions d'unités, voir le convertisseur d'unités.
Questions fréquentes
Pourquoi utiliser des rem plutôt que des pixels ?
Le rem est relatif à la taille de police du document. Si l'utilisateur augmente la taille de texte dans son navigateur, les interfaces en rem suivent, alors que des pixels figés l'ignorent : c'est un enjeu d'accessibilité (critère WCAG 1.4.4).
Comment fonctionne clamp() ?
clamp(min, préféré, max) renvoie la valeur préférée tant qu'elle reste entre le minimum et le maximum. En choisissant comme valeur préférée une expression linéaire en vw, on obtient une taille qui évolue de façon fluide entre deux largeurs d'écran, sans media query.
Comment est calculée la valeur « préférée » ?
Pente = (taille max − taille min) / (largeur max − largeur min). Ordonnée à l'origine = taille min − pente × largeur min. La valeur préférée s'écrit alors ordonnée (en rem) + pente × 100 vw. L'outil effectue ce calcul et affiche les étapes.
Quelle différence entre rem et em ?
Le rem se réfère à la taille du <html> ; l'em se réfère à la taille de police de l'élément parent (ou de l'élément lui-même pour les propriétés autres que font-size), ce qui provoque des effets de cascade difficiles à prévoir.
La typographie fluide pose-t-elle un problème d'accessibilité ?
Une taille exprimée uniquement en vw ne se zoome pas correctement. En combinant un terme en rem avec le terme en vw, comme le fait l'outil, le zoom du texte reste fonctionnel. Pour rester conforme au critère WCAG 1.4.4, veillez à ce que la taille maximale ne dépasse pas environ 2,5 fois la taille minimale.