<C²: webløg />

Courriel - email address

Avatar Denis

samedi 04 octobre 2003
par Denis Boudreau

Réflexions sur les polices de caractère

La question du choix de la police de caractère sur le Web en est une qui est trop souvent prise à la légère (pour ne pas dire éludée) dans le cadre d'un processus de création de sites Web. C'est la constatation (pourtant évidente) que je commence à faire suite aux réflexions des derniers jours initiées par les demandes répétées de certains copains au sujet de la taille des polices sur CYBERcodeur, la critique plus formelle de Mathieu sur TotalementCrétin et les discussions qui se tiennent en privé ou en public avec certains d'entre vous depuis plus ou moins longtemps. Dans les dernières années, vous l'avez fort probablement remarqué, les polices sans-serif ont été majoritairement favorisées par les designers et concepteurs, dû au fait qu'elles sont généralement reconnues comme étant plus confortables pour la lecture à l'écran que les polices serif, les cursives et les autres. Il n'y a qu'à faire un rapide tour du Web pour s'en rendre bien compte; en effet, 9 sites sur 10 sont affichés en Verdana, ce qui en fait de loin de loin la police la plus utilisée sur le Web.

Si les premières heures du Web ont vu l'imposition majoritaire du times new roman (la police serif la plus répandue des années 90 -- toujours l'ultime police par défaut des navigateurs), celle-ci fut rapidement remplacée par l'arial au tournant du siècle. Cette "nouvelle" police sans-serif que l'on commençait à découvrir avec son implémentation systématique dans Windows 95, était installée par défaut sur tous les systèmes d'exploitation Windows, Mac et Linux. Quelle aubaine alors de l'utiliser massivement ! Avec le temps toutefois, les gens s'en sont progressivement lassés au profit d'une autre nommée verdana (conçue par MicroSoft) et apparue sous Windows 98, beaucoup plus agréable dûe à sa forme plus carrée, favorisant notamment plus encore la lecture écran (spécialement dans les tailles réduites). Le problème ? Dans sa forme naturelle, elle est énorme. Grossière même. Une horreur.

Qu'à cela ne tienne, les designers Web ont rapidement compris qu'il suffisait de la réduire aux trois quarts de sa taille normale pour en faire une superbe représentation visuelle. Du coup, les sites ont commencé à s'afficher en <font face="verdana" size="2"> et tout le monde était content. C'est à ce moment précis que les contenus sur le Web ont basculé dans l'ère de la miniaturisation. Cette miniaturisation est devenue la norme, si bien que de nos jours, personne ne questionne la validité même de cette pratique avec le verdana.

Personne ? En fait non, certains la questionne et la condamne même. Une discussion en apparence toute innocente a eut lieu plus tôt aujourd'hui entre Anubis et votre humble serviteur à propos des choix typographiques sur C² ; une discussion qui m'a ouvert les yeux sur une réalité que je n'avais jamais pris en compte, et que j'estime digne de mention, au cas où cette constatation vous aurait également échappé au fil des années.

Depuis aussi longtemps que je puisse me souvenir, des visiteurs fidèles de CYBERcodeur m'envoient des messages pour se plaindre de la taille réduite de la police par défaut déclarée dans mes feuilles de style. Comme ils constituaient une minorité isolée (malgré toute l'estime que je leur porte individuellement) et que mes propres goûts esthétiques me défendaient de servir mon verdana à 100% de sa taille, je me suis toujours résolu à ne pas trop en tenir compte. Après tout, me suis-je souvent dit, on ne peut pas plaire à tout le monde, on ne peut qu'essayer d'en accomoder le maximum. Et pourtant...

La question que j'aurais du me poser depuis longtemps n'était pas à savoir si la police était de la bonne dimension, mais de découvrir ce que tous les détracteurs avaient en commun. Et ce n'est que cet après-midi que je crois enfin avoir compris. Cette réalisation ne les englobera certainement pas tous, mais elle incluera la plupart d'entre eux, ce qui est bien suffisant à mon sens pour en faire une règle quasi-déontologique. Cette hypothèse n'est pas encore vérifiée, mais je suis convaincu de tenir un bon filon :

