Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage PHP Font-size

Font-size

33 réponses
Avatar
Pascale
Bonjour,

Je vais probablement poser une question basique, mais je me questionne sur
la façon de préciser la taille des polices de caractères. Habituellement,
j'utilise tout bêtement medium, small, large, x-small, etc.
Je reconnais que c'est un choix que j'ai fait de manière un peu
pifométrique, disons que ça me paraissait simple pour moi. Mais est-ce le
plus pertinent ?
Je sais qu'on peut exprimer la taille des caractères en px, en pt, em,
100%... o'scours ! (:
Le site http://www.w3schools.com/css/css_font.asp conseille d'utiliser une
combinaison de 100% (commencer la css par html {font-size: 100%;}, je
le fais déjà) et de em.
Je ne suis pas très enthousiaste à l'idée de spécifier mes tailles de
polices en em, car je ne sais pas du tout comment l'utilisateur a paramétré
son navigateur (ou plutôt, comme le navigateur est réglé par défaut...) et
j'ai peur des surprises au niveau du rendu. Déjà que je suis loin d'être
doué en design, si en plus je base la taille des polices sur un critère que
je ne maîtrise pas, j'ai très peur du résultat.
Qu'en pensez-vous ? que me conseillez-vous ?

--
Pascale
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3 4
Avatar
Williamhoustra
"Denis Beauregard" a
écrit dans le message de news:
Le Wed, 30 Jun 2010 19:05:40 +0200, "Williamhoustra"
écrivait dans
fr.comp.infosystemes.www.auteurs:

Je code en dur et en pixels. Idem pour la page qui est calculée pour
une
résolution 1024x768. Ce qui est le minimum syndical. Ceux qui râlent avec
des antiquités qui fonctionnent au-dessous n'ont qu'à économiser 3 sous
pour
changer de moniteur (fautpadéc ! on trouve des écrans full HD, donc
1920x1080, pour moins de 150 roros). Au moins je suis sûr que ça passe
correctement sur tous les navigateurs et sur tous les systèmes. A voir sur
http://wmarie.free.fr.



Alors, c'est vrai ? Il y a bien un complot mondial pour que
l'informatique soit encore plus polluante et que les machines un
peu anciennes ne pouvant plus servir, les services de recyclage
étant rarissimes, alors on jette aux ordures des tonnes de métaux
lourds qui en s'accumulant rendront la vie difficile à la prochaine
génération...



Ta, ta, ta ! Des vieux moniteurs ça se recycle. Et puis les vieux
moniteurs ça consomme une énergie pas possible (tu veux plus de centrales
nucléaires ?), ça chauffe (pas très utile en ce moment), ça prend une
mégachiée de place et c'est en format 4/3. Il n'y a que le serveur qui
conserve un vieux Iiyama CRT, mais comme il est presque toujours éteint...

Denis, avec son écran large, mais 12 applications ouvertes en même
temps



Justement ! Les écrans 16/9e issu du cinéma sont épatant en informatique
! J'ai mon Money ouvert dans le coin gauche, le site de ma banque à droite
et je peux comparer les deux. Idem pour toutes sortes d'applis (Visual
Studio, Photoshop) où, si je laissais de la place aux outils, la place
centrale était riquiqui.

En complément il y a un petit freeware épatant (pour les windowiens)
Dexpot pour les bureaux virtuels. J'ai été très déçu par celui fourni avec
Ubuntu qui fait peine à voir en comparaison. Mais il en existe peut-être un
ailleurs...
Avatar
SAM
Le 7/1/10 2:04 PM, Williamhoustra a écrit :
Le Wed, 30 Jun 2010 19:05:40 +0200, "Williamhoustra"
écrivait dans
fr.comp.infosystemes.www.auteurs:

Je code en dur et en pixels. Idem pour la page qui est calculée pour
une résolution 1024x768.
Ce qui est le minimum syndical. Ceux qui râlent avec
des antiquités qui fonctionnent au-dessous n'ont qu'à économiser
3 sous pour changer de moniteur (fautpadéc !)
Au moins je suis sûr que ça passe correctement sur tous navigateurs
et sur tous les systèmes.







