Lorsque vous créez une page Web, la plupart des professionnels recommandent de dimensionner les polices (et en fait, tout) avec une mesure relative telle que ems, exs, pourcentages ou pixels. C'est parce que vous ne connaissez vraiment pas toutes les différentes manières dont quelqu'un peut voir votre contenu. Et si vous utilisez une mesure absolue (pouces, centimètres, millimètres, points ou picas), cela peut affecter l'affichage ou la lisibilité de la page dans différents appareils. Et le W3C recommande que vous utilisez ems pour les tailles.
Mais quelle est la taille d'un em?
Selon le W3C un em:
"est égal à la valeur calculée de la propriété 'font-size' de l'élément sur lequel il est utilisé. L'exception est lorsque 'em' apparaît dans la valeur de la propriété 'font-size' elle-même, auquel cas il fait référence à la taille de police de l'élément parent."
En d'autres termes, les ems n'ont pas de taille absolue. Ils prennent leurs valeurs de taille en fonction de l'endroit où ils se trouvent. Pour la plupart
concepteurs de sites Web, cela signifie qu'ils sont dans un navigateur Web, donc une police de 1 mètre de haut est exactement de la même taille que la taille de police par défaut pour ce navigateur.Mais quelle est la taille par défaut ? Il n'y a aucun moyen d'être sûr à 100 %, car les clients peuvent modifier leur taille de police par défaut dans leurs navigateurs, mais comme la plupart des gens ne le font pas, vous pouvez supposer que la plupart des navigateurs ont une taille de police par défaut de 16px. Donc la plupart du temps 1em = 16px.
Pensez en pixels, utilisez des ems pour la mesure
Une fois que vous savez que la taille de police par défaut est de 16px, vous pouvez ensuite utiliser des ems pour permettre à vos clients de redimensionner facilement la page, mais pensez à pixels pour vos tailles de police. Imaginons que vous ayez une structure de dimensionnement comme celle-ci:
- Titre 1 - 20px
- Titre 2 - 18px
- Titre 3 - 16px
- Texte principal - 14px
- Sous-texte - 12px
- Notes de bas de page - 10px
Vous pourriez les définir de cette façon en utilisant des pixels pour la mesure, mais alors toute personne utilisant IE 6 et 7 ne serait pas en mesure de bien redimensionner votre page. Vous devez donc convertir les tailles en ems et ce n'est qu'une question de calcul:
- Titre 1 - 1,25 em (16 x 1,25 = 20)
- Titre 2 - 1,125 em (16 × 1,125 = 18)
- Titre 3 - 1em (1em = 16px)
- Texte principal - 0,875 em (16 x 0,875 = 14)
- Sous-texte - 0,75 em (16 x 0,75 = 12)
- Notes de bas de page - 0,625 em (16 x 0,625 = 10)
N'oubliez pas l'héritage!
Mais ce n'est pas tout ce qu'il y a à ems. L'autre chose dont vous devez vous souvenir est qu'ils prennent la taille du parent. Donc, si vous avez des éléments imbriqués avec des tailles de police différentes, vous pourriez vous retrouver avec une police beaucoup plus petite ou plus grande que prévu.
Par exemple, vous pourriez avoir une feuille de style comme celle-ci:
Cela se traduirait par des polices de 14px et 10px pour le texte principal et les notes de bas de page respectivement. Mais si vous insérez une note de bas de page dans un paragraphe, vous pourriez vous retrouver avec un texte de 8,75 pixels au lieu de 10 pixels. Essayez vous-même, mettez ce qui précède CSS et le code HTML suivant dans un document:
Ainsi, lorsque vous utilisez des ems, vous devez être très conscient de la taille des objets parents, sinon vous vous retrouverez avec des éléments de taille vraiment impaire sur votre page.