Une pratique courante pour déterminer les tailles de caractère consiste à utiliser une valeur de 62.5%
sur le body
pour obtenir une taille de base de 10px
et d’utiliser un coefficient multiplicateurs en em
pour simplifier les calculs à venir. Dans ce contexte, 1.2em
est égale à 12px
et 2.4em
à 24px
, etc. Selon l’article Font sizing with rem
could be avoided, c’est une fausse bonne idée : des calculs fastidieux nous sont épargnés, certes, mais nous devrons spécifier les nouvelles tailles à chaque fois. On ne peut raisonnablement pas utiliser une taille par défaut de 10px pour le texte si on veut être lu.
EM Calculator
Si vous voulez utiliser une taille par défaut de 14px
pour le texte, il vaut mieux appliquer une taille de 0.875em
sur le body
et sortir la calculette pour les autres tailles. Si vous avez la flemme d’utiliser votre calculatrice, EM Calculator est fait pour vous.
EM Calculator est un outil créé en JavaScript par Piotr Petrus pour convertir des px
en em
pour simplifier l’usage des em
.
Une des pierres d’achoppement des em's
est qu’il faut remettre un coup de font-size: 1em;
lorsque les balises sont imbriquées. Pour pallier cet inconvénient, EM Calculator permet de choisir sur quels niveaux de profondeur le calcul doit s’effectuer. Bien sûr, certains diront que l’unité rem
est faite pour cela, mais l’utilisation de EM Calculator n’est tout de même pas si rédhibitoire.
Les plus
Comme vous pouvez le constater sur l’illustration ci-dessus, il est possible de choisir entre un élément frère (sibling) ou enfant (child). Parmi les options, nous pouvons modifier la taille par défaut de l’agent utilisateur (en général 16px). Cerise sur le gâteau, on peut sauvegarder plusieurs sessions de travail.
Le moins
Il ne semble pas possible d’exporter les CSS.