Softonic

Convertisseur EM en REM

Étape 1 / 2 rem
Résultats

Un designer vous envoie des spécifications Figma en pixels, la base de code utilise rem, et la moitié des composants imbriquent em à des endroits où ils changent en fonction de la taille de police parente. Ce convertisseur calcule les équivalents px et rem de n’importe quelle valeur em à n’importe quelle taille de police racine, vous pouvez donc copier le bon nombre dans le fichier CSS sans avoir à recalculer dans votre tête à chaque fois.

Comment convertir em, rem et pixels

  1. 1

    Définir la taille de police de base

    Généralement 16px, la valeur par défaut du navigateur. Certains systèmes de design utilisent 14px ou 18px comme racine.

  2. 2

    Pour em, définir la taille de police parente

    em est relatif à l'élément parent. Si le parent est 20px, 1em équivaut à 20px.

  3. 3

    Entrer une valeur

    En em ; les équivalents px et rem se mettent à jour automatiquement.

  4. 4

    Lire la conversion

    Valeurs px, em et rem avec des décimales arrondies et exactes affichées.

Les formules

rem est toujours relatif à l’élément racine (<html>):

px = rem * root_font_size rem = px / root_font_size

em est relatif au parent de l’élément courant:

px = em * parent_font_size em = px / parent_font_size

Conversions à 16px racine

Pixels rem em (à 16px parent)
10 0.625 0.625
12 0.75 0.75
14 0.875 0.875
16 1 1
18 1.125 1.125
20 1.25 1.25
24 1.5 1.5
32 2 2
48 3 3
64 4 4

Quand utiliser chacun

  • px : bordures, détails fins, contrôle exact. 1px box-shadow, 1px border.
  • rem : marges, padding, typographie qui doit s’adapter à la préférence de police de l’utilisateur.
  • em : espacement local au composant qui s’adapte à sa propre taille de police (boutons, badges).
  • % et vw/vh : relatif au conteneur et à la fenêtre d’affichage, c’est un autre sujet.

Le truc des 62.5%

Certaines bases de code définissent html { font-size: 62.5%; } ce qui fait que 1rem = 10px. Cela rend le calcul rem facile (24px = 2.4rem) au prix de casser les préférences de taille de police du navigateur pour les utilisateurs qui zooment le texte. La pratique moderne évite ce hack ; utilisez 16px racine et tolérez les décimales.

Piège d’héritage em

em hérite à travers la cascade. Si un parent a une taille de police de 1.2em par rapport à son propre parent, et à l’intérieur vous avez un padding de 1em, le padding est 1.2 * 1.2 = 1.44 * racine. Les em imbriqués se cumulent, ce qui peut produire des résultats surprenants. Rem évite cela car il se résout toujours par rapport à <html>.

Exemple d’échelle typographique

Une échelle de type modulaire courante avec un ratio de 1.25:

Niveau rem px (à 16 racine)
Légende 0.75 12
Corps 1 16
Corps+ 1.125 18
H4 1.25 20
H3 1.5625 25
H2 1.953 ~31
H1 2.441 ~39
Vedette 3.052 ~49

Utiliser rem signifie que chaque niveau s’échelonne proportionnellement si un utilisateur augmente la taille de police de son navigateur pour l’accessibilité.

Respect des préférences des utilisateurs

Coder en dur des px dans une feuille de style casse les utilisateurs qui zooment le texte pour des raisons de vision. rem respecte ces préférences car il se résout par rapport à la taille racine, que l’utilisateur peut changer. C’est la principale raison pour laquelle les guides de style recommandent rem pour la typographie et l’espacement.

Questions fréquentes

Utilisez rem pour la typographie, l’espacement et la taille de mise en page. Utilisez em pour la taille interne au composant qui doit s’adapter à la propre taille de police du composant (boutons, icônes dans le texte). Utilisez px uniquement pour les détails fins qui ne doivent pas s’échelonner.

Les utilisateurs peuvent changer la taille de police par défaut de leur navigateur. Chrome par défaut à 16px ; si l’utilisateur a défini 18px, tous vos rems sont 12.5 pour cent plus grands. Les designers qui supposent une racine fixe de 16px manquent souvent cela ; rem respecte le choix, ce qui est le but.

L’échelle d’espacement de Tailwind utilise rem. text-base est 1rem = 16px par défaut, text-lg est 1.125rem. L’échelle est cohérente et respecte la taille de police racine par défaut.

Non. Les nombres que vous saisissez ne servent qu’au calcul de la conversion, et rien n’est stocké.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Recherche de nom de couleur

Trouvez la couleur nommée CSS standardisée la plus proche d’une valeur HEX, RGB ou HSL grâce à l’écart CIEDE2000.

Outil disponible dans d’autres langues