Nouveau tutoriel sur la taille de police "em"

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".

caractère de typographie

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 ;)

Par Raphael GOETTER - jeudi 19 octobre 2006 à 14:55

Tutoriels Alsa - #293 - Lu 8137 fois - Intérêt du billet: 3.85(13) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le jeudi 19 octobre 2006 à 15:13, par giz404 :: site :: #

Pour moi, un em correspondait à la largeur de la lettre m minuscule... On m'aurait donc menti ? Et du coup, à quoi correspond un ex ??

Le jeudi 19 octobre 2006 à 15:23, par Raphael :: site :: #

@giz404 : pas bête comme question. Je pense que des explications sur "ex" vont être ajoutées à l'article.

Le jeudi 19 octobre 2006 à 16:25, par Snakeboudoir :: site :: #

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 :-)

Le jeudi 19 octobre 2006 à 17:12, par Florent V. :: site :: #

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.

Le jeudi 19 octobre 2006 à 22:40, par françois :: #

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

Le vendredi 20 octobre 2006 à 00:27, par Florent V. :: site :: #

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.

Le vendredi 20 octobre 2006 à 15:05, par Oliver :: #

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 !

Le vendredi 20 octobre 2006 à 20:44, par Florent V. :: site :: #

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.

Le samedi 21 octobre 2006 à 16:36, par Oliver :: #

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 ?... :)

Le samedi 21 octobre 2006 à 22:48, par Florent V. :: site :: #

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. ;)

Le lundi 23 octobre 2006 à 15:07, par Oryo :: #

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)

Le lundi 23 octobre 2006 à 19:29, par Florent V. :: site :: #

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...

Le mardi 24 octobre 2006 à 09:54, par Oryo :: #

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 :-)

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.

  • Réussir son site web avec XHTML et CSS
  • CSS : Le guide complet
  • Memento CSS
  • Memento XHTML