Définir la taille de la police, c'est définir la hauteur du corps des caractères.
La propriété font-size
La taille de la police est spécifiée par la propriété font-size dont la valeur est un nombre d'unités.
html { font-size: 13px; }
body { font-size: 1em; }
h1 { font-size: 160%; }
p { font-size: 1rem; }
L'unité de taille est à choisir en fonction du dispositif d'affichage.
Par exemple il ne faut pas utiliser des centimètres pour afficher
sur un écran pour lequel on privilégiera le pixel CSS (px),
le cadratin (em), le pourcentage (%) ou la
référence à la racine du document (rem).
Par défaut les navigateurs utilisent une taille de caractères de 16 pixels.
La propriété font-size
est héritée : elles est transmise automatiquement de l'élément
parent à ses enfants, quelque soit le niveau de descendance.
On peut donc facilement gérer la taille de police d'une page en
mettant la propriété font-size
sur l'élément body,
ou sur l'élément html.
Taille en pixels
Spécifier une taille de police en px (pixels) définit
une taille dans une valeur absolue. Cela permet de s'affranchir de
la taille de base éventuellement choisie par l'utilisateur et peut
parfois poser des problèmes pour les personnes souffrant d'un
handicap visuel qui auront augmenté la taille par défaut.
Taille en em
Spécifier une taille de police en em (ou cadratin)
définit une taille relativement à la taille de l'élément parent.
La taille de l'élément parent, quelle qu'elle soit, représente 1 em.
Si on veut diminuer la taille de l'élément enfant on donne une
valeur inférieure à 1 et si on veut augmenter la taille de l'enfant
on donne une valeur supérieure à 1.
Par exemple, si la taille du parent est de 16 pixels, définir la
taille d'un enfant à 0.8125 em donnera 13 pixels (16 *
0.8125), et définir la taille à 1.25 em donnera 20
pixels (16 * 1.25).
Utiliser l'unité em permet de modifier facilement les
différentes tailles utilisées dans une mise en page en modifiant
seulement la taille de l'élément parent de base.
Utiliser l'unité em permet de respecter la taille par
défaut choisie par l'utilisateur qui constituera l'unité de base.
Il faut toutefois être très prudent car les imbrications risquent de cumuler les diminutions (ou les augmentations) donnant ainsi des résultats non souhaités et quelque fois difficiles à maîtriser.
L'exemple suivant est une imbrication de listes (qui pourrait
constituer un menu). La taille de l'élément li est
définie à 0.8125 em soit 13 pixels. Au fur et à mesure
de l'imbrication la taille des éléments li diminue
passant de 13 pixels à 11 pixels (13px X 0.8125) puis 9 (11 X
0.8125).
Arrêter le cumul proportionnel
Reprenez l'exemple précédent et ajoutez la règle de style qui
permet d'arrêter le cumul des diminutions. Tous les éléments li,
quelque soit leur position dans la hiérarchie doivent avoir la même
taille, soit 16 pixels X 0.8125 em.
Taille en rem
Pour éviter le problème des cumuls de tailles proportionnelles, une nouvelle unité a
été introduite par le W3C
: le rem permet de définir une taille relative à
l'élément racine du document, soit l'élément html. On
peut ainsi respecter la taille par défaut choisie par l'utilisateur
et on a une taille de base invariante.
Si une taille est définie pour l'élément html c'est elle qui servira de taille de référence.
Si aucune taille n'est définie pour l'élément html mais qu'une taille est définie pour l'élément body, c'est elle qui servira de taille de référence.
Si aucune taille n'est définie pour les éléments html et body, c'est la taille définie dans la configuration du navigateur qui sera utilisée (généralement 16 pixels).
Le seul frein à l'utilisation du rem est la persistance
des anciennes générations de navigateurs qui ne supportent pas cette
unité. Voir http://caniuse.com/#feat=rem
Taille en pourcentage
L'unité de taille % fonctionne de la même façon que
l'unité em.
Spécifier une taille de police en pourcentage définit une taille relativement à la taille de l'élément parent.
La taille de l'élément parent, quelle qu'elle soit, représente
100%. Si on veut diminuer la taille de l'élément enfant on donne
une valeur inférieure à 100 et si on veut augmenter la taille de
l'enfant on donne une valeur supérieure à 100.
Par exemple, si la taille du parent est de 16 pixels, définir la
taille d'un enfant à 81.25% donnera 13 pixels (16 * 81.25 / 100),
et définir la taille à 125% donnera 20 pixels (16 * 125 / 100).
Comme le pourcentage fonctionne de la même façon que l'unité em,
on a les mêmes travers pour le cumul de diminutions ou
d'augmentations quand les éléments sont imbriqués trop profondément.