Définir la taille des caractères de base (conversion px vers em)

Bonjour,

je souhaite convertir mon site pour le rendre élastique.
Quelle est la meilleure solution pour définir la taille des caractères de base:

body { font-size: 10px }

ou

body { font-size: 62.5% }

Les em commencent à me filer une bonne migraine - d'autant que je vais aussi utiliser une hauteur de ligne constante pour le rythme vertical du texte.

En toute franchise, la plupart des navigateurs modernes ayant des fonctions de zoom bien pratiques, est-ce vraiment la peine que je me martyrise les neurones?

Merci d'avance pour vos suggestions.

Higure a écrit :
Bonjour,

je souhaite convertir mon site pour le rendre élastique.
Quelle est la meilleure solution pour définir la taille des caractères de base:

body { font-size: 10px }

ou

body { font-size: 62.5% }

Les em commencent à me filer une bonne migraine - d'autant que je vais aussi utiliser une hauteur de ligne constante pour le rythme vertical du texte.

En toute franchise, la plupart des navigateurs modernes ayant des fonctions de zoom bien pratiques, est-ce vraiment la peine que je me martyrise les neurones?

Merci d'avance pour vos suggestions.

Bonjour,
la valeur de 62,5% (issues certainement d'un tuto qui date un peu) est trop petite.

Eviter les pixels autant que possible pour que la taille que tu définis ne prenne pas le dessus sur la taille que pourra choisir l'usager dans les paramètres (16px/12pt étant le standard adopté par la majorité des navigateurs).

Pour éviter certains problème lors de l'agrandissement des police dans IE, il faut partir d'une valeur en %.
Pour ma part je te conseil 77 ou 82% (soit environ 13px) pour le texte courant.
Voir ce tableau

Et des valeur en em pour les autre catégories de texte.
Un outil bien pratique pour le calcul des ems : http://riddle.pl/emcalc/
Modifié par Hermann (01 May 2012 - 16:08)

Merci Hermann, mais j'ai oublié quelque chose: je voudrais que la taille de base = 10px (que ce soit exprimé en em, %, pt etc...) afin de faciliter les calculs, en particulier quand je vais m'ateler aux colonnes, marges, line-height, div...

Avoir une base de 10 me semble bien plus aisé.

Higure a écrit :
Merci Hermann, mais j'ai oublié quelque chose: je voudrais que la taille de base = 10px (que ce soit exprimé en em, %, pt etc...) afin de faciliter les calculs, en particulier quand je vais m'ateler aux colonnes, marges, line-height, div...

Avoir une base de 10 me semble bien plus aisé.

Pourquoi crois tu que la taille des polices est associée à la largeur d'une colonne?
On ne choisit pas le corps d'une police pour faciliter le travail de l'intégrateur mais dans un premier temps, en fonction de critères liés à l'ergonomie et l'accessibilité.
Donc 10px est une taille de base trop petite pour un bon confort de lecture.
Modifié par Hermann (01 May 2012 - 19:00)

C'est sûr que 10px c'est trop petit pour la lecture, mais la question n'est pas là. Ici le but est de choisir une valeur référente pour ne pas devoir subir des calcules chelou tout à long de l'intégration.

Définir une valeur ronde permet aussi, en cas de travail en équipe, une bonne économie de temps si l'on applique toujours cette convention, du premier coup d'oeil ont sait quelle valeur vaut quoi. Donc non on ne choisi pas un corps de police pour facilité le travail de l'intégrateur mais derrière il y a plusieurs moyen de gérer cette taille de police, et ça par contre ça mérite reflexion, même si au final pour l'utilisateur c'est transparent.

Donc à priori je serais tenter de répondre :

body { font-size: 62.5% }

Même si personnellement je trouve que cette annotation n'a plus lieu d'être étant donné qu'elle ne s'adresse qu'à IE6 ? (peut être le 7 je ne sais plus mais je ne crois pas). Que l'ont me confirme si je dis des grosses bêtises ^^

Hermann a écrit :

Donc 10px est une taille de base trop petite pour un bon confort de lecture.

Qui a dit que 10px serait la taille finale du texte?
Je veux juste avoir 10px comme base de calcul.
Modifié par Higure (02 May 2012 - 02:30)

Gili a écrit :
C'est sûr que 10px c'est trop petit pour la lecture, mais la question n'est pas là. Ici le but est de choisir une valeur référente pour ne pas devoir subir des calcules chelou tout à long de l'intégration.

Exact.
Si j'ai 10px comme base, il me suffit de prendre n'importe qu'elle valeur en pixel, de la diviser par 10, et d'avoir tout de suite la valeur en em.
Ca facilite aussi la relecture du code, en particulier par une tierce personne.

Si j'avais 13px, comme la suggestion de Hermann. alors par exemple:
960px = 73.846em
240px = 18.462em
20px = 1.538em
etc...
confus, et surement pas super précis

Gili a écrit :
Donc à priori je serais tenter de répondre :

body { font-size: 62.5% }

Même si personnellement je trouve que cette annotation n'a plus lieu d'être étant donné qu'elle ne s'adresse qu'à IE6 ? (peut être le 7 je ne sais plus mais je ne crois pas). Que l'ont me confirme si je dis des grosses bêtises ^^

J'ai jeté un oeil sur cetains px-->em convertisseurs ou générateurs de grid.
Certains utilisent des pourcentages. D'autres, comme Gridinator, utilisent les pixels

body { 
	font-size: 10px;
	margin: 0;
	padding: 0;
	text-align: center;
}

Sauf erreur de ma part, utiliser un pourcentage va donner une valeur différente suivant la taille de police par défaut choisie par l'utilisateur, non?

Gili a écrit :

body { font-size: 62.5% }

Même si personnellement je trouve que cette annotation n'a plus lieu d'être étant donné qu'elle ne s'adresse qu'à IE6 ? (peut être le 7 je ne sais plus mais je ne crois pas). Que l'ont me confirme si je dis des grosses bêtises ^^

IE9 le fait encore (en zoom text only).



Sinon, puisque le but c'est l’élastique, pourquoi vouloir à tout prix utiliser les em ? Si tu n'es pas à l'aise, utilise les % et prend 100% comme base.

Higure a écrit :
Sauf erreur de ma part, utiliser un pourcentage va donner une valeur différente suivant la taille de police par défaut choisie par l'utilisateur, non?

Oui, et ? À part dans de rares cas, cette valeur sera toujours celle par défaut.
Modifié par Laurie-Anne (02 May 2012 - 07:17)

Higure a écrit :
Exact.
Si j'ai 10px comme base, il me suffit de prendre n'importe qu'elle valeur en pixel, de la diviser par 10, et d'avoir tout de suite la valeur en em.
Ca facilite aussi la relecture du code, en particulier par une tierce personne.

Inexact. Dès que tu donneras un taille de police différente à un élément, tous les éléments enfants auront le em en référence à cet élément parent, et plus du body.
Ce qui est bizarre, c'est de vouloir faire du fluide et du relatif, et vouloir se rassurer en sachant "combien ça fait de pixels". Le principe de travail avec ces unités est justement de ne plus penser en pixels.

Laurie-Anne a écrit :
IE9 le fait encore (en zoom text only).

Ah sacrebleu je ne savais pas merci de l'info, effectivement ça la rend directement moins obsolète.

kustolovic a écrit :
Inexact. Dès que tu donneras un taille de police différente à un élément, tous les éléments enfants auront le em en référence à cet élément parent, et plus du body.

Je ne suis pas d'accord avec toi, ça c'est si on utilise font-size à tire larigot. Par contre si on l'utilise juste en fin de chaine de façon optimisé ce problème n'a plus lieu d'être. Enfin dans tout les cas, c'est sûr, vivement rem. Mais em nous force à être un peu plus strict avec la gestion des tailles de police.

kustolovic a écrit :

Ce qui est bizarre, c'est de vouloir faire du fluide et du relatif, et vouloir se rassurer en sachant "combien ça fait de pixels". Le principe de travail avec ces unités est justement de ne plus penser en pixels.

Qu'appels-tu relatif ? Si tu parles de "fixe" je ne vois pas où est le problème de mélanger les deux, en ce moment c'est d'ailleurs comme ça que je procède. Par exemple je défini la structure en %, mais je lui met malgré tout un max-width de 960px. Comme ça tout est fluide en deçà de 960. Si tu ne parles pas ça, je serais intéressé de savoir ce que tu appels "faire du relatif". Merci d'avance ^^

Laurie-Anne a écrit :
Sinon, puisque le but c'est l’élastique, pourquoi vouloir à tout prix utiliser les em ? Si tu n'es pas à l'aise, utilise les % et prend 100% comme base.

Le site aura une taille maximale fixe (equivalent a 960px), je veux juste éviter un massacre visuel si l'utilisateur final fait un zoom text only.

Les %, je suis encore moins à l'aise qu'avec les em. Ca ne se divise pas toujours bien (100/3 ou 100/6 par exemple).
Modifié par Higure (02 May 2012 - 16:01)

kustolovic a écrit :
Inexact. Dès que tu donneras un taille de police différente à un élément, tous les éléments enfants auront le em en référence à cet élément parent, et plus du body.

Je sais. Ca ne sera pas un probleme.

kustolovic a écrit :
Ce qui est bizarre, c'est de vouloir faire du fluide et du relatif, et vouloir se rassurer en sachant "combien ça fait de pixels". Le principe de travail avec ces unités est justement de ne plus penser en pixels.

Ouais, bien sur. Et ensuite, bonjour les problèmes de contenu>contenant quand tu insères des images, vidéos, lecteurs multimédia, widgets tierce-partie etc. dont la taille est exprimée en pixels