Comment choisir l’unité de mesure pour ses fonts : px , em ou rem

Choisir l’unité de mesure pour la police est toujours sujet à débat…

Entre les %, pt, in,px, em et rem, on s’y perd un peu. J’avais l’habitude d’utiliser exclusivement les pixels mais depuis que j’utilise Sass & Compass et que j’ai considérablement simplifier  le temps de création de mes css, rester au px aurait été dommage. Surtout lorsqu’on sait que nous pouvons utiliser des mixins assez intéréssante  comme celle ci :

Comment je gére mes fonts de base

Comment je gére mes fonts de type titre

Ces mixins me permettent de définir les tailles, les couleurs des liens et que les line-height soit définient automatiquement.

De plus le fait que sur certains navigateurs, l’augmentation de la taille de la typo n’est pas possible directement via la fonction zoom du navigateur ou encore que sur mobile la lecture devient difficile m’a aidé à sauter le pas vers em puis rem.

Utiliser les pixels

C’est l’unité de base que nous utilisons au début.
Le pixel, picture element, permet de mesurer la définition d’une image numérique.

Il est pratique pour les mises en page, mais pour les tailles de police, il est plus adapté d’utiliser em.

Utiliser les em

Em représente la taille de la police.

L’idée est d’utiliser la taille par défaut du support sur lequel on visualise la police.
Cet unité est proportionnelle, de ce fait une même police vu sur mobile ou ordinateur de bureau sera adapté au type d’écran.

Si vous définissez la taille de vos padding et margin en Em, cela signifie que celles-ci sont en fait définit par rapport à la taille de la police de caractère.
Pour utiliser les tailles de typo en em, je définis la taille de base à 62,5% ce qui me permet de définir mes tailles en faisant une division par 10.

Seul problème, l’imbrication : Les tailles exprimées en em sont relatives à l’élément parent, si vous définissez un élément en em, ceux inclus à l’intérieur qui auront une définition en em, verront aussi leurs tailles multipliées ou divisées.

Exemple ci dessous:

-> 10px

-> 5px

-> 2.5px

-> 1.25px

La solution , l’utilisation de rem

Utiliser rem

Rem, qui signifie « root em », est la taille de la police de l’élément racine du document a été introduit par css3.
L’avantage ici est qu’il n’y a plus de problème d’imbrication. Le rem est donc constant dans toute la page.

Et pour les navigateurs qui ne gère pas encore le rem, spécifié d’abord les px comme unité de secour puis les rem.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *