Taille des fontes.

Version imprimable

04/11/2009, 18h33
defacta

Taille des fontes.

Salut,

Je fais des tests de fontes et apparemment sa taille dépend vraiment de la résolution de l'écran.

Par exemple, chez moi je suis avec un mac book pro et avec sa résolution (1 440 x 900) je dois mettre les fontes comme ceci:

Code:

<font style="font-family:'Myriad pro'; font-size : 0.9em; ">

Par contre, lorsque je regarde le résultat avec un écran 15 pouces et une résolution 1024x768 cela fait énorme et vraiment pas joli, et dans ce cas la fonte à la bonne est comme ceci:

Code:

<font style="font-family:'Myriad pro'; font-size : 0.7em; ">

Par contre 0.7em pour ceux qui ont une bonne résolution, c'est illisible !

Comment je peux faire, fixer les fontes en fonction de la résolution écran ?

Merci,
Vincent.
04/11/2009, 19h28
laurentSc

Bonjour,

si ça t'intéresse, j'ai un code javascript qui permet de lire la résolution de l'écran de l'utilisateur, et ensuite, tu peux fixer la fonte via un switch en PHP.
04/11/2009, 20h09
defacta

oui ca m'interesse ;-) et je fixerai la taille des fontes dynamiquement en javascript.

Sinon, y a qqn qui a déjà eu ce pb pour savoir comment il s'en ait débrouillé ?

Merci,
Vincent.
04/11/2009, 21h48
kaiser59

Salut,

Il est normal que la taille de tes fonts dépendent de la résolution car dans ton exemple tu utilises "em" en unité de mesure, sache que 1em = 100% (je ne sais plus par rapport à quoi) donc variable selon la résolution. Pour les unités fixes, il te faut utiliser le "px" par exemple.

A toi de voir ce que tu souhaites utilisé, pour ma part j'utilise le em qui est plus pratique que le px car 12px semblera raisonnable sous du 1024 mais très petit sur du 1920 contraire à l'em qui est proportionnel

Voilà en fait ce que je fait : j'appelle d'abord la fonction html suivante :
Code:

1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> window.location='index.php?w='+screen.width+'&h='+screen.height; </script> </head> <body> <br> </body> </html>
puis dans index.php (qui contient ma page (même si à part ça, il n'y a que du code html)), je mets le code suivant :
Code:

1 2 3 4 <?php $client_screen_width=$_GET['w']; $client_screen_height=$_GET['h']; switch ($client_screen_width) { case 1280 : $image="banniere1280"; break; case 1024 : $image="banniere1024"; break; case 800 : $image="banniere800"; break;default : $image="banniere1024"; break; } $bandeau="../_frame/".$image.".jpeg"; ?>
Et un peu plus loin :
Code:

1 2 <img alt="bannière" src="<?php echo $bandeau; ?>" border="0">
Ca me sert à afficher un bandeau dont la largeur dépend de la résolution de l'écran : pas trop grande pour ne pas faire apparaître d'ascenseur horizontal, et pas trop petite pour les fortes résolutions (le case default est important pour les cas batards). A toi de l'adapter selon ton propre besoin.

04/11/2009, 23h44
slack457
Merci Laurent, c'est sympa de ta part de partager ce bout de code très utile !

Mais Kaiser, je ne comprend pas comment tu fais. Comme tu le dis, utiliser "em" semble être une très bonne idée, on a qu'à mettre quelque chose comme :
Code:

1 2 3 4 5 6  body { font-size: 0.9em; }
et on pourrait penser que la taille de la police s'adapterait en fonction de la résolution, pour au final, avoir une taille fixe chez tout le monde.
Mais pour Defacta, ça ne semble pas fonctionner...
05/11/2009, 11h42
defacta

Bonjour à tous,

Regardez, voici la page:
http://www.elizanet.com/#/picbook/1/2/1
(C'est en dev et cela ne marche pas avec IE, par contre tous les autres nav son OK, comme d'hab !)

Je pense que je vais faire comme LaurentSc, quelque chose en javascript pour modifier la taille des fontes en fonction de la résolution et l'image aussi est trop grosse pour une résolution de 1024...

Le texte est affiché dans plusieurs résolution, dites-moi ce que vous en pensez.

Merci pour vos réponses,
Vincent.
05/11/2009, 13h37
Ethyde

Bonjour,

deux liens sur le sujet :

http://www.alistapart.com/articles/howtosizetextincss
05/11/2009, 13h39
kaiser59

En regardant ton code et ce que tu as mis au début, je n'avais pas fait attention que tu étais sur Mac.

Alors, comme pour Windows certaines font sont propriétaire et ne sont donc pas forcement utilisés sur tous les pc (ubuntu, leopard etc...) du coup si tu mets du times qui me semble n'existe pas sur Ubuntu, ta font ne sera pas prise en charge, mais seulement celle de substitiution si tu en mets d'autre par exemple :

Code:

p {font-family : 'Times New Roman', Arial, Helvetica;}

Si le navigateur ne trouve pas la font en question alors il mettra celle qui lui est attribué par défaut dans les options.

Pour en arriver dans ton cas, à ma connaissance :lol: "Myriad" ne figure pas dans les polices de Windows et si tu ne mets rien d'autre alors pour ma part se sera du Times.

Ensuite dans ton code faudrait penser à mettre un DOCTYPE pour harmoniser au maximum le rendu sur tous les navigateurs ;) ce qui explique probablement ce problème de font. et faire en sorte qu'il soit valide W3C. Et corriger les erreurs qui sont nombreuses par exemple, la balise title doit se trouver à l'intérieur du head.
05/11/2009, 14h01
defacta

Citation:

Envoyé par kaiser59

En regardant ton code et ce que tu as mis au début, je n'avais pas fait attention que tu étais sur Mac.

Alors, comme pour Windows certaines font sont propriétaire et ne sont donc pas forcement utilisés sur tous les pc (ubuntu, leopard etc...) du coup si tu mets du times qui me semble n'existe pas sur Ubuntu, ta font ne sera pas prise en charge, mais seulement celle de substitiution si tu en mets d'autre par exemple :

Code:

p {font-family : 'Times New Roman', Arial, Helvetica;}

Si le navigateur ne trouve pas la font en question alors il mettra celle qui lui est attribué par défaut dans les options.

Pour en arriver dans ton cas, qui est qu'à ma connaissance :lol: Myriad ne figure pas dans les police de Windows et si tu ne mets rien d'autre alors pour ma part se sera du Times.

Ensuite dans ton code faudrait penser à mettre un DOCTYPE pour harmoniser au maximum le rendu sur tous les navigateurs ;) ce qui explique probablement ce problème de font. et faire en sorte qu'il soit valide W3C.

