6XC

Convertisseur PX ↔ REM ↔ EM ↔ PT

Convertissez les unités CSS dans les deux sens avec une taille racine configurable — px, rem, em et pt se mettent à jour ensemble.

819 vues

Comment ça fonctionne

rem = px ÷ taille racine (16px par défaut, donc 24px = 1,5rem) ; em fonctionne de la même façon mais par rapport à la taille de police héritée de l'élément lui-même — le champ « taille de contexte » du convertisseur ; pt est l'unité d'impression, où 1pt = 1,333px (96dpi ÷ 72). Saisissez une valeur dans n'importe quel champ et les autres suivent automatiquement.

Exemple concret : sur une base de 16px, un titre de 1,25rem s'affiche à 20px. Imbriquez une étiquette de 0,875em dans un composant dont la propre taille de police est de 1,125rem (18px), et elle s'affiche à 15,75px — parce que em se compose par rapport à son parent immédiat, pas à la racine.

Ce qu'il faut savoir

  • rem est relatif à l'élément racine, pas à une valeur par défaut figée du navigateur. L'hypothèse des 16px ne tient que si personne ne l'a modifiée. Si un utilisateur augmente la taille de police par défaut de son navigateur dans les paramètres d'accessibilité — une pratique courante chez les personnes malvoyantes — chaque valeur en rem s'agrandit proportionnellement avec elle. Les valeurs en pixels, elles, ne bougent pas : un paragraphe de 16px reste à 16px quelle que soit la préférence du navigateur de l'utilisateur.
  • C'est pourquoi les recommandations d'accessibilité privilégient rem pour la taille de police et les espacements. Une mise en page construite en rem respecte de bout en bout la taille de texte choisie par l'utilisateur — titres, corps de texte et espacements autour grandissent tous ensemble, gardant le design proportionnel au lieu de se casser quand le texte s'agrandit.
  • em est relatif à sa propre imbrication, ce qui se compose. Une valeur de 1,5em à l'intérieur d'un élément déjà en 1,5em s'affiche à 2,25× la racine — utile pour les composants qui doivent s'adapter à leur propre contexte de taille de police (comme le padding d'un bouton), risqué pour tout ce qui s'imbrique sur plusieurs niveaux.
  • La vieille « astuce des 62,5 % » — fixer la racine à 10px pour que 1rem = 10px, histoire de faciliter le calcul mental — fonctionne toujours mais mieux vaut l'éviter dans les nouveaux projets : la plupart des bibliothèques de composants supposent une racine à 16px, et la modifier peut provoquer des tailles inattendues dans du code tiers.
  • pt est défini par rapport à px, et non l'inverse. CSS fixe le ratio à 1in = 96px = 72pt, donc 1pt = 96/72 = exactement 1,333px. Cela compte surtout lors de l'export d'un design vers l'impression ou le PDF, où pt est l'unité native — la conversion garde les tailles à l'écran et imprimées cohérentes.

Questions fréquentes

Pourquoi ma valeur em diffère-t-elle de rem ?

em se multiplie par la taille de police définie la plus proche, ce qui s'imbrique : un 1,5em à l'intérieur d'un élément 1,5em vaut 2,25× la racine. rem fait toujours référence à la racine — c'est cette prévisibilité qui explique son succès.

1pt vaut-il vraiment 1,333px ?

En CSS, oui, par définition : 1in = 96px = 72pt. Les PDF d'impression et le CSS s'accordent sur ce ratio, même si la taille physique réelle dépend du DPI de l'écran.

Pourquoi les recommandations d'accessibilité préfèrent-elles rem à px pour le texte ?

Parce que rem s'adapte à la préférence de taille de police de l'utilisateur, contrairement à px. Une personne qui augmente la taille de texte par défaut de son navigateur — une adaptation courante pour la basse vision — voit chaque taille de police et espacement en rem grandir proportionnellement, alors que le texte en pixels reste bloqué à sa taille d'origine, exactement le type de défaillance que pointent les audits d'accessibilité.

Que deviennent les valeurs en rem si un utilisateur change la taille de police par défaut de son navigateur ?

Elles s'adaptent automatiquement. Si la taille de police racine est laissée à la valeur par défaut du navigateur et qu'un utilisateur règle celle-ci à, disons, 20px au lieu de 16px, chaque 1rem de votre CSS vaut désormais 20px au lieu de 16px — sans aucune modification de code. Cela ne fonctionne que si la taille de police racine elle-même reste non définie ou est exprimée de façon relative, et non figée en px.

Devrais-je quand même utiliser px parfois ?

Oui, pour ce qui ne doit vraiment jamais changer d'échelle avec le texte : bordures fines, icônes de taille fixe, ou ombres de 1px. La règle pratique que suivent la plupart des équipes est : rem pour la taille de police et les espacements de mise en page, em pour le padding relatif au composant, et px uniquement pour les détails qui doivent rester visuellement constants quel que soit le réglage de taille de texte de l'utilisateur.

Commentaires

Pas encore de commentaires — soyez le premier à en écrire un !

Outils similaires

Convertisseur de devises (taux BCE en direct) Convertissez entre plus de 30 devises — USD, EUR, GBP, TRY et bien d'autres — à partir des taux de référence quotidiens de la Banque centrale européenne. Gratuit, sans inscription. Lancer Convertisseur livres - kilogrammes Convertissez les livres en kilogrammes et les kilogrammes en livres instantanément — saisissez dans l'un ou l'autre champ. 1 lb = 0,4536 kg. Lancer Convertisseur Pieds & Pouces en Cm Convertissez les pieds et pouces en centimètres et inversement — conversions de taille comme 5'9" en cm, instantanément. Lancer Convertisseur Fahrenheit - Celsius Convertissez instantanément les °F en °C et les Celsius en Fahrenheit — températures météo, four et corporelles avec repères courants. Lancer