La plupart de ceux qui critiquent les dimensions de ma police de caractère travaillent sous Linux et n'ont pas verdana d'installée sur leur système -- la plupart des autres ont probablement une vue plus faible que la mienne, ce qui est d'un autre ressort complètement.

Évidemment, si quelqu'un m'apprends dans les prochains jours que verdana est disponible sous Linux, toute ma réflexion risque d'être balayée du revers de la main !!!

Si ce n'est pas le cas, que faut-il en conclure ? Et bien, si ces braves promoteurs du logiciel libre n'ont pas d'accès à verdana, c'est qu'ils se font servir la deuxième police par défaut prévue sur CYBERcodeur, qui est l'arial dont je discutais tout à l'heure. Et comme la taille de ma police par défaut est simplement déclarée comme devant s'afficher à 75% de sa valeur nominale pour contrer la grossièreté du verdana de base, ce qu'ils reçoivent, c'est du arial affiché aux trois quarts de sa valeur par défaut... ce qui est suffisamment petit pour arracher les yeux de n'importe qui. Tout un problème auquel n'existe en apparence que deux solutions :

  • Accepter de laisser mon verdana s'afficher à 100% de sa valeur par défaut ;
  • Changer la police d'affichage et abandonner le verdana au profit d'une autre sans-serif plus répandue ou plus sure.

Si la première option est hors de question par simple acqui de conscience, la deuxième option est déchirante par l'amour que je porte au verdana dans sa forme couramment (et malencontreusement) utilisée. Cela explique donc -- pour ceux d'entre vous qui l'ont remarqué -- pourquoi je suis retourné en arial aujourd'hui avec ce site. J'ignore où mes réflexions me porteront, mais chose certaine, ce sera loin du verdana et des polices définies à 75%. Un gros travail de recherche graphique m'attend, afin de déterminer par quoi remplacer mon verdana chéri. Trébuchet ms, la police utilisée pour OpenWeb, me semble un choix intéressant. Elle n'est probablement pas plus disponible chez Linux, mais au moins dans sa forme naturelle, elle demeure de bon goût et les partisans de l'OS libre recevront toujours du arial se rapprochant du 100% de sa taille normale, ce qui est "impossible" dans le contexte actuel sous le reigne du verdana. Si j'étais déjà en exploration à ce niveau depuis l'intégration du century gothic dans la nouvelle mouture, je viens littéralement de basculer dans la recherche avec cette constatation et ces remises en question...

C'est peut-être un mal pour un bien remarquez. Voilà déjà longtemps que l'on utilise verdana à toutes les sauces, sans en questionner la nature. Je ne sais pas si nous observerons un retour en force du times new roman comme le suggère certaines personnes, mais en attendant que CSS-3 nous permette d'intégrer des polices directement dans nos sites Web comme on pouvait le faire jadis en ShockWave, il demeure peut-être pertinent de remettre nos habitudes en question.

Entre-temps, ne vous surprenez pas si les choses bougent en ces pages, nous sommes à nouveau en mode d'exploration CSS.

Denis Boudreau | 2003.10.04 @ 23:31

Alors, qu'en pensez-vous ?

Voici ce que vous aviez à en dire... vos impressions, recueillies à vif.

2003.10.05 @ 00:48 par Ndeko

Je viens d'apprendre, grâce à ton billet, que Linux ne reconnaît pas Verdana. L'importance de la nouvelle est... de taille. En pt, px, em, % ou cm, comme on voudra, mais de taille !!

Cela va m'amener aussi à réviser mes pratiques.

Par ailleurs, j'ai fait le choix, en réécrivant récemment la page de mon carnet web (*), d'afficher le corps des billets... en 'Courier New'. Vous savez, cette bonne vieille police des machines à écrire. Cela pour donner aux billets un aspect quelque peu rétro, et différencier les éléments en rapport avec le contenu pur des autres (menus, descriptions, mentions utiles, ...)

Mais je me demande à présent si... Linux reconnaît 'Courier New' ! Merci aux Linuxiens de me tenir au courant.

(*) Réécriture pour laquelle tes conseils, Denis, au travers du forum des Pompeurs, m'ont été précieux. Merci encore !

Haut retour au début de la page

2003.10.05 @ 02:35 par Vrykolaka