Quelle jolie fonte je peux utiliser ?
Une infographiste m'a conseillé Myriad...et c'est vrai que j'ai toujours trouvé le resultat beaucoup plus joli sous Mac que sous Windows. :roll:

Times, je trouve ça trop standard, non, et Myriad Pro est vraiment sympa pour lire du texte, à mon goût.

Pour le DOCTYPE j'avais essayé de le préciser mais là où ca marchait avec Firefox, Opera, Safari et Chrome j'ai commencé à avoir des différences d'affichage avec tous ces nav...
Sans préciser de DOCTYPE il n'y a que IE pour lequel il va me falloir bosser.

Sur ce, let's go to work ;-)

Vincent.
05/11/2009, 14h17
Ethyde
Citation:

Envoyé par defacta

Quelle jolie fonte je peux utiliser ?
Une infographiste m'a conseillé Myriad...et c'est vrai que j'ai toujours trouvé le resultat beaucoup plus joli sous Mac que sous Windows. :roll:

Times, je trouve ça trop standard, non, et Myriad Pro est vraiment sympa pour lire du texte, à mon goût.

Au niveau des police utilisable sur le net un petit tableau de correspondance : http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Citation:

Envoyé par defacta

Pour le DOCTYPE j'avais essayé de le préciser mais là où ca marchait avec Firefox, Opera, Safari et Chrome j'ai commencé à avoir des différences d'affichage avec tous ces nav...
Sans préciser de DOCTYPE il n'y a que IE pour lequel il va me falloir bosser.

Sur ce, let's go to work ;-)

Vincent.

Sans doctype ne viens pas t'étonner que ton site parte en vrac sous IE, et si en l'ajoutant il se déforme de partout c'est que ton dev n'est pas conforme au standard de faite et même si il est bien afficher chez toi tu ne peu pas le garantir chez les autres.

L'usage d'un reset css même le plus simple qui sois :
Code:

1 2 3 4 5 * { margin:0; padding:0; }
pourrais aider.

Je ne vois pas vraiment l'intérêt de ta feuille de style, étant donnée que la majeur partie de tes styles css sont "embarqué" dans le document html...
05/11/2009, 14h22
kaiser59

Je sais que c'est plus joli sur Mac je m'en suis rendu compte aussi par l'intérmediaire d'ancien collègue qui étaient sous Mac ;)

Mais comme je leur ai dit, si c'est super beau combien de personnes le verront réellement si 95% (j'en abuse peut être dans le pourcentage...) des utilisateurs sont sous Windows avec un écran non Apple où est l'intérêt ? Mais je ne dis pas qu'il faut arrêter pour autant :ccool:

C'est normal que sous les différents navigateurs cela apparait "bancale" car ton code à l'origine n'est pas bon.
C'est comme si tu avais une voiture avec des roues perpendiculaires (ton code) sur une autoroute non balisée (les navigateurs) et lorsque tu ajoutes le DOCTYPE, le balisage apparait (harmonisation des navigateurs) mais tes roues restent perpendiculaire, à ton avis comment faire pour qu'elle roule droit devant ta voiture ? :mrgreen:
05/11/2009, 18h27
Ethyde

Citation:

Envoyé par kaiser59

Je sais que c'est plus joli sur Mac je m'en suis rendu compte aussi par l'intérmediaire d'ancien collègue qui étaient sous Mac ;)