Y compris les smartphones c'est bien ça ?

A voir sur http://wmarie.free.fr.





Justement ! Les écrans 16/9e issu du cinéma sont épatant en informatique
! J'ai mon Money ouvert dans le coin gauche, le site de ma banque à droite
et je peux comparer les deux. Idem pour toutes sortes d'applis (Visual
Studio, Photoshop)



Mézalors ...
- pourquoi imposes-tu un format minimum d'affichage de ton site ?
- c'est en complète contradiction avec ta méthode d'utilisation
de ton écran

En complément il y a un petit freeware épatant (pour les windowiens)



Bof ... les bureaux virtuels ce n'est pas nouveau (j'en avais sur mon
Atari) ça existe en freeware aussi pour Mac, et même, de nos jours,
c'est livré avec le système d'Apple (ça s'appelle Space et je ne trouve
pas ça pratique).

Dexpot pour les bureaux virtuels. J'ai été très déçu par celui fourni avec
Ubuntu qui fait peine à voir en comparaison. Mais il en existe peut-être un
ailleurs...



--
sm
Avatar
Dominique Ottello
docanski écrivait :

Les "webmestres" n'ont toujours pas compris cela.
Mébon, ont-ils compris que le Web n'est pas une vitrine bling-bling mais
un outil d'informations où l'économie des moyens est *au service* de
l'utilisateur et non pas à ceux qui se la pètent ?


Mon site est très visible avec écran 800x600 et - mais ce n'est que mon
avis - beaucoup plus lisible qu'avec une largeur => 1280 où je trouve
qu'on se perd dans les retours à la ligne.
De la même manière que les news ;-)
--
Il vaut mieux ignorer où l'on est, et savoir qu'on l'ignore, que de se
croire avec confiance où l'on n'est pas. Jean Dominique Cassini.
Technologie aéronautique - http://ottello.net - Les anciens de Vilgénis
Avatar
Pascale
SAM écrivait
news:4c2bf563$0$2992$:

Non.
C'est toujours dépendant de la taille définie par défaut ou par
l'utilisateur.

Si j'ai choisi : police de base = Geneva en 14px

ça va afficher en geneva s'il n'est pas précisé de font-family
ou en la première police que j'ai dans le listing de font-family
et toujours en 14px (ou plus : H1, H2, etc) si la taille n'est pas
précisée

h1, p { font-size: 0.8em; }
m'affichera alors qque chose voisin de 11px pour le P comme pour le H1

h1, p { font-size: 0.5em; } ou { font-size: 8px }
m'affichera en 10px car j'ai demandé à mon navigateur de ne pas
afficher à moins.



Merci pour l'explication détaillée. En fait, je me suis mal exprimée : je
disais « préciser finement », mais c'était maladroit de ma part ; j'ai bien
compris qu'il ne s'agit surtout pas de fixer « en dur » la taille de
l'affichage, mais de l'exprimer en se référant au paramétrage du navigateur
de l'utilisateur. Ce que je voulais dire, c'est que jusqu'à présent, je ne
me casse pas la tête avec des réglages très fins et que je me borne à
utiliser small, medium, etc.

Mais fondamentalement, est-elle différente des notions de medium,
small, large, etc ?



L'un n'empêche pas l'autre.

La police de base est réglée en em(*) (ou pas du tout)
et après on la smallise, stronguise, largisse, à sa "ciétée".
À l'exception de 'small' qui ne pourra rétrécir en-dessous de ce
qu'aura choisi l'utilisateur pour la taille minimale.

(*) 1em ou 100% = la même chose kikif
c a d la taille de police par défaut du navigateur
ou la taille choisie par l'utilisateur
font-size: 1.2em; ou font-size: 120%;
ne va pas donner la même chose dans mon Fx que dans mon Safari, par
exemple