Les polices téléchargeables sont disponibles depuis CSS-1. Il faut passer par Truedoc (Bitstream), la techno d'Adobe/Microsoft faisant l'impasse sur Linux (on doit passer par une application pour convertir les polices)

http://www.truedoc.com/

Haut retour au début de la page

2003.10.05 @ 04:07 par Maurice

Il existe une police équivalente à Verdana sous Linux : Bitstream Vera Sans. Son rendu est des plus agréable avec le lissage sous-pixel.
http://www.bitstream.com/...

Haut retour au début de la page

2003.10.05 @ 13:48 par YoGi

Il est également possible d'utiliser des polices au format OpenType. L'utilitaire WEFT de MS permet de convertir des polices truetype au format OET : http://groups.msn.com/Mic...

Et contrairement à Vrykolaka, il m'a semblé jusqu'à présent qu'il s'agissait de fonctionnalités de CSS2 et non 1.

http://www.spoono.com/htm...

Haut retour au début de la page

2003.10.05 @ 16:56 par YoGi

Au temps pour moi, le format embedded opentype ne fonctionne que sous IE.

Haut retour au début de la page

2003.10.05 @ 17:07 par CYBERcodeur

Ndeko, si les Linuxiens dans la salle ne comprennent pas le courrier new, ils comprendront minimalement le monospace, qui serait la famille générique associée à cette police (tant et aussi longtemps que tu leur indique). Tout comme il importe de toujours spécifier en fin de liste pour verdana ou une autre sans-serif de choisir n'importe quelle police d'un groupe type, il importe de le faire avec toutes les polices pour prévoir les pires cas de figure. Par exemple :

font-family: verdana, arial, helvetica, sans-serif;
font-family: 'times new roman', times, veronica, serif;
font-family: 'courier new', typewriter, matrix, monospace;

