Les unités de taille des polices de caractères Deux systèmes permettent d'indiquer les dimensions des éléments en CSS : les unités de taille fixe et les unités de taille relative. C'est la propriété font-size qui détermine la taille de la police d'un élément. Elle est héritée : sa valeur sera donc transmise à tous les descendants de l'élément considéré. Les unités de taille fixe (ou unités absolues) : le point (pt); le pica (pc); le centimètre (cm); le millimètre (mm); le pouce (in). 1 pt = 0,35mm 1/72 in 1 pc = 4,22 mm 12 pt 1cm = 10 mm 1 in = 2,54 cm 25,4 mm 72 pt 6 pc Le W3C conseille de limiter leur usage à des médias de sortie connus et ce n'est jamais le cas pour les écrans. Ces unités n'ont de sens que sur une impression sur papier. En clair, on les évite sur les écrans d'ordinateur. Les unités de taille relative et pourcentages : la largeur de «M» (em) em est appelé cadratin; la hauteur d'«x» (ex); le pourcentage (%) le pixel (px). 1 em = la taille du caractère «M» dans la police de référence 1 ex = à la hauteur du caractère minuscule «x» sans jambages, dans la police de référence 100% = se définit relativement à la taille de référence dans le conteneur de l'élément 1 px = taille d'un pixel Le rapport em/ex dépend donc de la police utilisée. La méthode relative du cadratin (em) est l approche recommandée par le World Wide Web Consortium (W3C). Elle consiste en ceci : Ne pas fixer de corps de base. Le corps de base étant déterminé par le visiteur (dans les préférences de son logiciel de navigation). unités de taille des polices.docx 1/5
Fixer tous les autres corps en valeurs proportionnelles au corps de base (de préférence en cadratin - em). Ainsi, en assignant 1.5em à H2, les intertitres de niveau 2 auront une fois et demie le corps de base fixé par les préférences du visiteur. Si les préférences du visiteur sont réglées à 16 pixels dans son logiciel de navigation, on obtiendra la valeur de 24 pixels pour H2. Cette méthode a plusieurs avantages, notamment de s adapter aux préférences (ou handicaps visuels) des visiteurs ; certains qualifient cette approche de la seule méthode conforme aux normes d accessibilité. Elle permet aussi de s adapter à tout média (pas seulement l écran). Toutefois, ça ne fonctionne que dans les logiciels qui ont correctement implantés les spécifications du W3. Ce qui exclut bon nombre de logiciels dont Netscape 4.x et Explorer 4.x et 5.x (pour Windows) encore en usage dans une proportion non négligeable. C est de loin la méthode qui a le plus d avenir... Dans l avenir. La méthode du pourcentage (%) est un équivalent du cadratin. Référence : http://edu.ca.edu/exemples/taille-caracteres.html h1 {font-size: 2em;} /* affiché en 32px */ h2 {font-size: 1.5em;} /* affiché en 24px */ h3 {font-size: 1.17em;} /* affiché en 18px */ h4 {font-size: 1em;} /* affiché en 16px */ unités de taille des polices.docx 2/5
On aura compris qu'on pouvait exprimer la taille des caractères soit par un pourcentage, soit par un nombre suivi d'une unité. Par exemple, on prendra 1.0em (ou 100%) pour retrouver la taille de police de référence, 0.83em (ou 83%) pour obtenir une taille réduite à 83%, etc. La taille de la police de référence se transmet par héritage : dans le cas d'éléments imbriqués, la police de référence change à chaque nouveau conteneur. Ainsi, définir une taille de référence de 2 em dans un paragraphe puis une taille de 2 em dans un de ses éléments enfants, on attribue à ce dernier une taille de 2 em par rapport à 2 em, soit 4 em. Tous les calculs se cumulent. Expliquons cette notion de taille de référence : Les différents éléments d'une page HTML sont des blocs contenus les uns dans les autres. Par exemple l'ensemble de la page peut contenir des calques (ou blocs DIV) qui peuvent contenir d'autres blocs, etc et on arrive finalement à des paragraphes. La taille définie en «em» ou en «%» pour un paragraphe s'appuie sur la taille qui a été définie pour l'élément qui contient ce paragraphe. Si on n'a rien défini pour ce bloc contenant, on remonte d'un cran dans la hiérarchie de ces blocs, etc. On arrive finalement à l'ensemble de la page (body). Si on n'a toujours rien défini, la référence est la taille qui a été définie par le visiteur lui-même dans les préférences de son navigateur. Petit exemple, avec des éléments div imbriqués, ayant tous une taille de texte de 1.2em : Référence : http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html À la fin, la taille du texte a doublé! C'est un des effets de la cascade CSS : plus on avance dans l'arborescence de la page, et plus les valeurs de font-size pour les éléments imbriqués si elles sont exprimées dans des unités relatives se multiplient entre elles. Pour éviter ce genre de bévue, une seule solution : ne pas indiquer de taille de texte (propriété CSS font-size) lorsque ce n'est pas directement nécessaire! unités de taille des polices.docx 3/5
Préférez les unités relatives, car elles peuvent être adaptées au visiteur (mal voyant ou pas) et au périphérique (écran ou imprimé), et bannissez les unités absolues (sauf si les relations sont directement définies pour un seul périphérique, par exemple). Des limites à ne pas fixer! Avec la possibilité pour l'utilisateur d'agrandir le texte, et par conséquent l'impossibilité pour le webmaster de maîtriser au pixel près la taille du texte, il va falloir penser autant que possible à l'''extensibilité'' des différents éléments de la page, et en particulier leur extensibilité en hauteur. Voici par exemple deux petites boîtes contenant un texte court. La taille du texte est normale, et la boîte de droite à une hauteur fixe height: 20px. Et les deux mêmes boîtes après une augmentation raisonnable de la taille du texte par l'utilisateur : N'y aurait-il pas comme un problème lors de l'agrandissement du texte? La solution : ne pas fixer de hauteur pour les éléments censés contenir du texte. Cette règle n'est pas toujours facile à respecter, surtout pour des éléments faisant partie de «l'interface» du site, comme un menu de navigation ou un bandeau de titre. Mais il est important d'en tenir compte autant que possible. Les pixels Cette méthode est de plus en plus abandonnée afin de respecter les normes d accessibilité, notamment pour les handicapés visuels. Tous les organismes de normalisation concernés par l accessibilité considèrent cette méthode fautive. unités de taille des polices.docx 4/5
On peut voir que le caractère réserve un espace «vide» en dessous de la lettre elle-même : cet espace correspond à l'espace pour les jambages des lettres minuscules telles que le «p», le «y», etc. Grosso modo, pour un corps donné, un cadratin (ou 1em) correspond à la hauteur d'une lettre comme le «Ç» (C cédille majuscule). C'est bien sûr une approximation, mais cela donne une idée. Exemples Taille définie en points = {font-size: 12pt;} Taille définie en pixels = {font-size: 16px;} Taille définie en millimètres = {font-size: 4mm;} Taille définie en centimètres = {font-size: 0.6cm;} Taille définie en pourcentage = {font-size: 120%;} Taille définie en pc = {font-size: 1.5pc;} Taille définie en inches = {font-size: 0.3in;} Taille définie en em = {font-size: 1.5em;} Taille définie en ex = {font-size: 4ex;} Références à voir : http://edu.ca.edu/cours-web/sites-web-statiques/css-feuilles-de-styles/css-les-polices-quelle-taille http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html unités de taille des polices.docx 5/5