Plan de site — Navigation
Blog & Blues Techniques et Standards de la Qualité Web

Accueil > weblog

- Lire le billet précédent - Lire le billet suivant -

Comment définir la taille du texte en ems (traduction)

Par Laurent Denis, le 24 mai 2004.

Le récent billet de Richard Rutter sur l'utilisation des em pour déterminer la taille des caractères en CSS est tellement clair que tout autre exposé sur le sujet serait une mauvaise paraphrase. En voici donc la traduction.

Comment définir la taille du texte en ems (posté le 18 mai 2004)

Dans les CSS, le texte destiné à l'écran est dimensionné en pixels, en ems ou à l'aide de mots-clés. Comme nous le savons tous, il est facile de fixer ses tailles de caractères en pixels : prenez votre sélecteur et donnez-lui un font-size – voilà tout. Déterminer ses tailles de caractère à l'aide des mots-clés est plus compliqué, et nécessite de recourir à quelques astuces, mais par chance, celles-ci sont bien documentées. Ce qui nous laisse les ems. Parvenus à ce point, la plupart des gens abandonnent. «Les ems sont trop peu fiables» dit-on, «Ils sont trop complexes  ils ne marchent jamais.». Eh bien, c'est peut-être l'expression de la sagesse populaire, mais si jamais on parle de FUD, alors en voilà bien un cas par excellence. Je vais maintenant tenter de vous montrer à quel point les ems peuvent être aussi facile et aussi pratiques à utiliser que les pixels.

Pourquoi des ems ?

Dans un monde parfait, nous utiliserions tous des pixels. Mais nous ne sommes pas dans un monde parfait, et nous devons donc nous débrouiller avec des navigateurs bugués. IE/Win n'autorisera pas les lecteurs à redimensionner le texte dont la taille a été fixée en pixels. Que vous aimiez ça ou non, vos visiteurs voudront redimensionner votre texte dans certains cas. Parce qu'ils ont peut-être la vue basse, parce qu'ils font une présentation, qu'ils utilisent un laptop à la résolution ridiculement trop élevée ou simplement parce qu'ils ont les yeux fatigués. C'est pourquoi les pixels ne sont pas actuellement une solution viable, à moins que vous sachiez avec certitude (pas seulement que vous pensiez) que votre public n'utilisera pas IE/Win ou ne souhaitera jamais redimensionner votre texte.

Les tailles de textes basées sur les mots-clés autoriseront tous les navigateurs à redimensionner le texte. C'est donc une possibilité viable, mais j'estime qu'elle ne me donne pas la précision que j'atteindrais avec les pixels. En revanche, le recourt aux ems autorisera tous les navigateurs à redimensionner le texte, et me donnera une précision au pixel près. C'est pourquoi les ems sont finalement mon unité de prédilection.

Comment s'y prendre ?

OK, plongeons-nous dans les ems. Je vais vous montrer, en partant de zéro, comment dimensionner le texte d'un document en ems. Je présuppose cependant que nous aurons affaire à un navigateur configuré en taille de texte « medium ». La taille par défaut pour le texte « medium » dans tous les navigateurs modernes est de 16px. Notre premier pas est donc de réduire cette taille, pour tout le document, en fixant la taille de caractères du body à 62.5% ::

body {font-size:62.5%}

Ceci ramène nos 16px à 10px, ce qui, non content d'être moins grand, est un chiffre rond agréable . A partir de là, il est facile de penser en pixels tout en continuant cependant à dimensionner le texte en ems : 1em vaut 10px, 0.8em vaut 8px, 1.6em vaut 16px, etc. Si vous positionnez votre document avec lesCSS (ce que vous ne manquez pas de faire, n'est-ce pas ?), alors vous avez probablement utilisé quelques div pour regrouper les éléments. Appliquez les tailles de texte à ces div, et votre travail est pratiquement achevé. Prenons par exemple un layout en deux colonnes, avec un en-tête et un pied de page ::

<body>
<div id="navigation"> ... </div>
<div id="main_content"> ... </div>
<div id="side_bar"> ... </div>
<div id="footer"> ... </div>
</body>

#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}

Nous obtenons un document où le texte des deux colonnes (navigation et side-bar) est rendu en 10px, celui du contenu en 12px et celui du pied de page en 9px. Il reste à présent quelques anomalies à corriger (que vous auriez eu à traiter même si vous aviez utilisé les pixels). Dans les navigateurs du type Mozilla, tous les éléments de titre de notre div main_content ci-dessus seront affichés en 12px, qu'il s'agisse de h1 ou de h6. Les autres navigateurs, en revanche, afficheront des titres de différentes tailles, comme escompté. Il suffit d'expliciter les tailles de caractères de tous les titres pour obtenir le même comportement de tous les différents navigateurs. Par exemple ::

