Unités de mesures: em vs rem

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:

• 1rem = 1 * 16px
• 2em = 2 * 16px

À 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.

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.

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

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:

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:

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é

• La conversion en pixels des unités de mesure rem est déterminée par la taille de police de l’élément html. Cette taille de police est influencée par l’heritage de la taille de police du navigateur si celle-ci n’est pas explicitement déclarée avec une unité de mesure qui n’est pas soumise à la loi de l’héritage (px)
• La conversion en pixels des unités de mesure em est déterminée par la taille de police de l’élément courant où est utilisée cette unité de mesure. La taille de police de l’élément courant hérite de la taille de police de l’élément parent si celle-ci n’est pas explicitement déclarée avec une unité de mesure qui n’est pas soumise à la loi de l’héritage (px)

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:

• margin
• padding
• line-height

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:

• vos media queries
• modifier la taille de police d'un élément spécifique pour évitez toutes confusions d'héritage et permettre une évolutivité fluide de votre design.

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

• Définition d’une grid de plusieurs colonnes. Typiquement la largeur d’une colonne doit avoir pour unité de mesure le %. Cela permet de redimensionner correctement la largeur en fonction du viewport. Cependant la propriété min-width doit être en unité de mesures rem.
• Quand un élément ne doit pas être scalable/évolutif. Très peu d’éléments sont dans cette condition de redimensionnement. Il s’agit d’élément dont le style est ‘cassé’ quand l’écran est très petit.