Dimensionner ses fontes avec rem
Par Jonathan Snook
Déterminer quelle unité de mesure choisir pour la taille de notre texte peut mener à un débat houleux, même de nos jours. Malheureusement, il existe toujours des avantages et inconvénients qui rendent ces différentes techniques peu désirables. La question est alors de savoir quelle solution est la « moins pire ».
Les deux techniques suivantes sont le plus souvent utilisées :
- taille en px ;
- taille en em.
Analysons ces deux approches avant que je ne révèle mon troisième atout.
Dimensionnement avec px
Au tout début du Web, nous utilisions les pixels pour dimensionner notre texte. Cette solution est fiable et cohérente. Malheureusement, les utilisateurs d’Internet Explorer (même IE9) ne peuvent pas changer la taille du texte en utilisant la fonction native de redimensionnement du texte de leur navigateur. Pour ceux d’entre nous qui se soucient de la convivialité de leur site web, cela peut poser un gros problème. Les versions récentes d’IE incluent une fonction de zoom, mais elle augmente la taille de tout le contenu de la page (une fonctionnalité également présente dans la plupart des autres navigateurs courants). Cela a permis de limiter le problème jusqu’à un certain point.
Pour ma part, je suis du côté de ceux qui pensent que les mises en page en pixels apportent la cohérence nécessaire, et que les utilisateurs possèdent suffisamment d’outils dédiés à l’affichage pour arrêter de penser que l’accessibilité est si préoccupante. Mais je digresse. Que pouvons‑nous faire d’autre ?
Dimensionnement avec em
L’impossibilité totale de redimensionner le texte avec IE est une frustration permanente. Pour contourner le problème, nous pouvons utiliser les unités en em. L’article de Richard Rutter « How to size text using ems » [1] est probablement le premier que j’ai lu à propos de cette approche ; c’était en 2004. (Wow, bientôt sept ans.)
Cette technique modifie la taille du texte de base du body grâce à des pourcentages. L’ensemble est ajusté de telle sorte qu’1em est égal à 10px, au lieu des 16px par défaut. Pour définir une taille de fonte équivalente à 14px, réglez‑la à 1.4em.
body { font-size: 62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */Le problème avec le dimensionnement par em est que les tailles agissent en cascade : une liste dans une liste ne fait pas 14px, elle fait 20px. Un niveau plus loin, et elle fera 27px ! Ce problème peut être contourné en définissant une taille de 1em pour chacun des éléments enfants, annulant ainsi l’effet de cascade.
body { font-size: 62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }La nature combinatoire du dimensionnement par em peut être frustrante, que pouvons‑nous donc faire d’autre ?
Dimensionnement avec rem
CSS3 introduit un certain nombre de nouvelles unités, dont le rem, qui signifie « root em » [2]. Si vous n’êtes pas encore profondément endormis, regardons un peu comment fonctionne rem.
L’unité em est relative à la taille de la fonte du parent, ce qui crée un effet de cascade problématique. L’unité rem est relative à l’élément racine : la balise html. Cela signifie que nous pouvons ne définir qu’une seule taille de police sur l’élément html, puis composer toutes les tailles en rem comme pourcentages de cette valeur initiale.
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */Je définis une taille de police initiale de 62.5% pour bénéficier des mêmes avantages qu’un dimensionnement en px.
Mais à quel piètre support devons‑nous nous attendre du côté des navigateurs ?
Vous serez surpris d’apprendre que le support des navigateurs est tout à fait honnête : Safari 5, Chrome, Firefox 3.6+, et même Internet Explorer 9 supportent cette unité. Le plus beau est qu’IE9 permet de redimensionner le texte s’il est défini en rem. (Hélas, Opera (jusqu’à 11.10, au moins) n’a pas encore implémenté l’unité rem.)
Que faire pour les navigateurs qui ne supportent pas l’unité rem ? Nous pouvons spécifier une solution de secours en px, si cela ne vous ennuie pas que les utilisateurs d’anciennes versions d’Internet Explorer soient toujours incapables de redimensionner le texte (enfin, il existe toujours le zoom pleine page sur IE7 & IE8). Pour ce faire, nous spécifions la taille en px, puis nous la définissons une seconde fois en utilisant l’unité rem.
html { font-size: 62.5%; }
body { /* =14px */
font-size: 14px;
font-size: 1.4rem;
}
h1 { /* =24px */
font-size: 24px;
font-size: 2.4rem;
}Et voilà ! Nous avons maintenant un dimensionnement du texte cohérent et prévisible dans tous les navigateurs, et du texte redimensionnable dans la dernière version des navigateurs principaux.
[1] Comment dimensionner du texte en utilisant les em
[2] em à l’origine (racine)
http://snook.ca/archives/html_and_css/font-size-with-rem