Les unités de taille des polices de caractères

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
1 pc
1cm
1 in
=
=
=
=
0,35mm
4,22 mm
10 mm
2,54 cm
1/72 in
12 pt
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)
la hauteur d'« x » (ex);
le pourcentage (%)
le pixel (px).
1 em
1 ex
100%
1 px
=
=
=
=
em est appelé cadratin;
la taille du caractère « M » dans la police de référence
à la hauteur du caractère minuscule « x » sans jambages, dans la police de référence
se définit relativement à la taille de référence dans le conteneur de l'élément
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;}
h4 {font-size: 1em;}
unités de taille des
polices.docx
/* affiché en 18px */
/* affiché en 16px */
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