C A R AC T È R E , PA R AG R A P H E E T PAG E
112
dpi est l'abréviation de dots per inch.
ppi est l'abréviation de pixels per inch.
Les deux concernent la résolution d'image.
Le calcul est le suivant : la valeur par défaut
des navigateurs (16 px) × 62.5 % = 10 px.
Contrairement à la convention, le point (.)
est utilisé à la place de la virgule décimale (,)
dans l'écriture des nombres.
TAILLE
Il existe une différence de résolution entre les divers moniteurs. Le moni-
teur du Mac a une résolution de 72 ppi (pixels per inch, ou pixels par
pouce, ppp) et celui du
PC
, une résolution de 96 ppi. Cela a pour effet,
entre autres choses, d'afficher différemment la taille des caractères.
Il existe deux catégories de valeurs pour définir la taille d'un
caractère.
La première, la valeur fixe ou absolue, comprend le pixel (px), le
point (pt), le pica (pc), le pouce (in pour inch), le centimètre (cm) ou
le millimètre (mm).
La seconde, la valeur relative, comprend le em, qui équivaut à un
cadratin, le ex, qui reprend la hauteur de l'oeil, et le pourcentage (%).
Il est aussi possible de nommer (en anglais) la taille du caractère, donc,
progressivement : xx-small, x-small, small, medium, large, x-large et
xx-large.
On privilégie la valeur relative em pour définir la taille d'un carac-
tère. Cela suppose de connaître les valeurs par défaut des navigateurs
et de travailler avec elles. Ainsi, la valeur par défaut
31
est 16 px pour la
taille du caractère dans un paragraphe. Rich Rutter
32
, designer de sites
Web vivant à Brighton, au Royaume-Uni, propose d'indiquer au corps
du document, soit à l'élément
<body>
, la taille de 62.5 %, afin d'utiliser
effi cacement le em. Ce calcul est valable pourvu que l'utilisateur ne
change pas les valeurs par défaut de son navigateur.
body {
font-size:
62.5%;
}
Concrètement, l'exemple suivant indique que la taille (
<font-
size>
) des textes situés dans un paragraphe (
<p>
) sera multipliée par
1.3. Le calcul s'effectue avec des valeurs relatives, mais le résultat équivaut
à une valeur fixe, soit 13 px dans l'exemple.
31. Afin de mieux comprendre ces notions, consulter les sites <http://www.yoyodesign.org/
doc/w3c/css2/sample.html> et <http://css.alsacreations.com/Bases-et-indispensables/
Le-rendu-par-defaut-des-elements-
HTML
>.
32. Voir au <http://www.blog-and-blues.org/weblog/2004/05/24/214-font-size-em>.