Bon ben finalement, malgré mes deux neurones qui fondent à cause de la
chaleur, je crois que j'ai enfin compris et que je ne me suis pas trop
plantée jusque là. (:

grosso-modo :
1em = taille moyenne(*) du caractère (dans la police choisie) à la
taille définie par défaut ou par préférence de l'utilisateur

(*) presque chaque caractère a une taille différente du voisin
(sauf pour les polices à empattement fixe,
courier, Andale Mono, ...)
de mémoire (et je me trompe surement) c'est le x la référence



Jusque là, ça va...

Bon, et on n'est pas sorti de l'auberge ...
il y a aussi "font-size-adjust" ! !
<http://www.yoyodesign.org/doc/w3c/css2/fonts.html#propdef-font-size-ad
just>

et puis aussi @font-face { }
<http://www.yoyodesign.org/doc/w3c/css2/fonts.html#font-descriptions>

savoir ce qu'en font les navigateurs (et les systèmes) ?



Je suis pas sûre de vouloir savoir...

je préfère que les pavés de texte ne dépassent pas 700px de large
(sinon je souis perdou au changement de ligne)



Sûr que les lignes interminables, c'est pas terrible non plus, mais si le
design est élastique, on peut toujours rétrécir la fenêtre et donc le
texte.
Moi j'aime pas les sites qui ont l'air d'avoir été conçus pour un écran de
téléphone portable, même si je ne travaille pas en plein écran.

Ha! je ne suis pas seul à ne plus supporter ça.



C'est sûr. Le Flash à toutes les sauces, beurk. Le truc qui énerve :
l'animation interminable qu'on ne peut pas abréger. Le truc qui énerve
encoe plus : le bouton « passer l'introduction » qui ne marche pas.

--
Pascale
Avatar
Williamhoustra
"SAM" a écrit dans le message
de news: 4c2c9936$0$27592$

Y compris les smartphones c'est bien ça ?



Les smartphones et autres téléphones portables ce n'est pas de
l'informatique. On ne peut pas y visualiser des applications "normales" dont
un site Web normalement foutu. En plus des problèmes de vitesse de
chargement. Je n'ai donc aucune raison de faire des prouesses de
dispositions élastiques, toujours au détriment de fonctionalités autres et
de fiabilité de l'ensemble. De plus sur le mien je me suis évertué à
présenter des photos de bonne qualité, pas envie (et aucun intérêt) d'en
faire des timbres poste. Pour ce genre d'ustensile à tout faire (et à le
faire mal) c'est et ça doit rester en mode texte ammélioré (comme le site de
Google).
Avatar
SAM
Le 7/2/10 9:09 AM, Williamhoustra a écrit :
"SAM" a écrit dans le message
de news: 4c2c9936$0$27592$
Y compris les smartphones c'est bien ça ?



Les smartphones et autres téléphones portables ce n'est pas de
l'informatique. On ne peut pas y visualiser des applications "normales" dont
un site Web normalement foutu.



c'est mal connaitre l'offre de ce genre d'ustensile,
tous ne sont pas des jouets
(comme le mien, au moins à ce niveau (internet) par exemple)
Fais-toi prêter un aillephone pas trop mal nourri, tu seras ébahi de ce
que ce genre de "gadget" peut faire dans le registre de ce que tu
sembles considérer comme "l'Informatique" et ses "Applications".

En plus des problèmes de vitesse de chargement.



Ces trucs, si pas trop jouets, peuvent se connecter en wifi,
la vitesse est la même que sur ton bourin.
(même avec mon jouet non wifi je n'ai pas constaté un notable
ralentissement comparativement à mon mauvais ADSL, le plus long est de
se débattre avec les menus, de taper les url (vrai calvaire !))

Je n'ai donc aucune raison de faire des prouesses de
dispositions élastiques, toujours au détriment de fonctionalités autres et
de fiabilité de l'ensemble.



Nota : on peut avoir :
- meta special smartphone
- css speciale smarphone