... spécifierait que pour chacune des trois listes, le navigateur finirait par au moins nous servir une police de la bonne famille. Certains diront que le mieux est encore de ne commander que la famille et laisser le système du visiteur choisir (demander une sans-serif plutôt qu'une verdana par exemple)... c'est un raisonnement qui se tient et qui en vaut un autre... mais cela peut avoir un sérieux impact sur le design. C'est pas forcément plus simple... dans le mesure ou on ne commence pas à sérieusement torturer les dimensions des polices, je crois que ça vaut la peine de l'essayer...

Mais essayer de faire passer ça aux designers, ce sera pas gagné d'avance ! :)

Pour ce qui est d'intégrer des polices directement au site sous une forme ou une autre d'embed, j'ai joué avec ça l'année dernière (avec WEFT) et j'avais jugé tout cela trop laborieux, pas assez bien supporté et autrement trop casse-pied. C'est peut-être moins compliqué aujourd'hui, mais à moins qu'on me prouve le contraire, j'attrendrai d'avoir un véritable outil de téléchargement comme celui que nous propose apparemment CSS-3.

Haut retour au début de la page

2003.10.05 @ 19:50 par Bobe

Bon, du coup, j'ai corrigé ma feuille de style utilisateur; j'avais l'impression d'avoir la figure collée à l'écran :)

Haut retour au début de la page

2003.10.05 @ 23:47 par CYBERcodeur

Après quelques recherches sur le sujet, il semblerait qu'helvetica soit une police tout à fait répandue sur Linux... peut-être la solution transitoire entre trebuchet, verdana et arial passe par helvetica ?

Haut retour au début de la page

2003.10.06 @ 03:50 par Eric Daspet

Je confirme en tant que détracteur que je suis sous Linux, sans Verdana. Notes que je n'ai pas d'Arial non plus, mais si la taille de la police est proche de 100%, je fais confiance à ma police par défaut pour s'afficher correctement, même si ce n'est pas la bonne. Ça me suffit

J'ai une Helvetica de dispo sous mon navigateur. J'ai effectivement une Bitstream Vera mais non proposée/utilisée par mon, navigateur (oui je sais que je pourrai surement bidouiller mais tout le monde ne le fera pas donc ca n'aidera pas Denis).

Le téléchargement des police existe avec CSS2 mais il n'est je crois implémenté correctement que avec MSIE/win (et vu que c'est la plate-forme qui a ta police par défaut, l'intérêt est faible ;)). Ça a été retiré pour CSS 2.1 donc il est peu probable que le support arrive de si tôt dans les autres navigateurs.

Haut retour au début de la page

2003.10.06 @ 05:22 par Vincent Gardet

Helvetica n'est probablement pas la solution universelle, puisqu'elle n'existe pas sous Windows (OS en voie de disparition, je sais , mais...)

Existe-t'il un tableau listant les polices disponibles par défaut entre les différentes plateformes ? Sinon, ne serait-il pas intéressant d'en monter un ?

Haut retour au début de la page

2003.10.06 @ 19:56 par mat

Personellement, j'ai verdana, arial, helvetica, jen passe, sous linux. Ma copine sur sa mandrake aussi. Et j'utilise bitstream vera sans, qui est semblable. Mais bref, le probleme n'est pas la. ce n'est pas juste un probleme de fonte disponible ou non : personellement, je ne laisse pas les sites decider de leur police a ma place, et jai donc tous les sites uniformement en bitstream vera sans, bien mieux pour mes yeux.

Le probleme n'est clairement pas ce que tes detracteurs ont en commun : j'ai le meme probleme avec ton site sous divers OS. Non le probleme est bien un probleme de dimension: ton 0.7em ou 0.6, ou bref, c'est 60 ou 70% de ma taille par defaut, chose que tu ne controles absolumment pas, ca peut etre 16px comme 12.
A partir de la, 2 conclusions s'imposent:
1/ c'est forcement trop petit. l'utilisateur choisit une taille pour une raison, ca lui plait. mettre 60%, c'est clairement se le mettre a dos, sauf si il a choisi une taille suffisamment grande par defo pour que ca reste lisible, ou quil a une minimum fontsize
2/ ca veut dire que faire ce que tu fais - un design avec des largeurs fixes - est clairement une mauvaise idee, vu que la taille de la police peut changer et depasser. c'est ce quil se passe chez moi avec ma minimum font-size (noublions pas que d'apres 1/, si je fais pas ca, je ny vois plus rien - trop petit -)

Maintenant, une chose a noter. si tu utilises betement sans-serif en 1em, que risques tu ? Sur les navigateurs modernes, tu peux a la fois regler la taille par defaut - 1em - et la fonte utilisée pour le sans-serif. tu peux donc parfaitement mettre verdana pour toi et laisser l'utilisateur decider.

Haut retour au début de la page

2003.10.06 @ 20:18 par Bobe

Ahh, le mythe des tailles de police laissées à leur valeur par défaut.
Verdana s'affiche typiquement de façon plus grosse que les autres polices. le mettre à 0.9em ou 0.85em me semble plus indiquer.
Le problème est que si le client n'a pas Verdana, une autre police sera utilisée, pour laquelle la taille définie ne sera plus bonne.

Je pense qu'une police sans empattements pour les titres, textes des menus, etc... et une autre, avec empattements, pour le texte proprement dit, serait plus indiqué.

Haut retour au début de la page

2003.10.07 @ 14:30 par mat

Bobe: la question est, est on a 2 pixels pres ? Verdana s'affiche plus gros, la belle affaire. Ce que je propose a au moins le merite de rendre cybercodeur respectueux des choix de l'utilisateur, et de faire en sorte que ca s'affiche a peu pres bien partout...

(Maintenant, 0.9em ne me genera pas... contrairement a 0.6 ou 0.7 :)

Il faut surtout se mettre dans la tete que on ne peut pas tout controller. Si le client n'a pas verdana, et ben ca s'affichera un poil differement tant pis. L'essentiel est que ca s'affiche pas nimporte comment, ce qui est grosso modo le cas aujourdhui :)

Haut retour au début de la page

2003.10.11 @ 07:56 par Michel Fortin

Sur mon écran 800x600 je trouve la taille par défaut des navigateurs (16px) un peu grosse. C'est pourquoi je l'ai changé à 14px. Je la metterait peut-être à 12, mais le nombre de site qui utilise une police deux fois plus petite m'enpêche de le faire.

Si quelqu'un veut un exemple de design qui s'adapte à toutes les taille de polices, je vous suggère d'aller visitermon site web (cliquez sur mon nom en haut). Tout est spécifié en em, en ex ou en %. Redimentionnez la fenêtre et changez la taille du texte n'importe comment... vous serez peut-être surpris.

