Il est illusoire de penser que l'on pourra contrôler totalement, pour tous les utilisateurs, l'aspect et en particulier la taille du texte. Les navigateurs proposent souvent des fonctionnalités pour augmenter ou réduire la taille du texte, quand bien même celle-ci serait fixée en pixels, par exemple. De plus, les navigateurs mobiles modifient souvent le rendu de ce même texte pour en faciliter la lecture.
Il est donc recommandé de s'adapter à cet état de fait, qui a par ailleurs l'immense avantage de rendre les pages web plus accessibles pour tous ! On pourra donc vouloir gérer la taille du texte avec des unités relatives, telles que les em et les pourcentages. Ainsi la propriété CSS font-size permettra de déclarer une taille de police grâce à différentes unités.
Les unités
Le W3C propose 5 unités absolues à utiliser avec la propriété font-size :
-
pt - Le point
-
pc - Le pica (12 points)
-
cm - Le centimètre
-
mm - Le millimètre
-
in - Le pouce (inch)
Bien entendu ces type d'unités n'ont pas toujours de signification uniforme sur un écran d'ordinateur puisque celui-ci dépendra de sa résolution et de sa dimension (diagonale). La théorie les voue à l'impression, elles sont proportionnelles entre elles : 1 in = 2,54 cm = 25,4 mm = 72 pt = 6 pc. Vous trouverez un tableau de conversion approximatif des points en pixels.
On leur préférera idéalement des unités relatives :
-
em - Le cadratin qui se base sur la hauteur de la police
-
rem -
Équivalent de
emmais utilisant comme base de calcul la valeur de root (html) -
ex - Qui se base sur la hauteur de la lettre minuscule "x" de la police et dont l'interprétation diffère selon les navigateurs
-
% - Le pourcentage, équivalent du cadratin (em)
-
px - Le pixel
L'idéal est donc d'attribuer aux éléments de la page des valeurs proportionnelles au corps de base, grâce aux unités em ou %. En appliquant font-size:2em; aux paragraphes, ceux-ci posséderont une police deux fois plus grande que le corps de base (celui du body ou du parent). Sachez que les deux déclarations suivantes sont équivalentes :
font-size: 2em;
font-size: 200%;
Consultez l'article gérer la taille du texte avec les « em ».
Le W3C définit aussi des tailles absolues à l'aide des mots-clés suivants :
-
xx-small(6,9pt) -
x-small(8,3pt) -
small(10pt) -
medium(12pt) -
large(14,4pt) -
x-large(17,28pt) -
xx-large(20,7pt)