Lorsque vous créez une page Web, la plupart des professionnels vous recommandent de redimensionner les polices (et en fait tout) avec une mesure relative telle que ems, exs, pourcentages ou pixels. En effet, vous ne connaissez pas vraiment les différentes manières dont une personne peut voir votre contenu. Et si vous utilisez une mesure absolue (pouces, centimètres, millimètres, points ou picas), cela pourrait affecter l'affichage ou la lisibilité de la page sur différents appareils. Et le W3C vous recommande d’utiliser ems pour les tailles.
Mais quelle est la taille d'un Em?
Selon le W3C, 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 em n'ont pas de taille absolue. Ils prennent leurs valeurs de taille en fonction de leur emplacement. Pour la plupart des concepteurs Web, cela signifie qu'ils se trouvent dans un navigateur Web. Par conséquent, une police de 1 m de hauteur a exactement la même taille que la taille de police par défaut de ce navigateur.
Mais quelle est la taille par défaut? Il n'y a aucun moyen d'être certain à 100%, car les clients peuvent modifier la 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 16 pixels. Donc la plupart du temps 1em = 16px.
Pensez en pixels, utilisez Ems pour la mesure
Une fois que vous savez que la taille de police par défaut est 16 px, vous pouvez utiliser ems pour permettre à vos clients de redimensionner facilement la page, mais pensez en pixels pour vos tailles de police. Disons que vous avez une structure de dimensionnement qui ressemble à ceci:
- Titre 1 - 20px
- Titre 2 - 18px
- Titre 3 - 16px
- Texte principal - 14px
- Sous-texte - 12px
- Notes de bas de page - 10px
Vous pouvez les définir de cette façon en utilisant des pixels pour la mesure, mais toute personne utilisant IE 6 et 7 ne pourra pas redimensionner correctement votre page. Donc, vous devriez convertir les tailles en EMS et ceci est juste une question de calcul:
- Titre 1 - 1,25 m (16 x 1,25 = 20)
- Titre 2 - 1.125em (16 × 1.125 = 18)
- Titre 3 - 1em (1em = 16px)
- Texte principal - 0.875em (16 x 0.875 = 14)
- Sous-texte - 0.75em (16 x 0.75 = 12)
- Notes de bas de page - 0,625 m (16 x 0,625 = 10)
N'oubliez pas l'héritage!
Mais ce n'est pas tout ce qu'il y a à faire. Vous devez également vous rappeler qu’ils prennent la taille du parent. Ainsi, si vous avez des éléments imbriqués avec des tailles de police différentes, vous pouvez vous retrouver avec une police beaucoup plus petite ou plus grande que prévu.
Par exemple, vous pourriez avoir une feuille de style comme ceci:
p {taille de la police: 0.875em; }.footnote {taille de la police: 0.625em; }
Cela entraînerait des polices de 14 pixels et de 10 pixels pour le texte principal et les notes de bas de page, respectivement. Mais si vous mettez une note de bas de page à l'intérieur d'un paragraphe, vous pourriez vous retrouver avec un texte de 8,75 pixels au lieu de 10 pixels. Essayez vous-même, mettez ceci le CSS ci-dessus et le HTML suivant dans un document:
Cette police est 14px ou 0.875 ems en hauteur.Ce paragraphe contient une note de bas de page.Bien que ce soit juste un paragraphe de note de bas de page.
Le texte de la note de bas de page est difficile à lire à 10 pixels, il est presque illisible à 8,75 pixels.
Ainsi, lorsque vous utilisez ems, vous devez être très conscient de la taille des objets parents, sinon vous obtiendrez des éléments de taille très différente sur votre page.