Haut retour au début de la page

2003.11.18 @ 03:54 par Pinix

Pour ma part, je suis (suivre, pas être :-)) les diverses recommandations du web (w3c, graphisme, etc..) et j'ai une politique très simple pour les polices:
- sans-serif pour les menus, etc..
- serif pour le corps de texte (les titres, c'est plus discutable, donc l'un ou l'autre)

pourquoi ?
-> sans-serif est très bien pour afficher du texte lon linéaire, et effectivement, il s'adapte généralement mieux aux petites tailles que le serif.
-> sans-srif est affreux pour la lecture d'un texte linéaire (plus d'une phrase quoi). Bien-sûr il est joli, mais fatigue les yeux, et inconsciemment, va tenter l'internaute d'arrêter sa lecture. Le serif est prévu pour (grâce à ses petites papattes :-)).

Question police, j'ai banni Verdana, parce que pas universelle, et oui trop grosse: diminuer la police n'est pas la solution, le changement de taille de police doit être fait pour indiquer un changement de structure, pas un besoin d'adaptation de la police au style du site.
Donc, pour moi:
sans-serif=Trebuchet MS,Helvetica,Arial,sans-serif
serif=Georgia,Times New Roman,Times,serif

Trebuchet MS est de loin la plus réussie des polices standards Windows. Helvetica est sur tous les Linux, Arial sinon
Georgia est bien plus jolie que Times (qui d'ailleurs n'est pas identique à Times New Roman, donc différence entre Linux et Windows de toute façon).

Voilà, il fallait que je m'exprime (merci pour cette liberté accordée, même si de nos jours c'est banal).

Pinix

PS: l'adresse fournie dans le champ courriel est erronée exprès (pour le spam). Mon adresse: pinix chez fr point st. Désolé

Haut retour au début de la page

2003.11.18 @ 07:52 par Bleizig

'... l'adresse fournie dans le champ courriel est erronée exprès (pour le spam)...'
Tu remarqueras que nous n'affichons pas les addresses email des utilisateurs sur le site (juste leur url), ils ne nous servent qu'a entrer en contact avec vous au besoin.

Haut retour au début de la page

2003.11.18 @ 15:38 par CYBERcodeur

<quote user='Pinix' when='2003.11.18 @ 3:54'>
-> sans-srif est affreux pour la lecture d'un texte linéaire (plus d'une phrase quoi). Bien-sûr il est joli, mais fatigue les yeux, et inconsciemment, va tenter l'internaute d'arrêter sa lecture. Le serif est prévu pour (grâce à ses petites papattes :-)).
</quote>

Si ce n'était de cette phrase, je serais à 100% d'accord avec toi. En fait, il faut mettre en contexte ce que tu avances. Si le serif est effectivement plus approprié pour la lecture sur papier (à cause des empattements), il gêne au contraire la lecture à l'écran, toujours à cause de ces mêmes empattements. Donc, si tu réfères à la lecture papier, tu as raison, si tu réfères à a lecture écran, tu as tort.

Bien sûr, tout cela repose d'abord et avant tout sur l'opinion qu'on en a. Personnellement, je préfère toujours lire en sans-serif, peu importe ou mon texte est couché.

Selon moi, ta logique est parfaite si tu sers le contenu dans une CSS de media Print, car la lecture sera destinée pour l'impression papier. Mais dans la mesure ou tu le sers également à l'écran, il faudrait que tu serves ton corps de texte en sans-serif, pour en faciliter la lecture.

La pratique que je constate comme la plus répandue serait justement le contraire à l'écran; servir du serif pour les titres et du sans-serif pour les contenus.

Et finalement, pour ce qui est des adressesde courriel, je confirme. Elles ne sont pas utilisées, elles ne sont pas compilées, elles ne sont pas distribuées et elles ne sont mêmes pas gardées dans un format réutilisable. Elles ne servent qu'à vous rejoindre au besoin,pour poursuivre des conversations hors site. N'aies crainte donc. C'est sur notre honneur. :)

Haut retour au début de la page

Les commentaires et trackbacks sont désormais fermés. Pour toute remarque, vous pouvez toujours nous contacter.

Pisteur (Trackback)