[Résolu] Typographie

Bonjour à tous,
J'ai une question concernant la typographie, afin de le rendre accessible mon site.
Je me suis donc lancé dans la conversion de mes unités de mesure en rem (et em pour les vieux navigateurs) mais j'ai quelques difficultés à appréhender un point.

Je vois souvent ceci :

body{
// pour une police à 16px : 62.5% correspond à 1em = 10px
font-size :62.5%; /*fixe bug pour ie 6 et 7 */ 
}

Je comprends la logique:

Avec un écran 72dpi :

1 pt = 1/72 pouce = 1px

Or sur un pc, il y a 96 dpi donc :

96 x (1/72) = 1.33px
La police standard est de 12pt donc 1.33 x 12 = 16px
Cela donne bien (10 / 16) x 100 = 62,5%

Mais sur MAC ou Linux la taille et de 72dpi et 62.5% de 12px ça donne une taille assez faible (7.5px). ça rend donc le site illisible

Ma question est donc la suivante :

Qu'elle est la bonne manière de fixer le problème?

J'ai pensé à fixer la taille en px dans le body, mais cela casse l'accessibilité pour les anciens IE.
Donc j'attends vos retours d'expériences.

Merci d'avance de vos réponses
Modifié par semantic (15 May 2014 - 15:00)

Pour les anciens IE, il y a les commentaires conditionnels , opportun pour ce cas de figure

Les commentaires conditionnels règlent le problème pour un navigateur, mais pas pour les systèmes d'exploitations différents.
C'est ça qui me chagrine.
Les 62.5% repose sur l'idée que les utilisateurs ont une résolution de 96dpi (pc standard) avec une taille de police standard à 12pt (16px). ça fait beaucoup de suppositions
Les internautes naviguent sur beaucoup de machines différentes et avec des résolutions différentes.

Qui a dit que le web était simple ?
Modifié par semantic (15 May 2014 - 15:20)

Pour t'enlever une épine du pied, les écrans des premiers Mac étaient en 72 DPI parce Steve Jobs, fana de typographie, voulait faire correspondre un pixel à un point. ils sont passés à la résolution 96 DPI depuis beau temps. Idem pour Linux. À ma connaissance, un changement d'OS n'entraine pas un changement de résolution de l'écran.

À titre personnel je suis un adepte des em partout, dès le body. Jamais de px, de % ni de rem.

Ainsi ton site n’est plus du tout dépendant du navigateur, de l’écran ou de l’OS puisqu’il suffira d’agrandir ou réduire (ctrl + et ctrl -) pour que tout reste bien proportionné, mais à une échelle différente.

Bonux : ça prend aussi en compte les préférences des utilisateurs (si ils ont modifié le corps minimum dans leur navigateur pour mettre 24pt au lieu de 16, par exemple).

En revanche je sais que ça peut s’avérer très compliqué à gérer dans de nombreux projets, et il faut maîtriser le contexte (font-size défini sur un parent), et donc l’héritage, et donc la cascade. Et il faut être un jedi du produit en croix, aussi

semantic a écrit :

Avec un écran 72dpi :

1 pt = 1/72 pouce = 1px

Or sur un pc, il y a 96 dpi donc :

96 x (1/72) = 1.33px
La police standard est de 12pt donc 1.33 x 12 = 16px
Cela donne bien (10 / 16) x 100 = 62,5%

Bonjour,

En fait la logique est bien plus simple que cela et ne dépend pas de la résolution.

La "root font size" (la taille de police de base) appliquée par l'immense majorité des navigateurs est de "16px".
En clair, pour la plupart des navigateurs, "1em" vaut "16px" en valeur calculée.

Or 62.5% de "16px", ça fait tout simplement "10px", ... et ça facilite énormément les calculs par la suite :
exemple : je souhaite que mon titre ait une taille équivalente à 24px tout en restant fluide ? facile, j'écris h1 {font-size: 2.4rem} (ou em)

EDIT : pour tester la RFS : http://lab.gasteroprod.com/rfs/
Modifié par Raphael (15 May 2014 - 16:30)

Merci beaucoup pour vos réponses claires et précises.
ça me rassure sur l'utilisation de cette technique.
C'est effectivement plus simple de se baser sur 1em = 10px
Encore merci