Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

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

10 réponses

1 2 3 4
Avatar
Pierre Goiffon
On 30/06/2010 15:07, Pascale wrote:
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 ?



La recommandation a un long passage sur les unités :
http://www.w3.org/TR/CSS21/syndata.html#length-units

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.



Mais medium, small etc dépendent aussi de la configuration du navigateur
non ?
Avatar
SAM
Le 6/30/10 3:07 PM, Pascale a écrit :
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.



c'est très bien, bon respect du visiteur et de l'Accessibilité

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.



Voilà.

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



De toutes façons, même si tu précises des PX (ou PT) ce sera quand même
au bon vouloir du visiteur (outre IE et ses réglages "plus petite" "plus
grande", tant Fx ou Safari, Opera, etc. permettent au visiteur de
choisir ses tailles de polices préférées, ou, en tous cas minimales)

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.



Si tu voyais le nombre de sites qui sont sont affichés chamboulés sur
mes configurations de navigateurs (pas les mêmes pour chacun) tu serais
effaré.
Et comme personnellement le "web design" me sort par les yeux ça ne fait
que me conforter dans cette opinion (où est passé le HTML ?), on en
vient parfois à tenter l'affichage sans css ni JS (le + souvent avec
encore plus de catastrophes, l'accessibilité étant le cadet des soucis
de tout ces sites bling bling aux bôs Flash-web-design dont les
webmasters ne savent même pas ce que "design" veut dire).

Qu'en pensez-vous ? que me conseillez-vous ?



Tout en "élastique"
(en em ou %, tant pour les caractères que les blocks)
à moins que ... tant pis ... ça ne se dégrade pas si mal.

ou alors ... des images pour les trucs "aux p'tits ognons"
(avec des ALT bien pensés)
et encore ... on peut toujours zoomer
donc ... à contrôler avant mise en ligne ?

