Toujours dans la lignée du chantier de rentrée Alsacréations, un nouvel article vient d'être rédigé par Florent Verschelde (mpop) dans le domaine de la Typographie web : gérer la taille du texte avec les "em".
Cet article, aussi clair que détaillé et illustré, a pour but de vulgariser la compréhension et l'emploi de cette unité de taille mal connue qu'est le "em".
Pour améliorer sensiblement l'accessibilité d'un site web, il faut permettre le redimensionnement du texte, afin qu'il s'adapte aux résolutions et aux paramètres des utilisateurs. Pour cela, on utilisera les unités relatives, et en particulier l'unité "em". Mais beaucoup de webmasters, peu familiers avec cette unité, répugnent à l'utiliser. Dommage...
Ce tutoriel présente l'unité "em" et la démarche à suivre pour l'utiliser à bon escient, ainsi que quelques conseils pour vous aider à assurer autant que possible la lisibilité du texte sur votre site... et donc à en améliorer la qualité générale.
Un grand merci à Mpop pour cette excellente contribution, et bonne lecture à vous !
Lire Typographie web : gérer la taille du texte avec les "em".
PS : d'autres articles et tutoriels sont actuellement en chantier dans nos locaux ;)
Commentaires
Pour moi, un em correspondait à la largeur de la lettre m minuscule... On m'aurait donc menti ? Et du coup, à quoi correspond un ex ??
@giz404 : pas bête comme question. Je pense que des explications sur "ex" vont être ajoutées à l'article.
Et bien cet article est très intéressant... Je m'acharnais tout le temps à faire du pixel, je vais voir pour utiliser de l'em maintenant :-)
Les ex, c'est encore toute une histoire...
Théoriquement, ça correspond à la hauteur de la lettre x minuscule (ce que l'on appelle l'oeil de la lettre en typographie). Le problème, c'est de savoir comment c'est géré par les navigateurs, et ce qu'on peut en faire au juste.
Bonjour,
Super tutorial, ça a remis mes pendules à l'heure.
Juste une question :
Quid de la taille des blocs ? Est-ce qu'il peut-être intéressant d'utiliser des largeurs/hauteurs/marges définis en em ou bien faut-il privilégier le px ?
Merci
François >
Pour la taille des blocs, le problème est qu'avec l'agrandissement du texte ça peut prendre des proportions énormes ! Alors dans certains cas très précis on pourra vouloir utiliser des height et min-height en em, mais pour les largeurs mieux vaut être prudent.
Attention aussi aux paddings et margin latéraux en em, pour le coup on privilégiera les pixels.
Enfin pour fixer la largeur d'un bloc on utilisera soit les pixels, soit des pourcentages de la largeur du bloc parent.
Bref, les em pour les dimmensions horizontales sont à utiliser avec précaution.
Salut !
Bon tuto ! Une petite remarque : par défaut, la taille du texte ds les navigateurs est de 16px (me trompe-je ?). Quand ont travaille en "em", c'est bon à savoir !
Hello Olivier.
C'est effectivement le paramètre « standard », mais j'ai fait exprès de ne pas l'inclure dans l'article, dont le but est de promouvoir une manière de faire qui abandonne la référence aux pixels comme béquille conceptuelle. ;)
Sur ce plan, je trouve l'article de Richard Rutter assez nul.
Pour ma part, je n'ai jamais réfléchi en pixels pour la gestion du texte sur mes sites (sauf le tout premier, si je me souviens bien), et ni moi ni les sites que j'ai pu réaliser ne nous en portons plus mal. :)
Concrètement, à partir du moment où on se base sur la taille du texte par défaut, en la corrigeant légèrement dès le départ, on part sur des bases saines, et le recours aux pixels n'est pas nécessaire : il suffit de visualiser et de tester avec quelques navigateurs/résolutions différentes.
Salut !
Je voulais dire par là que si tu décides que la taille "en général" du txt de ton site est, mettons, de 12px, il va falloir déclarer ds le body "font-size: 0.75em" (12/16=0.75).
Si, ensuite, tu veux créer des class ou autres, où le txt sera l'équivalent, par ex, de 8px, il faudra que tu le fasses EN FONCTION de ta déclaration préalable. D'où "font-size: 0.66em" (8/12=0.666) !
NB : mais qui est donc ce Richard Rutter qui écrit des articles nuls ?... :)
Attention, si tu définis une taille de texte globale de 0.75em, ça ne fera pas 12px, mais... 75% de la taille de texte par défaut. Ça sera donc 12px dans une majorité de cas, mais pas dans tous.
Je pour ma part qu'il est INUTILE de réfléchir en pixels à quelque stade que ce soit pour la gestion de la taille du texte. Il suffit d'observer la taille du texte par défaut sur deux ou trois navigateurs pour deux ou trois résolutions d'écran différentes, et on a déjà une idée plus réaliste que celle que pourrait donner tout calcul à base de pixels. Je m'oppose donc clairement à Richard Rutter sur ce point, vu que son article consiste pour l'essentiel à dire « on va utiliser des EM, mais on va faire comme si c'était des pixels, sinon on va pas s'en sortir ».
Disons que l'article avait son intérêt lorsqu'il est sorti. C'était encore l'époque des pionniers. Mais aujourd'hui, avec le recul, il me semble clairement dépassé.
Faudrait avoir l'avis de Laurent Denis sur ce point. ;)
75%?
Moi on m'a dit de mettre 62.5% au <body>
Ainsi, 1.1em ou 1.2em fait 11px et 12px.
Je signale au passage un outil pour vérifier la taille des polices em en px: List computed(qui n'est pas trop mal)
Oryo >
Le coup des 62.5%, c'est ce que démontre Richard Rutter... une manoeuvre que je trouve, pour ma part, complètement INUTILE (non non, même au bout de la quinzième fois que je l'écris, je ne me lasse pas...). Voir à ce sujet ma réponse ci-dessus...
Je me renseignerai sur ce sujet, merci.
Mais je pense que ça doit pas être évident de ne plus penser pixel car c'est l'unité de référence pour tout graphisme web, les images etc sont en pixels. Donc c'est tentant de garder sa "mauvaise" habitude :-)