28111 sujets

CSS et mise en forme, CSS3

Quelles familles de polices utilisez-vous ?

Pages :
Edit : suite à cette discussion et à des test réalisés préalablement, j'ai pu mettre à jour la page suivante, qui propose des familles de police génériques pour le web.
Chaque famille est accompagnée du code CSS correspondant (propriété font-family).

http://web.covertprestige.info/test/00-comparaison-de-fontes-pour-le-web.html

----
Hello tout le monde,

Vous connaissez tous la propriété font-family (et la propriété générique font)... mais quelles familles de polices utilisez-vous ?

Personnellement, je vois deux contraintes à respecter :
1/ des polices ayant un dessin vaguement proche (ce qui peut se limiter à la distinction serif/sans-serif/monospace...) ;
2/ des polices ayant une taille à peu près similaire.

Le deuxième point est souvent laissé de côté. Par exemple, Dreamweaver propose des familles de polices "standard" (ou plutôt : répandues) par défaut, qui sont à mon avis assez mal foutues. Genre :
font-family:Verdana, Arial, Helvetica, sans-serif;

Arial et Helvetica sont très proches, donc pourquoi pas... mais avec cette ligne de code CSS, si la police Verdana n'est pas présente, on bascule sur du Arial ou Helvetica... qui sont très très différentes de Verdana. À taille de police (font-size) égale, Verdana a l'air 2 fois plus haute et plus large que de l'Arial !
Dans ce cas, si on ne peut pas mettre du Verdana ou une police proche, autant laisser le navigateur/le système choisir une police sans-serif par défaut.

Pour ma part j'utilise :
font: .9em/1.5em "Verdana", "Bitstream Vera Sans", sans-serif;

La Bitstream Vera Sans étant très proche de Verdana, surtout au niveau de la taille et de la largeur des caractères, et présente sous pas mal de configs Linux et Mac à ce que j'ai pu constater.

font: 1em/1.3em "Times", "Times New Roman", "Nimbus Roman No9 L", sans-serif;

La dernière étant une fonte assez répandue sous les systèmes GNU/Linux, mais pas trop ailleurs me semble-t-il. Pour Times et Times New Roman, le dessin et la taille des caractères sont similaires, mais la hauteur de ligne diffère très largement ! Il vaut mieux donc la préciser, au cas où.

font: 1.1em/1.5em "Courier", "Nimbus Mono L", monospace;

Soit une police Windows, une police Linux (en tout cas trouvée par défaut sous Mandriva et Ubuntu...)... mais rien pour Mac. Quelq'un a une idée ?

font: 1em/1.4em "Arial", "Helvetica", "Nimbus Sans L", sans-serif;

Une pour Win (+Mac en général), une police Mac, et une Linux.

Voilà, pour l'essentiel, c'est ça. Et vous, qu'est-ce que ça donne ?
Modifié par mpop (22 Feb 2006 - 21:35)
Je n'en préferais aucune auparavant, mais ta page de test m'a décidé à échanger la mienne pour cette agréable Trebuchet MS. ^^
en ce qui me concerne j'utilise souvant ca :


font-family: Tahoma, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
font-size: 0.7em;


maintenant verdana reste le must Smiley smile
StyleSho a écrit :
maintenant verdana reste le must Smiley smile

À doubler par un "Bitstream Vera Sans", très très proche au niveau du dessin et de la taille/largeur des caractères. Pour nos amis les linuxiens qui n'ont pas les polices Microsoft par défaut. Sinon, j'ai croisé la Bitstream Vera Sans sous Mac OS X également.
Salut, Smiley smile

Moi, j'aime assez le verdana et le trebuchet.

C'est vrai que la taille des polices pose parfois de gros problèmes ... Smiley ohwell

Pour mon site par exemple, j'utilise les polices "old english text MT" et "palace script MT" que je trouve très belles et très stylées. 

