26744 sujets

CSS et mise en forme, CSS3

Pages :
(reprise du message précédent)

mpop a écrit :


Au pire, Trebuchet MS se dégrade assez bien en Arial ou autre.



C'est un point que j'avais effectivement noté. Au passage qu'en est il de la possible universalité d'une police comme arial ? C'est encore insuffisant ou a t'on une base fiable (si c'était le cas ce serait très bien en fait car c'est une police tout à fait supportable à défaut d'être complètement séduisante) ?

<edit>
Ah oui, le lien d'octopussy apporte des éléments de réponses. En fait c'est pas mal... Mais il y a un reliquat.

PS : Sacré bon sang de bonsoir !!!! Quand un lien mène vers une page en langue étrangère merci de le préciser. La qualité ce n'est pas réservé aux validateurs W3C, "Opquast checklist" et consort. Même dans les forum ça vaut le coup Smiley cligne
</edit>
Modifié par clb56 (13 Feb 2006 - 23:34)
clb56 a écrit :
Au passage qu'en est il de la possible universalité d'une police comme arial ? C'est encore insuffisant ou a t'on une base fiable (si c'était le cas ce serait très bien en fait car c'est une police tout à fait supportable à défaut d'être complètement séduisante) ?


Arial, Verdana, Courier New, et dans une moindre mesure Trebuchet MS, sont d'après http://www.codestyle.org/css/font-family/sampler-CombinedResultsFull.shtml plutôt "universelles".

Bien sûr sous Linux c'est un peu moins évident. Elles seraient plutôt dans les 50-60%... ce qui est déjà pas mal.
Merci de l'info,

Dans ce cas quel serait sous linux l'équivalent en terme "d'universalité" (lourd le terme Smiley lol ) et de type de police ? Parce que finalement ça pourrait être intéressant dans une déclaration de police un peu standardisée et sans ambitions ni originalité particulières de déclarer quelque chose comme :

body {
font-family:"Trebuchet MS", arial, "idem pour linux", sans-serif;
}
Voici une liste mise à jour de mes familles, d'après http://www.codestyle.org/css/font-family/sampler-CombinedResultsFull.shtml pour les statistiques (assez informelles tout de même, me semble-t-il).

Type Arial/Helvetica :
font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
(taille par défaut, ou légèrement augmentée si on veut quelque chose de très lisible).

Type Verdana :
font-family: Verdana, "Bitstream Vera Sans", sans-serif;
(taille à 85% ou 90%, pour compenser la taille importante de la police)

Type Trebuchet :
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
(taille par défaut).

Type Times :
font-family: Times, "Times New Roman", "Nimbus Roman No9 L", serif;
(taille à 110% ou 115% environ).

Type Courier (chasse fixe, empattements) :
font-family: Courier, "Courier New", "Nimbus Mono L", monospace;
(famille très cohérente, ça devrait tenir le choc !... en taille par défaut, ça devrait être bon).

Type Andale Mono (chasse fixe, linéale) :
font-family: "Andale Mono", "Lucida Console", monospace;
(taille par défaut, voire diminution légère genre 90%... l'un dans l'autre une famille pas 100% fiable... mais ça reste intéressant).
clb56 a écrit :
Merci de l'info,

Dans ce cas quel serait sous linux l'équivalent en terme "d'universalité" (lourd le terme Smiley lol ) et de type de police ? Parce que finalement ça pourrait être intéressant dans une déclaration de police un peu standardisée et sans ambitions ni originalité particulières de déclarer quelque chose comme :

body {
font-family:"Trebuchet MS", arial, "idem pour linux", sans-serif;
}

Avec Arial et Helvetica, c'est déjà pas mal.
Cf la famille que je donne pour Trebuchet dans mon message précédent.
J'aurais du indiquer dans ma question que c'était le fait de définir 2 tailles de part et d'autre du / que je ne comprenais pas, car je connaissais la signification du em. Heureusemenent, tu as été consciencieux et détaillé de manière claire l'ensemble de la déclaration.
Merci donc pour ses précisions mpop.

Sinon, j'ai une autre question. Sur le page suivante (fourni initialement par Igor), j'ai lu qu'il était préférable pour l'affichage sur un écran d'utiliser :
- une police serif pour les titres
- une police sans-serif pour le contenu

Qu'en pensez-vous?

<edit>
Encore une question : qu'en est-il de la police Georgia? Elle est notamment utilisé par CSS Zen Garden pour le thème par défaut et semble relativement répendu.
</edit>
Modifié par Polack (14 Feb 2006 - 09:45)
Polack a écrit :
Encore une question : qu'en est-il de la police Georgia? Elle est notamment utilisé par CSS Zen Garden pour le thème par défaut et semble relativement répendu.

D'après http://www.codestyle.org/css/font-family/sampler-CombinedResultsFull.shtml
Georgia est présente :
- sous Windows à 80% ;
- sous Mac à 90% ;
- sous Linux à 50%.
Mais pour la doubler par une police de "sécurité", c'est peut-être un peu difficile. Le Times/Times New Roman ne convient pas vraiment (dessin des minuscules plus petit de manière très notable). À voir donc si on trouve quelque chose...

Au passage, le style par défaut du CSS Zen Garden n'est pas forcément une référence sur ce point précis.
font: 9pt/17pt georgia;

- Police fixe (au passage, du Georgia en 9pt a une taille raisonable parce que c'est une police assez large... en taille relative, du 90% ou .9em sera peut-être indiqué) ;
- pas de fonte de substitution ;
- pas de famille générique !

Polack a écrit :
Sinon, j'ai une autre question. Sur le page suivante (fourni initialement par Igor), j'ai lu qu'il était préférable pour l'affichage sur un écran d'utiliser :
- une police serif pour les titres
- une police sans-serif pour le contenu
.

Il n'y a aucune obligation. La plupart des navigateurs utilisent par défaut une police de type serif... du coup, si on n'en précise pas, le contenu sera en serif (IE6, Firefox... ensuite ça peut dépendre des configurations je suppose). Donc le sans-serif pour le contenu n'est pas une obligation.

Même chose, pas d'obligations pour les titres.

En fait, il n'y a aucune norme à suivre, mais deux points à prendre en considération :

- quel est le message véhiculé/l'impression à donner ? Un Verdana sera banal et passe-partout, un Times peut être connoté en termes de classicisme (littérarité du contenu... c'est la police standard pour l'édition de romans !), un Arial peut jouer la carte de la modernité... sans parler d'une Futura. Un Trebuchet sera sans doute une linéale assez discrète, qui ne met pas trop en avant l'aspect rigide des polices "modernes" dessinées dans la première moitié du 20e siècle, grâce à quelques courbes subtiles et bien placées.
Bien sûr, ça dépendra de chaque personne, de chaque culture, ou également du support (l'utilisation des linéales dans les romans est exceptionnelle, par contre on les trouve plus souvent déjà dans les livres techniques ou dans certaines revues... et sur le web, elles sont majoritaires).

- les contraintes techniques : tous les systèmes / toutes les configurations n'ont pas forcément d'antialiasing activé (lissage des caractères). En particulier sous windows XP, le lissage est désactivé par défaut (au contraire des sytèmes Mac et souvent Linux). Du coup, les linéales sont plus facilement affichées que les polices à empattements (serif). Et les caractères romains (normaux) sont plus facilement affichées que les italiques.
Du Times (au dessin plus fin que la Times New Roman, qui supporte mieux l'absence de lissage... mais est moins raffinée, un peu plus brute) en italique sur un ordinateur sans lissage des caractères, c'est vraiment pas tip top.
Du coup, on doit parfois prendre des risques Smiley lol ... ça sera moins joli sur un système sans antialiasing, mais il faudra faire avec. Du moins si ça reste lisible, sinon c'est un tout autre problème !
Merci encore pour ces quelques précisions.

Existe-t-il une étude qui fait le rapprochement entre le type de police et le "message véhiculé/l'impression à donner"? Je me demande s'il n'y a pas ça dans le livre de ZenGarden (en tout cas, y'a quelque chose qui s'en rapproche pour les couleurs).

Vous-même, quel emploi faites vous des différents types de possible pour la présentation de votre site (titre, contenu standard, code, citation, etc.)?
Modifié par Polack (14 Feb 2006 - 16:27)
Concernant les familles de police, je me souviens avoir vu un site qui conseillait celle-ci :

Lucida Grande (Pour OS X),
Verdana (Pour Windows),
Bitstream Vera Sans (Pour Linux),
Sans Serif

(Il me semble qu'il y en avait une supplémentaire pour les autre systèmes Unix)
Qu'en pensez-vous ?


Concernant le message véhiculé/l'impression à donner, que choisiseriez-vous pour un site proposant un sujet technique/scientifique ?
JuTs a écrit :
Concernant les familles de police, je me souviens avoir vu un site qui conseillait celle-ci :

Lucida Grande (Pour OS X),
Verdana (Pour Windows),
Bitstream Vera Sans (Pour Linux),
Sans Serif


Ce qui nous donne :
Type Verdana :
font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
(taille à 85% ou 90%, pour compenser la taille importante de la police)
Juste une question au passage vu que l'on parle de polices, il y a un truc que je ne comprends pas bien : pourquoi, quand on dit font-size:16px par exemple, la hauteur d'une lettre en "palace script" est beaucoup plus petite que la hauteur d'une lettre en "verdana" ??? Smiley biggol

C'est bien la hauteur d'un caractère, non ? Smiley confuse
Pandore a écrit :
Juste une question au passage vu que l'on parle de polices, il y a un truc que je ne comprends pas bien : pourquoi, quand on dit font-size:16px par exemple, la hauteur d'une lettre en "palace script" est beaucoup plus petite que la hauteur d'une lettre en "verdana" ??? Smiley biggol

C'est bien la hauteur d'un caractère, non ? Smiley confuse

Non. La propriété s'appelle font-size, pas letter-size
Smiley lol
ARgh c'est pas vrai, j'avais posté un explicatif sur la constitution d'une "ligne" de texte (où ya pas que du texte mais plein d'espaces blanc de tailles variables en haut et en bas...), et paf, il est pas passé !

Dégoûté Smiley eek

Bon alors, CF : http://en.wikipedia.org/wiki/Image:Vertical_typographic_terms.png

L'image dont je donne le lien montre la hauteur de corps (body-height), qui ne correspond pas à la hauteur totale de la ligne. Pour la hauteur de ligne, il faut rajouter deux zones en haut et une zone en bas.

------------------------------------
espace blanc réservé (variable d'une police à l'autre)
------------------------------------
espace pour les diacritiques (accents) (variable d'une police à l'autre)
------------------------------------
hauteur pour les hampes et le haut des capitales (variable d'une police à l'autre)
------------------------------------
oeil de la lettre (hauteur d'x) (variable d'une police à l'autre)
------------------------------------
espace pour les jambages (variable d'une police à l'autre)
------------------------------------
espace blanc réservé (variable d'une police à l'autre)
------------------------------------

Le nombre de "variable d'une police à l'autre" suffit-il à expliquer certaines différences ? Smiley lol
Je viens de regarder les recommandations du W3C pour le CCS1 et 2 et je n'ai pas trouvé de propriété letter-size Smiley decu Je suis un peu fatigué ce soir, je suis peut-être passé à côté Smiley cligne
Pandore a écrit :
Je viens de regarder les recommandations du W3C pour le CCS1 et 2 et je n'ai pas trouvé de propriété letter-size Smiley decu Je suis un peu fatigué ce soir, je suis peut-être passé à côté Smiley cligne

Ben oui, ma remarque dit justement (implicitement) que ça n'existe pas Smiley sweatdrop ... ou alors c'est ce que tu dis aussi, au 38e degré... Hm, je suis un peu perdu là.
Non mpop, j'avais pas compris ça du tout lol : en lisant ta réponse, j'ai vraiment cru que cette propriété letter-size existait Smiley confused
Dernières nouvelles : suite à cette discussion, j'ai remis à jour ma page de test, qui propose maintenant des propriétés CSS font-family prêtes à l'emploi. Enjoy Smiley cligne
Je ne sais pas s'il y a un lien entre image du site et police. Personnellement, je me base sur des critères fonctionnels :

- Trebuchet pour des sites techniques, car la police est petite par rapport à l'interligne et ça aère le texte. Mais je déplore les accents déportés à gauche.
- Georgia sur des sites rédactionnels, surtout s'il y a des chiffres noyés dans le texte, car je trouve que les chiffres en Georgia sont très beaux et ressortent bien dans le texte.
- Arial pour les menus, ou pour des tableaux de données, car la police est claire et relativement petite,
- Verdana dans la plupart des autres cas.

En tout cas, ce fil de discussion est une excellente idée.
Pages :