behess a écrit :
Bon, j'arrête les questions ne neuneu 
j'en ai assez fait...
Non non, c'est important de comprendre ces choses là. Du coup je vais me fendre d'une petite explication.
Il y a deux facteurs dont il faut tenir compte :
- la résolution de l'écran de l'utilisateur (mini-écrans des clients mobiles, écrans réduits mais avec pixels très petits des ordinateurs portables récents, écrans CRT plus ou moins large avec des résolutions allant de 640 px de large à plus de 2000 px de large, etc.) ;
- les préférences de l'utilisateur pour la taille du texte par défaut.
Concrètement, tout le monde n'a pas le même écran que toi, dans la même résolution que toi, et tout le monde n'a pas les mêmes yeux ou les mêmes habitudes de lecture que toi. Il y a donc quantité de raisons pour lesquelles un utilisateur voudrait réduire (cas assez rare) ou surtout augmenter la taille du texte d'une page.
Pour s'en convaincre, il suffit de prendre un site dont certains textes ont une taille figée de 8px. Huit pixels, c'est généralement la taille que l'on donne à un petit texte informatif, que l'on veut secondaire mais lisible... quand on développe sur un écran en 1024x768. Maintenant, si on regarde ce site sur un écran en 1280x1024 (de plus en plus courants : un quart des utilisateurs a au moins une telle résolution !), le texte est presque illisible. Parce que 8px quand les pixels sont 20% ou 30% ou 40% plus fins, il faut vraiment 1) avoir de très bon yeux et 2) ne pas être gêné par la lecture de tout petits textes.
Imagine maintenant sur un écran de portable en 1600px de large...
Le problème, c'est donc que les tailles de texte en pixels ou en points ne s'adaptent pas à la résolution de l'utilisateur.
La solution, c'est de toujours se baser sur la taille du texte par défaut configurée par l'utilisateur. Celle-ci dépend souvent des paramètres du système d'exploitation (celui-ci, s'il est intelligent, ajuste la taille par défaut en fonction de la résolution de l'écran), et peut être complétée par les paramètres que configure l'utilisateur (taille du texte par défaut, résolution en ppp... je connais mal les détails et leurs implications, mais en gros on peut estimer que dans la plupart des cas les systèmes et/ou navigateurs se débrouillent à peu près correctement pour afficher une taille de texte par défaut correcte).
Pour cela, on passera par les déclarations de taille de texte en pourcentages et en
em :
1 - déclarer
font-size: x%; pour un élément signifie que le texte contenu dans cet élément aura une taille de x% de la taille du texte de son élément parent ;
2 - déclarer
font-size: yem; pour un élément signifie que le texte contenu dans cet élément aura une taille de y fois la taille du texte de son élément parent.
em, c'est quoi ce truc ?
Techniquement, la valeur
1em appliquée à l'élément html (ou le cas échéant à l'élément body, si aucune taille de texte n'est spécifiée pour html) correspond à la hauteur d'un caractère. C'est aussi, normalement, la largeur totale du tiret cadratin (—), et le double de la largeur du tiret demi-cadratin (–).
En gros, 1em = une ligne de texte.
Pour information, les marges par défaut pour l'élément
p sont définies ainsi dans la plupart des navigateurs :
p {margin: 1em 0;}
De même, le retrait à gauche des listes ordonnées et des listes non ordonnées est généralement de 2.5em.
Petite note sur la syntaxe CSS : dans une feuille de style, on peut déclarer aussi bien
.8em que
0.8em. Les deux sont équivalents.
Concrètement...
Dans une feuille de style CSS, tu peux commencer par déclarer la taille du texte ainsi :
html {font-size: 100%;}
body {font-size: .9em;}
Le font-size: 100% sur html n'est pas indispensable, il sert ici éviter
un bug d'IE 6.
La taille du texte pour body sera donc 90% (on aurait pu écrire
font-size: 90%) de 100% de la taille du texte par défaut.
Généralement, on conseille de ne pas descendre en dessous de 80% de la taille du texte par défaut, surtout pour un flot de texte principal !
À 100% de la taille du texte par défaut, par contre, on obtient souvent quelque chose d'assez gros, ce qui est peu apprécié des graphistes aux yeux acérés et qui n'aiment pas que le contenu textuel s'impose trop par rapport au reste du design... par contre, les quadra, quingénaire, et leurs aînés seront peut-être heureux de visiter un site dont le texte est lisible sans trop d'efforts. En général, mieux vaut « un peu trop gros » que « un peu trop petit ».
Oui mais si je laisse l'utilisateur faire comme il veut ça casse mon design !
Effectivement, laisser l'utilisateur (ou le système d'exploitation et les réglages du navigateur) décider de la taille du texte a des inconvénients. Beaucoup de mises en page, surtout quand elles contiennent des éléments figés en hauteur, nécessitent une certaine maîtrise de la taille du texte, qui sinon sortirait de son conteneur fixe, par exemple. Mais fixer ainsi la taille du texte en pixels est doublement néfaste :
1 - Premièrement, cela signifie qu'un design « optimisé » pour une résolution de 1024px de large aura un texte peut-être trop gros en 800px de large, et
très probablement trop petit (voire illisible !) dans les résolutions supérieures à celle prévue. L'effet de « conservation » du design prévu est finalement perdu : le but du design que l'on a souhaité coûte que coûte conserver intact n'était-il pas, tout d'abord, de présenter un texte lisible ?
2 - Deuxièmement, cela signifie que tous les utilisateurs qui ont
besoin de pouvoir agrandir le texte ne pourront pas le faire. Du coup, la page sera probablement illisible pour eux, que leur besoin particulier soit lié à une configuration matérielle particulière (grandes résolutions) ou à des problèmes de vue soit légers (très courants, pourquoi pensez-vous que les lunetiers fassent autant de publicité visant les quadra et quinquagénaires, voire les séniors ?), soit plus importants (malvoyants).
Une seule solution :
prévoir l'extensibilité du design. S'il s'agit d'un design fixé en largeur (ce qui est déjà en soi une contrainte pour l'accessibilité), on veillera au moins à ce qu'aucun texte ne soit fixé en pixels ou en points, et surtout à ce qu'aucun élément contenant du texte ne soit figé en hauteur !
Une fois le réflexe pris, ça va tout seul.
Modifié par fvsch (07 Feb 2012 - 19:00)