Unités de mesures: em vs rem

Nicolas Frizzarin
Sep 14 · 7 min read
Image for post
Image for post

L'aspect responsive d'un site commence par sa font

Quand on souhaite créer un site web responsive, nous nous orientons automatiquement vers l’aspect responsive ‘grid’ de notre future application sans prendre réellement en compte la taille de police du texte contenue dans ces éléments.Pourtant cette taille de police est cruciale lors de l’élaboration d’une stratégie responsive d’une application, puisque celle-ci dépend principalement de la préférence utilisateur.En effet, certains utilisateurs vont préférer avoir une taille de police assez grande alors que d’autres préféreront avoir une taille de police assez petite.L’objectif est également d’adapter notre application à ces tailles de polices. C’est ici que les unités de mesures rem et em entrent en jeu !

EM / REM: définition

EM et REM (emphemeral unit / root empheral unit) sont toutes deux des unités de mesure flexibles et scalables traduites par le navigateur en pixel, qui dependent de la taille de police utilisée par votre système.

Dans l’exemple ci-dessous, la taille de police par défaut de mon navigateur est de 16px. J’associe un padding de 1rem autour de mon texte et la taille de police de mon texte à 2em. Le navigateur va donc traduire ce style comme suit:

proprité dans mon fichier main.css
proprité dans mon fichier main.css
proprété interprété par le navigateur
proprété interprété par le navigateur

À priori, les unités de mesures rem et em font exactement la même chose. Elles permettent d’avoir des unités flexibles offrant plus de responsivité et de lisibilité à vos applications.

Une différence cruciale

La différence entre les unités de mesure em et rem réside uniquement dans la manière dont le navigateur va traduire leur valeur en pixels.

Ensemble, nous allons comprendre comment fonctionnent ces unités de mesures pour finir sur un cas d’étude pratique afin de savoir quelle unité de mesure choisir en fonction du type de design.

Comment sont traduites les unités de mesure rem en pixel ?

Quand on utilise l’unité de mesure rem, le navigateur traduit cette mesure en utilisant la taille de police du root element (i.e html). La taille de police ‘root’ est multipliée par n’importe quelle valeur avec laquelle vous utilisez l’unité de mesure rem.

Il est important de savoir que le root element de vos applications web hérite par défaut de la taille de police de votre navigateur si vous ne lui définissez aucune font-size.

Exemple: le root element de mon application est de 16px (au passage il hérite de la taille de police de mon navigateur), l’unité de mesure 10rem est équivalente à 10 * 16px = 160px.

Image for post
Image for post
Image for post
Image for post

Comment sont traduites les unités de mesure em en pixel ?

Quand on utilise l’unité de mesure em le navigateur traduit cette mesure en utilisant la taille de police de l’élément courant. De la même manière que pour rem, la navigateur va multiplier la taille de police de l’élément par n’importe quelle valeur avec laquelle vous utilisez l’unité de mesure em.

Exemple: la taille de police de ma div est de 40px, l’unité de mesure 2em est équivalente à 2 * 40px = 80px.

Image for post
Image for post
Image for post
Image for post

Alors si je ne précise aucune font-size, mon unité de mesure em n'est pas prise en compte ?
Si, ici s’applique un principe d’héritage, si aucune font-size n’est précisé sur l’élément courant, alors cette élément hérite de la font-size de son parent.
Dans notre cas d’exemple, si aucune font-size n’était précisée, l’élément courant prendrait la font-size de l’élément html qui lui même hérite de la font-size du navigateur.
Ce qui donne le calcul suivant: 2 * 16px = 32px

Image for post
Image for post
Image for post
Image for post

Les effets de l'heritage

Utiliser les unités de mesure em peut parfois devenir très compliqué à cause de l’héritage. L’héritage impose que chaque élément hérite de la taille de police de son élément parent si et uniquement si la taille de police de l’élément courant n’est pas précisée.

Prenons un exemple pour bien comprendre ce principe d’héritage.
Soit le template et le style associé suivant:

Image for post
Image for post
Image for post
Image for post

Ici, la div child ne possède aucune font-size par défaut, le principe d’héritage est donc appliqué, ce qui signifie que la mesure em dépend de la taille de police de son parent qui lui même hérite du browser.
font-size = 1 * 16px = 16px
padding = 2* 16 px = 32px

Imaginons le style suivant:

Image for post
Image for post

Dans cet exemple, on précise une font-size à la div child le principe d’héritage n’est donc pas appliqué, ce qui donne les calculs suivants:
font-size = 3*16px = 48px
padding = 2 * 48px = 96px

EM vs REM le résumé

Pourquoi utiliser les unités de mesure rem

Ce qui rend très puissant, l’utilisation des unités de mesure rem réside dans le fait qu’elles donnent un dimensionnement cohérent quel que soit l’héritage des éléments. Cette unité de mesure nous permet de nous assurer que les paramètres de taille de police des utilisateurs influencent chaque aspect de la mise en page d’un site.

Ainsi, l’objectif principal de l’utilisation des unités de mesures rem est donc de s’assurer que quelle que soit la taille de police par défaut du navigateur de l’utilisateur, la mise en page s’ajustera correctement pour s’adapter à la taille du texte qu’elle contient.

Pourquoi utiliser les unités de mesure em

La valeur ajoutée des unités de mesure em réside dans le fait qu’elles permettent aux valeurs de dimensionnement d’être déterminées par une taille de police autre que celle de l’élément html (la root size).

Dans cette optique, l’objectif principal des unités de mesure em est de permettre une évolutivité dans le contexte d’un élément de conception spécifique (exemple: margin entre des éléments d’un menu de navigation).

Application concrète de ces deux différents unités de mesures

Utilisation de em

Toute taille qui doit être mise à l’échelle en fonction de la taille de la police d’un élément autre que la racine.

De manière générale, la seule raison pour laquelle vous devriez utiliser des unités de mesure em est de mettre à l’échelle un élément dont la taille de police n’est pas par défaut : typiquement les boutons, les en-têtes ou encore les éléments de menu.

Les propriétés de style qui seront impactées seront les suivantes:

Utilisation de rem

Toute taille qui n’a pas besoin d’unité de mesure em pour les raisons décrites ci-dessus et qui doit être mise à l’échelle en fonction des paramètres de taille de police du navigateur ou de votre root element (html).

Cela représente presque toute la conception de votre page; marges, largeurs de bordure, la majorité des tailles de police (voire la totalité), les ombres seront impactées de manière avantageuses.

Je recommande d'utiliser toujours cette unité de mesures pour:

Pour résumé tout ce qui peut être rendu évolutif avec des unités de mesures rem devrait l’être.

Ne pas utiliser rem et em

CodeShake

Learnings and insights from SFEIR community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store