Taille de police en CSS -% ou em?
Lors de la définition de la taille des polices en CSS, dois-je utiliser un pourcentage (%) ou em? Pouvez-vous expliquer l'avantage?
Il y a un très bon article sur la typographie web sur A List Apart .
Leur conclusion:
Le dimensionnement du texte et de la hauteur de ligne en ems, avec un pourcentage spécifié sur le corps (et une mise en garde facultative pour Safari 2), s'est avéré fournir un texte précis et redimensionnable sur tous les navigateurs couramment utilisés aujourd'hui. C'est une technique que vous pouvez mettre dans votre sac de kit et utiliser comme meilleure pratique pour dimensionner du texte en CSS qui satisfait à la fois les concepteurs et les lecteurs.
De http://archivist.incutio.com/viewlist/css-discuss/1408
%: Certains navigateurs ne gèrent pas le pourcentage de taille de police, mais interprètent 150% comme 150 pixels. (Certaines versions NN4, par exemple.) IE a également des problèmes avec le pourcentage sur les éléments imbriqués. Il semble IE utilise le pourcentage par rapport à la fenêtre d'affichage plutôt que par rapport au parent) Encore un autre problème (bien que correct selon les spécifications du W3C), dans Moz/Ns6, vous ne pouvez pas utiliser le pourcentage par rapport aux éléments sans hauteur/largeur spécifiée.
em: Parfois, les navigateurs utilisent la mauvaise taille de référence, mais parmi les unités relatives, c'est celle qui pose le moins de problèmes. Vous le trouverez peut-être parfois interprété comme px.
pt: diffère considérablement entre les résolutions et ne doit pas être utilisé pour l'affichage. Il est cependant assez sûr pour une utilisation imprimée.
px: La seule unité absolue fiable à l'écran. Cependant, il peut être mal interprété sur papier, car un point est généralement composé de plusieurs pixels, et donc tout devient ridiculement petit.
Les deux ajustent la taille de la police par rapport à ce qu'elle était. 1,5 em équivaut à 150%. Le seul avantage semble être la lisibilité, choisissez celui avec lequel vous êtes le plus à l'aise.
Étant donné que (presque?) Tous les navigateurs redimensionnent désormais la page dans son ensemble, plutôt que seulement le texte, les problèmes précédents avec px vs % vs ems en termes de redimensionnement des polices accessibles sont plutôt sans objet.
Donc, la réponse est que cela n'a probablement pas d'importance. Utilisez ce qui vous convient.
%est sympa car il permet un redimensionnement relatif.
pxest sympa car il est assez facile de gérer les attentes lors de son utilisation.
empeut être utile lorsqu'il est également utilisé pour les éléments de mise en page car il peut permettre un dimensionnement proportionnel lié à la taille du texte.
La vraie différence apparaît lorsque vous ne l'utilisez pas pour les tailles de police. Définition d'un padding de 1em n'est pas la même chose que 100%. em est toujours relatif à la taille de la police. Mais % pourrait être relatif à la taille de la police, la largeur, la hauteur et probablement d'autres choses que je ne connais pas.
Concernant la différence entre les unités css % et em.
Pour autant que je sache (au moins théoriquement/conceptuellement, mais peut-être pas comment ces deux unités peuvent être implémentées dans les navigateurs), ces deux unités sont équivalentes, c'est-à-dire si vous multipliez votre valeur em par 100 puis remplacez em par % ça devrait être la même chose?
S'il existe réellement une réelle différence entre em et%, quelqu'un peut-il l'expliquer (ou fournir un lien vers une explication)?
(Je voulais ajouter mon commentaire là où il appartiendrait, c'est-à-dire en retrait juste en dessous de la réponse par "Liam, answered Sep 25 '08 at 11:21" puisque je veux aussi savoir pourquoi sa réponse a été déclassée, mais je n'ai pas pu trouver comment y mettre mon commentaire et j'ai donc dû écrire cette réponse "thread global")