[niveau: expert]
OpenWeb propose un excellent article nommé « Compatibilité multi-navigateurs des polices de caractères » où ils y expliquent les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web.
Pour résumer, il est conseillé de ne pas utiliser une unité absolue (comme le ‘px’, le ‘pt’, le ‘cm’, etc). Evitez donc de noter dans votre style CSS quelque chose comme:
body { font-size: 15px; } /* défini la taille par défaut de tout le texte */A cela, préférez des unités relatives, et en l'occurrence l'utilisation de 'em' et de '%'.
Il suffit de définir la taille du texte par défaut en '%' au niveau du body, et d'utiliser 'em' au niveau du reste de vos conteneurs.
Mais comment savoir l'équivalent entre le % et le 'px' ? Pour cela OpenWeb nous propose un tableau d'équivalence :
| Valeurs en % | Valeurs équivalentes en 'px' |
|---|---|
| 57 | 9 |
| 65 | 10 |
| 71 | 11 |
| 77 | 12 |
| 82 | 13 |
| 88 | 14 |
| 96 | 15 |
| 103 | 16 |
| 109 | 17 |
| 115 | 18 |
| 121 | 19 |
Ainsi, notre CSS donnera :
body { font-size: 96%; } /* équivaut à 15px */Grâce à cette méthode, votre texte s'adaptera très bien quelque soit le navigateur et la taille de l'écran de vos lecteurs.
À ce sujet, je suis justement tombé y’a pas longtemps sur cet article qui explique très bien (en anglais) comment faire son choix d’unité entre px, pt, em et %.
http://css-tricks.com/css-font-size/
En lisant ça on voit que le problème de la solution d’Openweb est qu’ils se basent sur le réglage par défaut du navigateur, et si l’utilisateur l’a changé, ça peut tout casser. Donc utiliser les %, c’est bien, mais il faut quand même indiquer pour l’élément parent le plus élevé (body, voire carrément html) une valeur fixe en px sur laquelle se baseront les % des éléments fils.
Oui bonne remarque. Merci 😉