La notion de "design"
<http://fr.wikipedia.org/wiki/Design>
où ils oublient dans leur définition d'intro le point essentiel
"économie de moyens"
De ttes façons le "web design" devrait commencer par se fixer ses règles
d'accessibilité avant de projeter les moyens minimaux à mettre en œuvre
pour répondre à un "dessin" de maquette et sa navigation associée.
Mébon ... comme il faut produire (bô de préférence) ... le "design" ce
sera pour une autre fois, et le html aussi :-(
(ce n'est pas le HTML.5 qui va inverser la tendance au bling bling).
--
sm
Avatar
Williamhoustra
"Pascale" <chaton.tigre+ a écrit dans le message de news:

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 ?



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.
Avatar
Pascale
Pierre Goiffon écrivait
news:4c2b4880$0$8065$:

La recommandation a un long passage sur les unités :
http://www.w3.org/TR/CSS21/syndata.html#length-units



Un peu compliqué pour moi, mais intéressant.

Mais medium, small etc dépendent aussi de la configuration du
navigateur non ?



Oui ! Mais je me demandais si je ne devais pas modifier mes habitudes pour
passer en « fixe » afin d'éviter les surprises. Là-dessus, je découvre des
recommandations qui me vantent la notion d'em (que je connaissais
superficiellement mais que j'avais soigneusement laissé tomber).
D'où mes questions (:

--
Pascale
Avatar
Pascale
SAM écrivait
news:4c2b69e4$0$27615$:

c'est très bien, bon respect du visiteur et de l'Accessibilité



Ouf (-:

Mais j'ai quand même du mal à cerner cette notion d'em : je comprends bien
qu'elle me permettrait de préciser finement la taille de tel ou tel type de
texte. Mais fondamentalement, est-elle différente des notions de medium,
small, large, etc ?
En lisant (et probablement malcomprenant) des docs à ce sujet, j'ai eu
l'impression de quelque chose de plus difficile à maîtriser et à cerner.

De toutes façons, même si tu précises des PX (ou PT) ce sera quand
même au bon vouloir du visiteur (outre IE et ses réglages "plus
petite" "plus grande", tant Fx ou Safari, Opera, etc. permettent au
visiteur de choisir ses tailles de polices préférées, ou, en tous cas
minimales)



Voire de désactiver les CSS (:

Si tu voyais le nombre de sites qui sont sont affichés chamboulés sur
mes configurations de navigateurs (pas les mêmes pour chacun) tu
serais effaré.



Longtemps, Opera a transformé en gloubiboulga un grand nombre de sites,
donc j'ai plus peur de rien(-:

Et comme personnellement le "web design" me sort par les yeux ça ne
fait que me conforter dans cette opinion (où est passé le HTML ?), on
en vient parfois à tenter l'affichage sans css ni JS (le + souvent
avec encore plus de catastrophes, l'accessibilité étant le cadet des
soucis de tout ces sites bling bling aux bôs Flash-web-design dont les
webmasters ne savent même pas ce que "design" veut dire).



Entièrement d'accord.

Tout en "élastique"
(en em ou %, tant pour les caractères que les blocks)
à moins que ... tant pis ... ça ne se dégrade pas si mal.



Ben finalement, c'est généralement ce que je fais. Il m'arrive par contre
d'utiliser des max-width en pixels afin d'éviter des distorsions trop
vilaines, mais je vois large : j'ai horreur des sites constitués d'une
étroite (et souvent interminable) colonne de texte, comme si les écrans
faisaient 400 pixels de large.

ou alors ... des images pour les trucs "aux p'tits ognons"
(avec des ALT bien pensés)
et encore ... on peut toujours zoomer
donc ... à contrôler avant mise en ligne ?



Je vérifie en principe toujours ce que je fais (avec FF, Opera, Safari, IE,
Chrome), mais il y a toujours des trucs qui peuvent m'échapper.

La notion de "design"
<http://fr.wikipedia.org/wiki/Design>
où ils oublient dans leur définition d'intro le point essentiel
"économie de moyens"



Oui. Dans mon idée, c'est un peu de l'éco-construction appliquée aux
sites : ne pas gaspiller les ressources pour rien, même si le coût paraît
nul au premier abord. En vrac : refuser la pub et les sponsors (sauf si le
site n'est pas le mien et que le propriétaire le souhaite), penser aux gens
qui ont des connexions lentes, éviter autant que possible d'insérer du code
que je ne comprends pas (et que j'aurai donc du mal à gérer à l'avenir), me
conformer autant que possible aux normes W3C, répondre autant que possible
aux demandes des utilisateurs des sites - du moins dans la mesure où cela
améliore le site, etc.
Bon d'accord, même si je voulais faire des trucs complexes, j'aurais du mal
compte tenu de ce que j'ignore, mais j'essaie autant que possible de faire
quelque chose de pas trop crasseux, même si le design est un peu
néandertalien.

De ttes façons le "web design" devrait commencer par se fixer ses
règles d'accessibilité avant de projeter les moyens minimaux à mettre
en ½uvre pour répondre à un "dessin" de maquette et sa navigation
associée. Mébon ... comme il faut produire (bô de préférence) ... le
"design" ce sera pour une autre fois, et le html aussi :-(
(ce n'est pas le HTML.5 qui va inverser la tendance au bling bling).



Sûr que l'ère de l'esbrouffe est loin d'être finie (hélas).

--
Pascale
Avatar
mcc
Pascale a écrit :

Pierre Goiffon écrivait
news:4c2b4880$0$8065$:

La recommandation a un long passage sur les unités :
http://www.w3.org/TR/CSS21/syndata.html#length-units



Un peu compliqué pour moi, mais intéressant.

Mais medium, small etc dépendent aussi de la configuration du
navigateur non ?



Oui ! Mais je me demandais si je ne devais pas modifier mes habitudes pour
passer en « fixe » afin d'éviter les surprises. Là-dessus, je découvre des
recommandations qui me vantent la notion d'em (que je connaissais
superficiellement mais que j'avais soigneusement laissé tomber).
D'où mes questions (:



Utiliser les em ou ex peut être particulièrement intéressant dans la
définition des marges, retraits ou interligne internes d'un
paragraphe. Cela permet de garder l'équilibre de présentation
lorsque l'utilisateur grossit ou diminue la taille du texte.
Pour la taille de police, le pourcentage convient trés bien pour
équilibrer entre les différentes tailles.

Sinon, je fais un peu comme SAM, plusieurs navigateurs réglés
differement, l'utilisation du plugin stylish sous firefox pour changer
les css des sites que je veux lire et que je trouve illisibles sinon.
Et dans le pire des cas, je vire tous les css pour lire le contenu !

Alors, entre le rendu que voulait donner l'auteur et ce que l'on fait
afficher sur son écran ....

--
Marie-Claude Collilieux
Bretagne
Avatar
SAM
Le 6/30/10 7:53 PM, Pascale a écrit :
SAM écrivait
news:4c2b69e4$0$27615$:

Mais j'ai quand même du mal à cerner cette notion d'em : je comprends bien
qu'elle me permettrait de préciser finement la taille de tel ou tel type de
texte.



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.

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

En lisant (et probablement malcomprenant) des docs à ce sujet, j'ai eu
l'impression de quelque chose de plus difficile à maîtriser et à cerner.



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

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-adjust>

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) ?

j'ai horreur des sites constitués d'une
étroite (et souvent interminable) colonne de texte, comme si les écrans
faisaient 400 pixels de large.



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)

(ce n'est pas le HTML.5 qui va inverser la tendance au bling bling).



Sûr que l'ère de l'esbrouffe est loin d'être finie (hélas).



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

--
sm
Avatar
SAM
Le 6/30/10 7:05 PM, 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



'tain fait ch..r !
Moi avec mon 20" j'ouvre mes navigateurs en 15" (vers les 800/700)
Je peux ? non quoi m...e !

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).



Comparé au RMI ça fait tt de même une somme !

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.



finalement, ça passe en 950 de large.

--
sm
Avatar
Denis Beauregard
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...

La compassion n'ayant aucun effet sur le coeur froid de certains,
tentons d'utiliser la logique. Et si je veux, moi, ouvrir 2 ou 3
sites en parallèle et les regarder tous parce que les 3 ont des
informations qui se complètent, je n'ai pas le droit ? Je ne peux
pas utiliser autre chose qu'un seul navigateur et rien d'autre sur
mon écran ? C'est la programmation minimaliste, le bourrage de
cerveaux et hop, on transforme tout le monde en zombies qui ne font
que du web-télé et regardent des pubs au lieu d'utiliser en même
temps 3 ou 4 logiciels ou sites ?

C'est vrai qu'il y a de vrais cons. Mais leur connerie n'est-elle pas
suffisante ? Pourquoi prétendent-ils se donner des excuses ?


Denis, avec son écran large, mais 12 applications ouvertes en même
temps
Avatar
docanski
Alors que les eleveurs et agriculteurs polluent toujours la Bretagne,
SAM ecrit ce qui suit en ce 01/07/2010 04:10 :

'tain fait ch..r ! Moi avec mon 20" j'ouvre mes navigateurs en 15"
(vers les 800/700) Je peux ? non quoi m...e !



Tu as raison.
Perso, avec mes 22 ", j'ouvre toujours des fenêtres de +/- 800 pixels de
largeur : c'est bien commode pour afficher 2 tâches différentes sur le
même écran. 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 ?
Vu la profusion des "flash" qui pètent dans tous les sens, je me demande
même s'ils ont la moindre notion des outils de base de l'écriture du web
: HTML, CSS, ES, PHP ...
Certains, même, se lancent aujourd'hui dans la "création" en utilisant
des outils Ouiziwouig qui produisent de véritables m... Témoin ce site,
une horreur rappelant les début des pages perso :
http://www.traoukertanguy.com/index.html
où j'ai dû rappeler à l'ordre un jeunot qui s'est lancé dans le métier
non seulement en toute méconnaissance de cause mais, de plus, en
trouvant normal de piller le Web pour se servir des illustrations dont
il a besoin.

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).



Comparé au RMI ça fait tt de même une somme !



D'autant que ce n'est même pas une question de prix (quoique ...) mais
surtout une question d'opportunité de pouvoir *enfin* faire du
multi-tâches grâce aux écrans de grande taille.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
1 2 3 4