De plus sur le mien je me suis évertué à
présenter des photos de bonne qualité, pas envie (et aucun intérêt) d'en
faire des timbres poste.



Mal connaissance des smartphones, du navigateur Opera-mini etc.
Je ne pense pas que ton site soit entièrement constitué de photos, non?

Pour ce genre d'ustensile à tout faire (et à le faire mal)



Faux ! ça le fait très bien
(même sur mon jouet)
(je ne suis pas allé sur cDiscount ou ebay, faut avouer)

c'est et ça doit rester en mode texte ammélioré (comme le site de
Google).



C'est mieux et :
- Opera-mini le fait +/- de lui-même
- une css déié peut corriger le tir

M'enfin ... ce n'était que pour éventualiser un usage extrême,
comme exemple de ce que tout le monde n'apprécie pas les affichages fixes.

PS:
malheureusement nombreux (presque tous ?) sont les sites "pro" qui ne
supportent pas l'affichage petite largeur
(Apple: 996, M$: 950, Linux: 880, etc. ...)
À vouloir tout afficher sur la même page,
ne surtout pas rater d'info (inutile?) à communiquer,
ne pas oublier les pubs, annonces, promos, nouveautés,
faut d'la place, hein ?
Quitte à ce que l'utilisateur ne regarde + la page et n'y clique que par
réflex qu'à un seul endroit.
--
sm
Avatar
Mickaël Wolff
Le 30/06/2010 18:05, Williamhoustra a écrit :

Je code en dur et en pixels. Idem pour la page qui est calculée pour une
résolution 1024x768. Ce qui est le minimum syndical.



Quelle outrecuidance que de s'arroger tant de place sur mon écran.
C'est véritablement pénible ces pseudo-créateurs qui veulent imposer
leurs choix à la populace pour les éduquer.


Ceux qui râlent avec des antiquités qui fonctionnent au-dessous



Est-ce qu'un écran 768×1024 est en-dessous ? Sur le Web, être
en-dessous n'a pas de signification. Nous créons des sites et
applications qui exploite le canvas accordé par nos visiteurs. Faire
l'inverse est une erreur qui entraîne des désagrément à l'internaute.


n'ont qu'à économiser 3 sous pour
changer de moniteur (fautpadéc ! on trouve des écrans full HD, donc
1920x1080, pour moins de 150 roros).



C'est un mois de bouffe (frugal, certes), mais j'en connais (beaucoup
trop) qui vivent avec ça par mois pour bouffer (à deux). À noter
qu'aujourd'hui, pour trouver un boulot, faire ces démarches
administratives, conserver le lien social, un ordinateur est obligatoire
dans notre société. Donc on va oublier ton argument, que je peux
paraphraser ainsi : « S'ils n'ont pas assez d'argent pour bouffer,
qu'est-ce qu'ils viennent me faire chier avec leurs écrans pourris et
leur gadgets téléphoniques. Qu'ils arrêtent leur abonnement le temps
d'économiser pour un écran descend. »

Le web, c'est avant tout le partage de la connaissance.


Au moins je suis sûr que ça passe
correctement sur tous les navigateurs et sur tous les systèmes. A voir sur
http://wmarie.free.fr.



C'est là que tu fais une erreur. En imposant des tailles fixes, sans
respect pour le périphérique de rendu, ton site n'est lisible que sur un
sous-ensemble de systèmes et navigateur. Le problème est que tu réduis
l'informatique au sous-ensemble des micro-ordinateurs

--
Mickaël Wolff aka Lupus Michaelis
http://lupusmic.org
Avatar
Olivier Miakinen
Le 30/06/2010 19:05, Williamhoustra a écrit :

Je code en dur et en pixels. Idem pour la page qui est calculée pour une
résolution 1024x768. Ce qui est le minimum syndical. Ceux qui râlent avec
des antiquités qui fonctionnent au-dessous n'ont qu'à économiser 3 sous pour
changer de moniteur (fautpadéc ! on trouve des écrans full HD, donc
1920x1080, pour moins de 150 roros). Au moins je suis sûr que ça passe
correctement sur tous les navigateurs et sur tous les systèmes. A voir sur
http://wmarie.free.fr.



