La typographie et la mise en forme de caractères
CHAPITRE 5
75
Les unités de taille fixe
Les unités de taille fixe (ou unités absolues) sont le point (1 pt vaut environ
0,35 mm), le pica (1 pc vaut environ 4,22 mm), le centimètre (cm), le millimètre (mm)
et le pouce (1 in vaut environ 2,54 cm).
Le W3C conseille de limiter leur usage à des médias de sortie connus, aux propriétés
déterminées. En clair, on les évitera sur écran d’ordinateur, chaque moniteur étant
particulier (de par sa taille de diagonale, sa résolution, son nombre de couleurs, etc.).
De telles unités sont toutefois parfaitement adéquates à une sortie sur papier. Évitez
vous aussi d’utiliser ces unités fixes dans l’élaboration de votre site web et pour le
calcul de vos dimensions et tailles de polices.
Les unités de taille relative et pourcentages
Les unités relatives sont le cadratin (em), la hauteur d’« x » (ex), le pourcentage (%) et
le pixel (px).
1 em représente la taille d’un caractère (ainsi que l’espace pour ses jambages) dans la
police de référence. 1 ex correspond à la hauteur du caractère minuscule « x », sans
jambages, dans la police de référence. Le pourcentage, s’il se prête bien aux textes et
polices de caractères, ne leur est pas spécifique. Il se définit relativement à la taille de
référence dans le conteneur de l’élément.
Pour ces trois unités, 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 de même :
Dans cet exemple, les balises

et reçoivent chacune la taille de texte 2 em.
descendant de

, sa taille sera double de la taille de référence.
RÉFÉRENCE L’unité « em »
Un excellent article de Florent Verschelde fournit une explication complète et concrète de l’unité « em » :
B http://css.alsacreations.com/Tutoriels-et-articles-divers/gerer-la-taille-du-texte-avec-les-em
CSS
p, span {
font-size: 2em;
}
HTML

Toto est mon héros

Précédent

- 102/337

Suivant