Le débat sur em VS px VS% en typographie est-il toujours valable

8

J'ai lu quelques articles sur les raisons pour lesquelles les em sont meilleurs que px en typographie. Et la base doit être en%, le mieux est même d'avoir body{ font-size:62.5%; }.

L'un des meilleurs articles que j'ai pu trouver se trouve ici: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Fondamentalement, il est dit que px n'évolue pas bien sur les sites Web et les appareils. J'ai toujours fait de la typographie en px et je n'ai jamais trouvé de problème. J'ai également travaillé avec un framework CSS et des thèmes wordpress, et je vois toujours que seul le px normal est utilisé.

Maintenant, je vois que la plupart des articles sont écrits il y a quelques années, je voulais savoir s'il est toujours vrai que px ne se modifie pas bien, ou n'est-ce plus un point pour les navigateurs et appareils modernes .

Sur une note latérale. J'ai même lu et vu sur certains sites que les gens vont même si loin pour faire tout leur style. Par exemple, le remplissage et les marges se font en em.

Est-ce nécessaire si vous voulez avoir un bon site Web de mise à l'échelle.

website-design typography Saif Bechan
la source
2
Pour rendre les choses encore plus confuses, la plupart des navigateurs modernes prennent en charge les ems ou rems relatifs snook.ca/archives/html_and_css/font-size-with-rem .
paulmorriss
Il y a une meilleure réponse plus récente sur StackOverflow: stackoverflow.com/questions/11799236/…
Denis de Bernardy

Réponses:

3

Ma réponse, car le texte lui-même est définitivement un "non". Les bons navigateurs trichent (comme ils le devraient) en ce qui concerne la mise à l'échelle des polices spécifiées en unités de pixels. Le développeur Web doit rester indifférent à toute différence sur les appareils sur lesquels le contenu est rendu.

Essayez ceci dans l' éditeur Tryit de w3Schools :

<html>
<body>
<p style="font-size:1em">This is a paragraph.</p>
<p style="font-size:12pt">This is a paragraph.</p>
<p style="font-size:16px">This is a paragraph.</p>
<p style="font-size:100%">This is a paragraph.</p>
</body>
</html>

Maintenez ensuite la touche Ctrl enfoncée et faites défiler avec la molette de votre souris, ou appuyez sur Ctrl-Numérique +. Ils devraient tous évoluer uniformément dans un bon navigateur.

Il n'est pas garanti que les pixels soient uniformément larges et élevés, mais la résolution est toujours de 96 DPI, et les préférences de l'utilisateur peuvent s'appliquer pour augmenter ou réduire l'échelle de tout le contenu. Gardant cela à l'esprit, la plupart des navigateurs prennent en compte ces différences de résolution et mettent à l'échelle la sortie en fonction du matériel / des préférences spécifiques. Si un navigateur appliquait strictement les unités de pixels réelles, le navigateur (ou le périphérique matériel sur lequel il s'exécute) serait voué à être perçu comme une défaillance par l'utilisateur final.

Cela dit, sachant que le HTML n'est pas optimisé pour la mise à l'échelle, mais pour redistribuer le texte dans la plus large gamme de proportions possible (largeur divisée par hauteur). Les navigateurs diffèrent dans le remplissage et les marges de mise à l'échelle lorsqu'ils sont spécifiés dans différentes unités. Pour les conceptions vraiment évolutives (par exemple, lorsque la position sur l'arrière-plan est importante), il convient d'envisager d'utiliser un format évolutif et non fluide tel que SVG . Faire un remplissage et des marges en pourcentage est toujours risqué!

Si vous utilisez un fond d'image ou autre, et que vous souhaitez que le remplissage ou la marge soit un nombre spécifique de pixels vers l'intérieur, mon conseil est de vous assurer de spécifier ces marges et ce remplissage en unités de pixels!

Louis Somers
la source
1
Juste un point à noter - la fonctionnalité "Taille du texte" dans IE ne met pas à l'échelle les polices qui sont explicitement fixées à l'aide de ptou px.
Zhaph - Ben Duguid