.pol1 {font-size:42px;font-family:"Old English Text MT", Verdana, serif;}
.pol2 {font-size:45px;font-family:"Palace Script MT", Verdana, serif;}

Mahleureusement, ces 2 polices un peu "exotiques" sont très petites et je suis obligé de mettre de grandes tailles plus de 40 px !!! Faites le test en mettant du texte en verdana ou arial à cette taille et vous comprendrez le problème : si l'internaute n'a pas ces polices installées, les titres sont immenses !!! Smiley biggol

Je n'ai pas trouvé réellement de solution à ça Smiley decu , si quelqu'un à une idée, je suis preneur Smiley biggrin
Pandore a écrit :
Faites le test en mettant du texte en verdana ou arial à cette taille et vous comprendrez le problème : si l'internaute n'a pas ces polices installées, les titres sont immenses !!! Smiley biggol

Et il est très probable qu'il ne les ait pas. Elles sont par défaut sous Win ou Mac OS ?
Probablement pas sur les deux en même temps. Et moi sous Linux je ne les ai pas.

Pour le web, à moins d'utiliser des images ou du flash, on n'a qu'un choix très limité. C'est pour ça que j'essaie d'établir des familles de polices cohérentes. Au final, je pense qu'il ne doit y avoir que 6 à 10 familles de polices utilisables (en visant le grand public).
Pandore a écrit :
Salut, Smiley smile


C'est vrai que la taille des polices pose parfois de gros problèmes ... Smiley ohwell

Pour mon site par exemple, j'utilise les polices "old english text MT" et "palace script MT" que je trouve très belles et très stylées. 

.pol1 {font-size:42px;font-family:"Old English Text MT", Verdana, serif;}
.pol2 {font-size:45px;font-family:"Palace Script MT", Verdana, serif;}

Mahleureusement, ces 2 polices un peu "exotiques" sont très petites et je suis obligé de mettre de grandes tailles plus de 40 px !!! Faites le test en mettant du texte en verdana ou arial à cette taille et vous comprendrez le problème : si l'internaute n'a pas ces polices installées, les titres sont immenses !!! Smiley biggol

Je n'ai pas trouvé réellement de solution à ça Smiley decu , si quelqu'un à une idée, je suis preneur Smiley biggrin

Bonjour,
Il suffit de donner une taille de police relative :
font-size:1em
par exemple non?

Est-ce que Comic Sans MS passe sur Linux et MAC ?

"old english text MT" et "palace script MT" ne sont pas reconnues chez moi (IE6 winXP)
Modifié par chmel (12 Feb 2006 - 23:30)
chmel a écrit :
Il suffit de donner une taille de police relative :
font-size:1em
par exemple non?