Mais comme je leur ai dit, si c'est super beau combien de personnes le verront réellement si 95% (j'en abuse peut être dans le pourcentage...) des utilisateurs sont sous Windows avec un écran non Apple où est l'intérêt ? Mais je ne dis pas qu'il faut arrêter pour autant :ccool:

La "beauté" d'une police est en grande partie le fait de l'anti-aliasing, présent ou pas et activé, ou pas suivant le type de poste et le navigateur utilisé.

Un article assez complet sur le sujet viens de sortir : http://www.smashingmagazine.com/2009...anti-aliasing/

Bonne lecture :)

[EDIT]
Ajout de la liste des polices installer par défaut sur les systèmes d'exploitation : http://www.apaddedcell.com/web-fonts
05/11/2009, 21h05
defacta

Regardez, la preuve par l'image:
http://boxfly.free.fr/test/screenshot-font-elizanet.JPG

C'est une screenshot de firefox en mode plein écran sur un 15 pouce avec une resolution de 1024x768.
Les fontes en 0.9em sont vraiment trop grosses, les fontes en 0.8em sont bien et les fontes en 0.7em seraient à mon avis les mieux pour cette résolution mais aussi en prenant en compte que c'est un 15 pouces...

Alors que sous mon mac qui a une grosse résolution, le 0.7em n'est pas lisible !

La solution passe à mon avis par la taille des fontes en fonction de la résolution, vous en pensez quoi ?

Il me faudrait voir ce que cela donne sur un 13 pouces qui serait en 1024x768, non ?

Merci,
Vincent.
05/11/2009, 22h18
kaiser59

Citation:

Envoyé par Ethyde

La "beauté" d'une police est en grande partie le fait de l'anti-aliasing, présent ou pas et activé, ou pas suivant le type de poste et le navigateur utilisé.

Un article assez complet sur le sujet viens de sortir : http://www.smashingmagazine.com/2009...anti-aliasing/

Bonne lecture :)

[EDIT]
Ajout de la liste des polices installer par défaut sur les systèmes d'exploitation : http://www.apaddedcell.com/web-fonts

Ethyde :cry: j'ai pas trop compris ton message tu veux m'expliquer quoi ??
La particularité des écrans Mac est d'avoir un rendu de l'éclat des couleurs beaucoup plus jolie et c'est de ça dont je fais allusion en disant que c'est plus beau sur Mac que sur Windows ce n'est pas uniquement dans la font si c'est ce que tu veux me dire...

Defacta, en général, j'essaye d'utiliser le plus souvent .85em en taille qui rend raisonnable mais, le problème est de savoir si tes autres polices (hormis Myriade) sont similaires au niveau rapport hauteur/grasse sinon tu risques de te trouver avec quelque chose d'assez moche...
06/11/2009, 00h25
defacta

Citation:

Envoyé par kaiser59

Ethyde :cry: j'ai pas trop compris ton message tu veux m'expliquer quoi ??

Defacta, en général, j'essaye d'utiliser le plus souvent .85em en taille qui rend raisonnable mais, le problème est de savoir si tes autres polices (hormis Myriade) sont similaires au niveau rapport hauteur/grasse sinon tu risques de te trouver avec quelque chose d'assez moche...

Voici le résultat sous mon mac:
http://boxfly.free.fr/test/screensho...izanet-mac.png
Elles sont quand même jolies ces fontes sous Mac... ;)

Vous en pensez quoi, je devrais tout mettre en 0.80em ou en 0.85em ou faire du javascript pour définir la taille des fontes en fonction de la résolution ?
J'espère que vous ne trouvez pas que je pinaille trop... ;)

Merci,
Vincent.
06/11/2009, 11h51
kaiser59

2 pièce(s) jointe(s)

Essaye .75em, sa pourrait le faire, car .7 un peu petit et .8 un peu épais, sinon as-tu essayer ceci :

Code:

p {font-size:.8em;font-weight:normal;}

Voici le rendu que j'ai moi :
Pièce jointe 55009

Et comme je te l'avais dit avec le code pas très bien écrit regarde ce que ça donne sous IE6 :
Pièce jointe 55010
06/11/2009, 11h54
surfsilver

Salut,

Comme dis précédemment par je ne sais plus qui, j'opterai pour une solution
Javascript mais, sans utilisation de PHP ou autre langage serveur.

1°. Tu récupères la résolution de l'utilisateur ;
2°. Ta fonction javascript renvoi directement l'argument fontSize adéquate.

Pourquoi j'évite PHP simplement pour ne pas avoir un rechargement inutile du
au fait que javascript est coté client et PHP coté serveur.

Par contre, dans tout les cas si le client désactive Javascript rare mais sa
peu arriver alors la fonction sera inopérante.

Perso, je travail avec le couple pixel-pourcentage qui me convient
parfaitement.

Après le mieux serai de laisser les visiteur utiliser leur propre police.

Cordialement.

Fuseau horaire GMT +2. Il est actuellement 12h29.