<cit.>
Pour la lecture optimale de ce site votre moniteur
doit être réglé sur une résolution égale ou supérieure à
1024x768
</cit.>

Mon moniteur est réglé sur la résolution 1680×1050. Il n'empêche que ta
page s'affiche avec un ascenseur horizontal rendant la lecture très
pénible, parce que bien sûr avec une telle résolution je n'accorde à mes
fenêtres que la moitié en largeur : des fenêtres de 800×1000 sont
largement suffisantes pour une lecture confortable, et ça me permet
d'avoir plusieurs fenêtres visibles simultanément.

Et même si tu m'offrais un écran réglable en 2400 pixels de large, je
continuerais à ouvrir les fenêtres en environ 800 de large (ça me
permettrait juste d'en avoir trois en même temps).

Cela étant dit, tu fais bien comme tu veux sur ton site puisque celui-ci
ne fait pas partie de ceux que j'ai envie de voir.

Cordialement,
--
Olivier Miakinen
Avatar
rm
Salut,
Le samedi 3 juillet 2010 à 22:42, Olivier Miakinen a écrit :
Le 30/06/2010 19:05, Williamhoustra a écrit :

Je code en dur et en pixels. Idem pour la page qui est calculée pour une
résolution 1024x768. Ce qui est le minimum syndical. Ceux qui râlent avec
des antiquités qui fonctionnent au-dessous n'ont qu'à économiser 3 sous pour
changer de moniteur (fautpadéc ! on trouve des écrans full HD, donc
1920x1080, pour moins de 150 roros). Au moins je suis sûr que ça passe
correctement sur tous les navigateurs et sur tous les systèmes. A voir sur
http://wmarie.free.fr.



<cit.>
Pour la lecture optimale de ce site votre moniteur
doit être réglé sur une résolution égale ou supérieure à
1024x768
</cit.>

Mon moniteur est réglé sur la résolution 1680×1050. Il n'empêche que ta
page s'affiche avec un ascenseur horizontal rendant la lecture très
pénible, parce que bien sûr avec une telle résolution je n'accorde à mes
fenêtres que la moitié en largeur : des fenêtres de 800×1000



Ici, le site de William s'affiche plutôt bien et sans barre de défilement
horizontale sur une petite fenêtre d'Opera redimensionnée en 640x480 :D
http://files.getwebb.org/view-cre66bpi.html
Et même en 170 pixels de large, ça reste lisible...
http://files.getwebb.org/view-cre66bph.html

@+
--
rm
Avatar
rm
Le vendredi 2 juillet 2010 à 09:09, Williamhoustra a écrit :

"SAM" a écrit dans le message
de news: 4c2c9936$0$27592$

Y compris les smartphones c'est bien ça ?



Les smartphones et autres téléphones portables ce n'est pas de
l'informatique. On ne peut pas y visualiser des applications "normales" dont
un site Web normalement foutu. En plus des problèmes de vitesse de
chargement. Je n'ai donc aucune raison de faire des prouesses de
dispositions élastiques, toujours au détriment de fonctionalités autres et
de fiabilité de l'ensemble. De plus sur le mien je me suis évertué à
présenter des photos de bonne qualité, pas envie (et aucun intérêt) d'en
faire des timbres poste. Pour ce genre d'ustensile à tout faire (et à le
faire mal) c'est et ça doit rester en mode texte ammélioré (comme le site de
Google).



Mais non, ton site s'affiche très bien et relativement rapidement en 3G,
sur Opera Mini par exemple (en mode Mobile View) ou Opera Mobile (en Mobile
view et Turbo activé). Tes zoulies photos sont pas mal présentées en plein
écran 800x480 sur mon HTC HD, mais évidemment en bas débit, je ne chargerai
en qualité maxi que les plus attirantes...

@+
--
rm
1 2 3 4