h1 {font-size:2em}  /* affiché en 24px */
h2 {font-size:1.5em}  /* affiché en 18px */
h3 {font-size:1.25em}  /* affiché en 15px */
h4 {font-size:1em}  /* affiché en 12px */

La même opération doit être faite pour les formulaires et les tableaux, afin de forcer les contrôles et les cellules à hériter des tailles correctes (essentiellement pour régler le cas d'IE/Win) ::

input, select, th, td {font-size:1em}

Et nous en venons au dernier point, que bien des gens semblent trouver le plus « bidouilleux » : traiter le cas des éléments imbriqués. Nous avons déjà approché la question avec les titres, mais voyons à présent plus précisément de quoi il s'agissait. En premier lieu, nous avions changé la taille du texte pour le body en 10px, soit 62.5% de sa taille par défaut ::

16 x 0.625 = 10

Puis nous avions déclaré que notre contenu principal serait affiché en 12px. Si nous ne l'avions pas fait, notre div #main_content aurait été affichée en 10px car elle aurait hérité sa taille de caractères de son élément parent, le body. Ceci implique que nous devons toujours dimensionner le texte relativement à l'élément parent quand nous utilisons les ems ::

taille de l'enfant en em = taille voulue de l'enfant en pixels  / taille du parent en pixels
12 / 10 = 1.2

Ensuite, nous voulions que notre titre h1 soit en 24px. Son parent est la div main_content dont nous savons qu'elle a une taille de caractères de 12px. Pour que notre titre atteigne ses 24px, sa taille doit être doublée. Si bien que nos ems deviennent :

24 / 12 = 2

Et ainsi de suite. Les choses compliquées commencent lorsque des règles comme celle-ci sont appliquées :

#main_content li {font-size:0.8333em}

Cette règle conduit tous les items de liste du contenu principal à être affiché en 10px. Nous utiliserons le même calcul mathématique simple pour régler ce problème :

10 / 12 = 0.8333

Mais que se passe-t-il lorsqu'une liste en contient une autre ? Celle-ci devient plus petite. Pourquoi ? Parce que notre règle déclare que toute liste de la div #main_content devra être 0.8333 fois la taille de son parent. Il nous faut donc une autre règle pour évitez ce rétrécissement par héritage :

li li {font-size:1em}

Ceci spécifie que tout item de liste inclus dans un autre devra avoir la même taille de caractères que son parent (l'item de liste supérieur). J'utilise normalement une série de sélecteurs d'enfants pour éviter toute confusion pendant le développement CSS :

li li, li p, td p, blockquote p {font-size:1em}

Et le tour est joué. Lorsque vous dimensionnez votre texte en ems, il n'y a vraiment qu'une seule règle à retenir : fixer la taille du texte relativement à celle de son parent, en utilisant cette simple formule :

taille de l'enfant en em = taille voulue de l'enfant en pixels  / taille du parent en pixels

Quelques outils utiles

Le favelet list computed styles dû à Pixy est un excellent bookmarklet qui révèle la cascade de tailles de caractères calculées (ou de tout autre propriété CSS). Le DOM Inspector de Mozilla est encore plus puissant, puisqu'il vous permet de voir quelles règles CSS affectent n'importe-quel élément par ordre de priorité dans la cascade, si bien que vous pouvez voir pourquoi votre texte a changé ou non de taille lorsque vous l'aviez prévu.

Et pour conclure, qu'est-ce qu'un em ?

Classiquement, un em (prononcez emm) est une unité d'espace horizontal empruntée aux typographes, ainsi qu'une mesure proportionnelle (relative). Un em est la distance égale à la taille du texte. Dans un corps de 10 pixel, un em vaut 10 pixels; dans un corps de 18 pixel, il devient 18 pixels. Un padding de 1em est donc proportionnellement le même quelque-soit la taille du texte.

Bien-sûr, la méthode a ses limites et ses inconvénients :

  • Sur le principe, elle modifie brutalement les préférences de l'utilisateur (avec le font-size:62.5% appliqué au body. Est-il justifié de chercher la précision au pixel près ?
  • Tout repose sur une supposition : les 16 pixels du texte « medium ». Il suffit que l'utilisateur ait une autre configuration pour aboutir à un texte trop petit. Il est prudent de s'en tenir à un body {font-size: } initial plus grand (pour ma part, j'utilise 80%) ;
  • On aboutit à des agrandissements et des rétrécissements excessifs pour les font-size les plus grands et les plus petits, lorsque l'utilisateur a fixé lui-même un font-size en pourcentage dans sa propre feuille de style utilisateur. Il est donc préférable de s'en tenir à une fourchette d'ems assez serrée.
Source : How to size text using ems, Richard Rutter, 18-05-2004

Merci à l'auteur pour sa prompte et amicale autorisation accordée à cette traduction.

Pour un tour d'horizon des diverses méthodes de spécification de tailles de caractères, voir Les polices : quelle taille choisir ?, par André Vincent.

Trackbacks

1. Le 16 février 2006 à 15:46, de Emmanuel Clément | Blog dites-vous ?

le coup du 62.5%

Vous connaissez certainement de coup du 62,5% pour dimensionner facilement vos polices via CSS. Une petite idée vient de germer dans mon esprit. à moins que cela n'ait été déjà fait, si quelqu'un se lançait dans le développement d'un petit bout de...

2. Le 17 février 2006 à 00:55, de blog.virgule.info

Convertisseur em vers pixels

J'ai essayé de faire un truc qui ressemble vaguement à ce que demande Emmanuel Clement dans son billet sur le coup du 62.5%, en python. C'est bourrin, ca a vaguement l'air de marcher, mais j'ai pas plus testé que ca.

Les trackbacks pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.

Commentaires

Eric Daspet, le 24 mai 2004

Au lieu de chercher l'unité qui permettra aux visiteurs de redimensionner le texte suivant leurs préférences, pourquoi ne pas chercher l'unité qui affichera naturellement le texte suivant ces mêmes préférences dès le départ ?

Ce qui est bien c'est que c'est aussi en utilisant "em" qu'on peut le faire, il suffit de retirer cet infame "body {font-size: ... }". À quoi sert d'avoir une unité relative aux préférences utilisateurs si c'est pour ne pas en tenir compte ?

Même 0.8 em pour le body c'est énorme. Si pour moi 15px est idéal, c'est probablement que 12px (0.8 x 15px) risque d'être difficile à lire.

Thomas, le 24 mai 2004

Sur la taille par défaut à indiquer pour le body, voir aussi les problèmes possibles avec IE : css-discuss.incutio.com/?... - CSS-discuss : Using Ems et les tests présentés par Owen Briggs dans www.thenoodleincident.com... Sane CSS Sizes.

Xavier, le 01 octobre 2004

Et quid de l'utilisateur qui a défini la taille du texte du body dans son fichier utilisateur ?

body {font-size:100%!important;}

16 x 1.2 =19.2 px c'est bon pour un titre mais pour un paragraphe c'est quand-même un peu grand...

Laurent Denis, le 01 octobre 2004

Xavier, quelque-soit le procédé retenu pour déterminer la taille des caractères, une fraction d'utilisateurs devra jouer de l'agrandissement/rétrécissement manuel.
Cette technique est intéressante dans la mesure où elle cherche à atteindre une valeur médiane de taille de caractères pour une majorité d'utilisateurs.

Wauquier Sophie, le 08 février 2006

Bonjour,

Je suis en train de finir un site pour des Internautes Seniors
et j'ai appliqué le principe des tailles de texte en "em" afin que
l'utilisateur puisse agrandir le texte des articles.

Actuellement il faut évidemment se servir de la fonction
"Agrandir le texte" de son navigateur.

Mais j'aimerais ajouter un bouton qui agrandit le texte
directement sur mes pages articles à proximité du texte.
Qqun peut-il m'expliquer comment faire ?

D'avance Merci beaucoup.
Sophie.

Alex, le 17 février 2006

Un em, c'est ce que les typographes francophones appellent un cadratin. Ça désignait à l'époque où on imprimait avec des caractères en plomb une espace parfaitement carrée (d'où le nom). Les cadratins sont aujourd'hui virtuels mais on se sert toujours du nom comme d'une unité de mesure. Autrement dit, un cadratin, c'est la distance qui sépare verticalement deux lignes de texte (si on ne touche pas à l'interlignage, évidemment).

En anglais, ça s'appelle em parce que ça désignait d'abord la largeur d'un M capitale. Ce n'est plus vrai : l'em est maintenant équivalent à un cadratin, parce que c'est plus commode.

Enfin ce qui est important, c'est que le cadratin est une unité proportionnelle au corps du texte, et que c'est intéressant de pouvoir définir des distances en cadratins dans des feuilles de style. Par exemple, en définissant un text-indent de 1 em, on sait que le retrait d'alinéa formera un beau carré, même si l'utilisateur décide d'agrandir ou de rétrécir son texte.

Et ça, c'est cool.

Body, le 24 février 2006

J'ai l'impression qu'avec la valeur font-size:62.5%; on ne peut plus rétrécir le texte sous firefox mais seulement l'agrandir ( même avec texte définit en 2 ou 3em).
Est-ce quelqu'un a fait la même observation ?

Les commentaires pour ce billet sont temporairement fermés en raison d'une série d'attaques de spam.