En fait non. Le problème aves les fontes (ou polices de caractères), c'est que les lettres ne prennent pas toute la hauteur du signe, mais seulement une partie. Et que la proportion change d'une fonte à l'autre. Du coup, avec une hauteur de signe identique (ce que permet de régler font-size), on peut obtenir des choses très différentes.
Prenons par exemple un A majuscule.
Pour font-size: 16px, le A du Verdana fera 13px, et le A de Times fera 8px (pour donner un ordre d'idée).

Du coup, à même taille de police, certaines ont l'air deux fois plus grosses que les autres !
D'où l'intérêt d'avoir des familles de polices d'aspect semblable, pour éviter ce problème.

D'où aussi le fait que
font-family: Verdana, Arial, sans-serif;

est à mon avis une très mauvaise famille.

chmel a écrit :
Est-ce que Comic Sans MS passe sur Linux et MAC ?

Sur Mac, c'est plutôt probable. Quoique, s'il n'y a aucun produit bureautique Microsoft installé, ce n'est pas sûr.

Sur Linux, a priori non. Les règles de distribution du jeu de fontes Microsoft Core Fonts sont plutôt souples, mais pas assez pour permettre une distribution par défaut dans les distributions linux.
Cette font est peut-être présente dans les versions commerciales (Mandriva club, Red Hat, etc.)
Elle est en tout cas absente des versions download (Mandriva download, Ubuntu, etc.). Sauf que pour certaines distributions elle est téléchargeable sous la forme d'un paquet depuis les serveurs FTP (installation automatisée de logiciels).

Donc je dirais que Comic Sans MS est disponible sur 80-90% des Macs, et 40-50% des systèmes Linux. Mais c'est du pifomètre.

Mais de toute façon, qui voudrait utiliser la fonte la plus mal dessinée de tous les temps ?
mpop a écrit :

Mais de toute façon, qui voudrait utiliser la fonte la plus mal dessinée de tous les temps ?


Bien d'accord, je n'avais pas cité ce lien depuis quelques mois Smiley cligne : ban comic sans.

Sinon tout autant d'accord avec toi sur les "valises de polices". A lire sur le sujet ce billet de Cybercodeur et aussi les commentaires qui suivent: Réflexions sur les polices de caractère.
StyleSho a écrit :
mais bon au final on utilise tous les memes police la fantaisie ca marche pas trop Smiley biggol


Oui Smiley lol

D'un point de vue graphique, design etc. la page conçue avec telle ou telle police, famille de police, et encore plus avec une seule police va irrémédiablement se présenter de manière différente dans le navigateur graphique de l'utilisateur, c'est à dire pas comme le concepteur l'avais prévu. Il faut en faire son deuil.

Ceci dit on peut faire en sorte que cela se dégrade proprement en n'utilisant pas des polices de proportions très différentes, en prenant en compte les différents OS et les polices installées, en spécifiant toujours un police générique.

En lachant prise -un peu- sur le rendu Smiley cligne .
Igor a écrit :


Oui Smiley lol

D'un point de vue graphique, design etc. la page conçue avec telle ou telle police, famille de police, et encore plus avec une seule police va irrémédiablement se présenter de manière différente dans le navigateur graphique de l'utilisateur, c'est à dire pas comme le concepteur l'avais prévu. Il faut en faire son deuil.

Ceci dit on peut faire en sorte que cela se dégrade proprement en n'utilisant pas des polices de proportions très différentes, en prenant en compte les différents OS et les polices installées, en spécifiant toujours un police générique.

En lachant prise -un peu- sur le rendu Smiley cligne .


faut esperer que avec l'arrivé de IE7 on puisse eu peu mieu utiliser les differentes police...
et surtout les dernier toute les propriété que IE6 degrade Smiley bawling

qui vivra verra... Smiley cligne
StyleSho a écrit :


faut esperer que avec l'arrivé de IE7 on puisse eu peu mieu utiliser les differentes police...
et surtout les dernier toute les propriété que IE6 degrade Smiley bawling

qui vivra verra... Smiley cligne


L'arrivée de la nouvelle version ne changera rien malheureusement... ou heureusement.

L'occasion de se concetrer sur le contenu et pas sur son rendu.
Bonjour,

La question des propriétés avancées de définition de polices de caractères a été retirée de CSS2 (cf CSS2.1) car les conditions requises d'interopérabilité des solutions n'étaient pas remplies : pour des raisons de logique commerciale et de droits, les éditeurs de polices ne sont pas prêts à franchir le pas, car la diffusion ou la reproduction de fontes via le navigateur remet en cause leur modèle économique.

Les normes Web répondent aussi, il ne faut pas l'oublier, à des impératifs de faisabilité et de viabilité économique. Cette question des fontes est d'ailleurs un très bon contre-exemple à citer à ceux qui considèrent que les normes du W3C sont trop "théoriques" et coupées de la réalité des métiers Web Smiley cligne

Le problème reste posé dans le cadre d'un module CSS3 qui est en partie en attente, et qui n'est absolument pas au stade implémentable.

Bref, il n'y a rien à attendre du côté des navigateurs, IE et tous les autres, car cela ne relève pas d'eux. Le problème se situe loin en amont.
Modifié par Laurent Denis (13 Feb 2006 - 05:08)
Merci pour ce sujet très instructif. Encore un paramètre à prendre en compte dans la réalisation d'un site web...
Etant relativement novice en la matière (webdesign et CSS), j'aurais 1 ou 2 questions. J'espère qu'elles ne seront pas trop hors sujet (elles en concernent pas directement le choix de la famille de police).

1° Je ne comprend pas la déclaration .9em/1.5em : fonction exact, effet au niveau du navigateur (notamment sur la taille par défaut de la police), etc.
Est-ce que quelqu'un pourrait-me l'expliquer ou m'indiquer où (une url) je pourrais en apprendre plus?
J'ai fait une rapide recherche et n'ai pas trouvé de réponse à mes interrogations...

2° Ce sujet traite de l'importance du choix de la famille de police pour éviter des trop grosses différences de mise en page d'un navigateur à un autre.
Ma question est : comment gérez-vous les écarts au niveau de la taille par défaut de la police (par ex. entre Mozilla ~16px et IE ~20px)?
Si la question a déjà été abordée plusieurs fois et/ou que vous jugez que cela n'a rien à faire ici, je me contenterais de liens...

3° Je trouve la police Trebuchet MS très agréable à lire et envisage de la mettre comme police par défaut pour le contenu. Est-ce un bon choix (est-elle suffisamment répendue)?

Merci encore.
Polack a écrit :
1° Je ne comprend pas la déclaration .9em/1.5em : fonction exact, effet au niveau du navigateur (notamment sur la taille par défaut de la police), etc.

L'instruction suivante :
font: .9em/1.5em Verdana, "Bitstream Vera Sans", sans-serif;

Peut se décomposer ainsi :
font-size: 0.9em;
line-height: 1.5em;
font-family: Verdana, "Bitstream Vera Sans", sans-serif;

Quant à l'unité em, là par contre tu devrais trouver avec une recherche, ou par exemple sur la documentation CSS de Media-box.net :
http://wiki.media-box.net/documentation/css/em

Polack a écrit :
2° Ce sujet traite de l'importance du choix de la famille de police pour éviter des trop grosses différences de mise en page d'un navigateur à un autre.
Ma question est : comment gérez-vous les écarts au niveau de la taille par défaut de la police (par ex. entre Mozilla ~16px et IE ~20px)?
.
La taille par défaut est fixée par l'utilisateur (mais le plus souvent, il est vrai, dans les réglages par défaut du système). Il n'y a pas de moyen pour contourner ce "problème" (en est-ce vraiment un ? ne vaut-il mieux pas laisser le choix à l'utilisateur ?). Ou alors, on utilisera du texte avec une taille de police fixe (en pixels ou en points), si on veut une maîtrise (très illusoire) du design.

Polack a écrit :
3° Je trouve la police Trebuchet MS très agréable à lire et envisage de la mettre comme police par défaut pour le contenu. Est-ce un bon choix (est-elle suffisamment répendue)?

C'est une police intéressante, dont le dessin évite certains problèmes posés par l'affichage d'Arial/Helvetica sur les écrans (caractères parfois trop resserrés). Elle fait partie du groupe des « Microsoft Core Fonts » (une dizaine de polices en tout), que l'on trouve à peu près partout sous windows (sauf peut-être pour des vieilles versions), mais également sous certaines configs Mac (confirmation ce matin sous deux ordinateurs sous Mac OS X n'appartenant pas au même parc).
Par contre, pour Linux, il faut avoir installé le paquet msttcorefonts (Ubuntu) ou équivalent. Ce n'est pas le cas de tout le monde.
Au pire, Trebuchet MS se dégrade assez bien en Arial ou autre.

Le lien donné par octopussy est une véritable mine.
Modifié par Florent V. (23 Apr 2007 - 14:03)
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)
Pages :
Sujet clos
Aller à