Meilleure méthode taille de police ?

Bonjour,

J'aimerais savoir quelles sont les méthodes possibles et passe-partout utilisées pour définir convenablement les tailles de police.

J'ai consulté le boilerplate HTML5 et dedans j'ai trouvé ceci pour la définition des tailles.

html {font-size : 100%} /* pour IE < 6 */
body { font:13px/1.231 sans-serif; *font-size:small; } /* Hack retained to preserve specificity */
.select, input, textarea, button { font:99% sans-serif; }

Pouvez vous m'expliquer le role de *font-size:small ? C'est un hack css pour IE < 7, mais quel est son but ?

Par ailleurs YUI préconise d'utiliser des tailles en pourcentages (ici.
Dans des tutos trouvés sur alsacreations, Raphaël nous dit ici que EM et pourcentages sont identiques, Yahoo YUI dit que les EM sont moins constantes que les pourcentages.


J’avoue être un peu perdu.

Bonjour,

Mon avis, version 2011:

Bugs et spécificités techniques
- Il y a, dans IE 6-7, un bug lors de l'agrandissement du texte lorsqu'on n'utilise que l'unité em d'un bout à l'autre de la chaine. On peut soit ignorer simplement ce bug (IE6 vit ses dernières heures, et IE7 propose par défaut un zoom de la page plutôt que du texte...), soit le régler en utilisant un font-size en pourcentages sur l'élément HTML ou BODY.
- Mis à part ce bug (et éventuellement certains bugs ou comportement surprenants des navigateurs mobiles), utiliser em ou % pour font-size donne des résultats identiques.

Webdesign: font-size:100% c'est bien
- Je conseille pour ma part de définir la taille de texte de base non pas à 10px (via un font-size:62.5%), mais plutôt à... 100%. Pas pour des raisons techniques, mais plutôt pour des raisons de design (article en anglais).

Quelle unité? px ou em/%, au choix
- Si le but est d'obtenir des tailles de texte précises en pixels (tel titre en 18px, tel texte en 14px, tel libellé en 12px...), je recommande fortement d'utiliser les pixels. Les défauts d'accessibilité de l'unité px, soulignés tout au long des années 2000 à cause d'un choix des développeurs d'Internet Explorer, sont à relativiser fortement. Si on n'a pas d'impératif de labellisation Accessiweb par exemple, j'estime qu'on peut utiliser l'unité px l'esprit tranquille.
- Si le but est d'obtenir une hiérarchie de tailles de texte relatives, en prenant comme base la taille de texte de base du navigateur (16px par défaut sur les navigateurs desktop, peut être différente si l'utilisateur a configuré son navigateur autrement... et peut être différente aussi sur certains navigateurs mobiles), alors je recommande d'utiliser des pourcentages ou EM.
- Pour finir, j'aimerais pour ma part pouvoir utiliser l'unité pt (ou mm ou toute autre unité absolue), mais cette unité n'est pas supportée correctement par les navigateurs et les systèmes d'exploitation. Les bons élèves en la matière sont Linux et Firefox. Les mauvais élèves sont Windows, OS X, Internet Explorer, Safari et Chrome. (Pas vérifié pour Opera.)

Bonjour,

Merci à vous !

a écrit :

Webdesign: font-size:100% c'est bien
- Je conseille pour ma part de définir la taille de texte de base non pas à 10px (via un font-size:62.5%), mais plutôt à... 100%. Pas pour des raisons techniques, mais plutôt pour des raisons de design (article en anglais).

C'est là ou je suis un peu troublé, effectivement il n'y a rien à redire c'est facile, agréable, cela laisse le choix aux visiteurs.

Par contre ca limite considérablement les possibilités graphiques comment faire une icone, ou un background pour un <Hn> (par exemple) qui soit proportionnel ?

Dans le cas ou je fixe une taille en pixel pour coller à une volonté de cohérence graphique, je me retrouve donc dans l'obligation d'utiliser le pixel partout, ce qui ne répond plus à des normes d’accessibilité.

Peut être manque t-il un media queries niveau CSS qui détecterait si l'utilisateur a modifier sa taille par défaut. Ce qui ne serait pas simple à gérer pour la confidentialité, car ce marqueur pourrait devenir un critère de discrimination. Ou peut être que SVG (en 2020 quand ie8 aura disparu) pourrait fournir à terme un moyen d'adapter un icone ou un background.

rs459 a écrit :
Dans le cas ou je fixe une taille en pixel pour coller à une volonté de cohérence graphique, je me retrouve donc dans l'obligation d'utiliser le pixel partout, ce qui ne répond plus à des normes d’accessibilité.

Certains référentiels d'accessibilité continuent à interdire l'utilisation de px pour les fontes. Mais c'est une interprétation particulière et contestable.

Je maintiens:
- Si on vise des tailles précises en pixels, utiliser px.
- Autrement, travailler avec des tailles proportionnelles (% ou em).

Mais j'avoue ne pas comprendre le problème que tu soulèves. Mettons que tu as du texte en 16px (défini tel quel ou en font-size:100%) et des icones de 20px de haut, les deux ensemble donnant une harmonie visuelle particulièrement bandante. Bon. Partant de là, imaginons que:
1. L'utilisateur a défini une taille par défaut à 20px plutôt que 16px, ce qui casse un peu notre harmonie visuelle. Diantre.
2. L'utilisateur choisit un zoom texte seulement (plutôt que le zoom global par défaut dans tous les navigateurs actuels), et agrandit le texte à 20px ou 25px ou autre taille, ce qui casse encore notre harmonie visuelle. Fichtre.
J'ai un peu envie de dire qu'on s'en fout. Le lâcher-prise, bordel!

C'est l’obsession du pixel près qui semble une utopie totale dans le monde de l'intégration.

Pour les mm , sur un CSS Print le rendu est bon ou c'est tout aussi approximatif ?
Modifié par rs459 (13 Mar 2011 - 18:11)

rs459 a écrit :
Pour les mm , sur un CSS Print le rendu est bon ou c'est tout aussi approximatif ?

J'ai eu des résultats avec près de 10% d'erreur sur un poste (5cm donnaient 4.5cm imprimés), il faudrait que je teste sur d'autres configurations. Dans le doute je dirais que c'est approximatif aussi.