23/10/2014 BP Eminet, Dveloppement et formation Drupal, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilit, multilinguisme

http://www.p-interactif.com/spip.php?article2 2/14
Raction un article de Jean Marc Hardy (www.redaction.be) concernant les techniques de (...)
Lire la suite...
Multilinguisme
Les quatre dimensions de la localisation Raction un article de Jean-Marc Hardy (...)
Lire la suite...
Accueil du site Articles et contributions Usage de la bonne typographie

Usage de la bonne typographie
Cet article est paru sur le site www.marketing-internet.com.
Il a t complt par la suite.
La rflexion concernant lutilisation dune typographie adapte est une partie trop souvent oublie dans une bonne dmarche ergonomique .
Cinq sicles de typographie et de texte imprim ont model notre approche de la lecture. Trop souvent une direction de communication en entreprise pense
quun cran web nest que la translation de linformation papier (impression). Cette attitude est dautant plus confortable quil sagit dun univers bien connu et
bien matris.
Aprs tout que reprsentent 30 ans dinformatique ditoriale en comparaison avec 500 ans de tradition dimprimerie ? Les chefs/directeurs de projet, les
dveloppeurs, les graphistes ont une vision trs technologique du dveloppement. Ils manquent parfois de recul. La consquence est souvent un manque
dargumentaires pour justifier des dveloppements ou des choix auprs des clients. Cest dommage car des approches ou des dmarches prouves, tudies et
testes existent.
Lobjectif de cet article est de soumettre quelques bons principes pour savoir ce qui fonctionne ou pas, et surtout tre capable de lexpliquer au client ou au
donneur dordre.
Des tudes de comportement ont montr que les techniques de lecture, de recherche et de navigation dun internaute ne sont pas les mmes sur un cran que sur
le papier. Les techniques dcriture doivent tre donc repenses.
Il existe par ailleurs une diffrence technique de taille entre lencre qui stale sur un papier et un triple faisceau lumineux qui excite des particules
luminescentes places derrire notre cran. Cette diffrence entrane un comportement particulier de notre perception rtinienne.
23/10/2014 BP Eminet, Dveloppement et formation Drupal, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilit, multilinguisme
http://www.p-interactif.com/spip.php?article2 3/14
Avoir des rflexions sur la typographie, permet de se rapprocher de ce qui fait la diffrence entre un beau produit et un bon produit...
Mais nanticipons pas - quest ce que la typographie ?
La typographie est lart de bien choisir et de bien utiliser les caractres. Dans cet article je me focalise uniquement sur la forme des caractres et non pas sur
le contenu et le message quils vhiculent.
Concernant un site internet, utilisable et utile sont les termes consacrs du discours ergonomique classique.
Le discours typographique est un peu identique : beau , bien , utile .
Le grand typographe Jean-Baptiste Bodoni disait, il y a prs de 300 ans : Lide du beau ne doit certes pas tre confondue avec celle du bien et de lutile. Ces
trois ides nen sont pas moins comme les trois aspects divers dune seule et mme chose considre de trois cts diffrents .
Chaque police de caractres appartient une famille adapte un usage particulier. Cette classification des caractres date de la fin du 19me sicle. Elle est
due un imprimeur parisien, Francis Thibaudeau et elle sappuie sur lexprience des premiers imprimeurs de la Renaissance.
Une classification fonde sur la forme des empattements
Lempattement est le pied de la lettre, la partie basse sur laquelle sappuie le caractre. On lappelle aussi le serif.
Si lempattement est triangulaire, cest une police Elzvir (exemple : Times, Garamond).
23/10/2014 BP Eminet, Dveloppement et formation Drupal, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilit, multilinguisme
http://www.p-interactif.com/spip.php?article2 4/14
Elzevirs empattement (serif) triangulaire
Si lempattement est filiforme, cest une police Didot (exemple : Bodoni).
Didots - empattement trs fin
Si lempattement est quadrangulaire, cest une police gyptienne (exemple : Glypha, Courrier).
gyptiennes - empattement mme
paisseur que le ft
Si lempattement est absent, cest une police Bton ou Antique (exemple : Arial, Verdana, Futura).
Bton ou Antique - pas
dempattement
Thibaudeau complte sa classification par lajout de 5 autres catgories pour des usages plus spcifiques
Les Scripts qui imitent une criture manuscrite.
Script - critures
23/10/2014 BP Eminet, Dveloppement et formation Drupal, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilit, multilinguisme
http://www.p-interactif.com/spip.php?article2 5/14
manuscrites
Les Anglaises avec des "pleins" et des "dlis".
Anglaises - Pleins et dlis
Les Gothiques qui imitent une criture calligraphie.
Gothiques
Les Vignettes qui ne sont pas des lettres mais des symboles (exemple : Windings).
Vignettes DingBats
Les Fantaisies qui vhiculent ou renforcent - par leur forme - un message particulier.
23/10/2014 BP Eminet, Dveloppement et formation Drupal, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilit, multilinguisme
http://www.p-interactif.com/spip.php?article2 6/14
Fantaisies
500 ans de culture typographique pour le document imprim
Pour les documents imprims on distingue deux types dinformations : celle qui est destine tre vu (un titre par exemple) et celle destine tre lu (le texte qui
est le contenu). En rgle gnrale on utilise une police sans empattement pour voir et une police avec empattement triangulaire pour lire. Il suffit, pour sen
convaincre, de regarder un magazine (lExpress par exemple) ou un journal (Libration). Les titres sont en caractres Antique (on dit aussi Bton) comme un
Helvetica ou un Futura. Le texte est en caractres Elzvir comme un Times ou un Garamond. Nos romans sont toujours imprims avec des caractres Elzvir.
Un caractre avec empattement triangulaire stale bien sur le papier et le recouvre correctement. Les polices de cette catgorie sont adaptes pour des
textes longs car elles ont peu de personnalit et ont tendance seffacer derrire le message. Cest dailleurs ce quon leur demande...
Un caractre sans empattement sort du papier. Les polices de cette catgorie sont adaptes pour des textes courts car elles ont de la personnalit et
accompagnent le message.
Usage et caractristiques pour les documents imprims
Polices avec empattements (on dit aussi serifs) adaptes pour les textes longs.
Elzvir - chaleureuse, romantique, classique, lgante.
Didot - rationnelle, sophistique mais assez froide.
gyptienne - pratique, lisible mais plus vulgaire.
Polices sans empattements adaptes pour les titres
Bton - antique - peu contraste, moderne mais monotone lire.
Les autres
Script - criture calligraphique en gnral peu lisible. A rserver pour des textes cours, composs en minuscules.
Anglaise - romantique - spcifique.
Gothique - dessin peu lisible - spcifique, composer en minuscule.
Vignette - caractres symboles destins agrmenter un texte.
Fantaisie - caractres dont la forme renforce le message.
En rsum et en schmatisant :
23/10/2014 BP Eminet, Dveloppement et formation Drupal, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilit, multilinguisme
http://www.p-interactif.com/spip.php?article2 7/14
Information destine tre vue (un titre), pas dempattement qui permet au caractre de jaillir du papier.
Information destine tre lue (un texte), empattement triangulaire qui permet au caractre de staler sur le papier.
Regardez un journal ou un magazine, les titres sont en Bton, les textes en Elzvir.
Il est noter que la tendance actuelle pour des brochures commerciales est plutt dutiliser des caractres btons dans lensemble du document.
Et sur un cran, il se passe quoi ?
Eh bien, pour lcran cest linverse. Les lettres avec empattements sont moins lisibles sur lcran que celles sans empattements.
Il y a deux raisons cela.
Dans le cas dun empattement - pour une force de corps (taille de caractre) petite - il y a plus de petits dtails qui ont tendance se noyer dans lcran
voire rentrer dedans.
La rsolution dun cran est beaucoup plus faible que celle du papier. Un cran a une rsolution de 72 pixels par pouce alors que la rsolution papier peut
aller de 300 points par pouce jusqu 2400. En consquence un caractre avec empattement produit des effets descalier sur sa base. Il est possible
danti-aliaser les caractres mais avec linconvnient de produire un effet de flou qui rend la lecture plus difficile.
Dans le cas de caractres de grande taille, largument de la rsolution ne joue plus. Il est ainsi possible dutiliser nimporte quelle forme de caractre en fonction
du message vhiculer (par exemple pour la page daccueil, une bannire, une publicit ou un titre). Voir plus bas.
Pour aller plus loin, il serait intressant de comparer les logiques de production de la lumire sur papier et sur cran. Sur papier il sagit dune logique
soustractive. La lumire mise correspond la diffrence entre la couleur blanche et la couleur absorbe. Sur cran, il sagit dune logique additive. La couleur
est la somme des trois couleurs mise par le tube de lcran. Par ailleurs dans le cas du papier, la source de lumire est extrieure et au dessus. Pour un cran, la
source de lumire est intrieure. Elle est situe derrire lcran - un peu comme un vitrail...
Pour rsumer, sur cran il vaut mieux utiliser des caractres sans empattements. Actuellement la plupart des sites modernes utilisent le Verdana pour le
texte. Dans une feuille de style, un Verdana de taille 11 points et un interlignage de 15 points donne un excellent rsultat lire. Par ailleurs un texte de couleur
grise trs fonce donne une meilleur lisibilit quun texte noir. Pour un titre, un Arial gras fait bien ressortir le message.
Il est indispensable de bien expliquer a au "client" sil dsire translater sa charte graphique papier - telle quelle - sur cran.
23/10/2014 BP Eminet, Dveloppement et formation Drupal, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilit, multilinguisme
http://www.p-interactif.com/spip.php?article2 8/14
Quelle typographie utiliser ?
Il est bien de passer un peu de temps tudier et tester : polices de caractres, taille, interlignage, couleur des caractres et de fond. Prendre une typographie
bton qui correspond bien au polices de caractres embarques dans lOS.
Exemple pour Windows : Arial, Verdana, Tahoma, Trebuchet MS
Lquivalent de lArial sur Macintosh est lHelvetica.
Taille des caractres
Base : 100%
20px : 1.27em
19px : 1.21em
18px : 1.15em
17px : 1.09em
16px : 1.03em
15px : 0.96em
14px : 0.88em
13px : 0.82em
12px : 0.77em
11px : 0.71em
10px : 0.65em
9px : 0.59em
Attention : en dessous de 0.71em le texte devient illisible en affichage des caractres plus petites - sur Internet Explorer
Conseil (?) pour de bons rsultats
Utiliser une police bton
Dans la CSS :
font-family : Trebuchet MS, Verdana, Arial, Helvetica, sans-serif ;
23/10/2014 BP Eminet, Dveloppement et formation Drupal, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilit, multilinguisme
http://www.p-interactif.com/spip.php?article2 9/14
font-size : 0.77em ; (12 px) cette taille est trs lgante
line-height : 1.4em ; permet douvrir linterlignage pour une lecture plus harmonieuse et plus confortable.
color : #505050 ; une couleur gris trs fonc donne de meilleurs rsultats quun noir franc.
background-color : #f0f0f0 ; une couleur gris trs clair pour le fond, rduit ce que lon appelle le noir typographique qui est un effet disgracieux et rtinien
produisant des effets griss entre les lignes dun texte.
LArial est un peu vulgaire et peut-tre un peu trop vu.
Le Tahoma peut produire, certaines tailles de caractres, des serrements de caractres un peu disgracieux.
Le Vernada est bien adapt au web, cela est d laspect carr des caractres.
Le Trebuchet MS est plus typ, mais les caractres sont plus travaills que le Verdana.
Une police assez moderne et "classieuse" : le Lucida
Lucida Sans Unicode pour Windows, Lucida Grande pour Macintosh
Dans la CSS :
font-family : Lucida Sans Unicode, Lucida Grande, Verdana, Trebuchet MS, Arial, Helvetica, sans-serif ;
Cest dailleurs la police que vous avez sous les yeux (font-size : 0.82em ; line-height : 1.4em ; color : #222222 ;)
Pour les textes de grande taille
Dans le cas de bannires par exemple une certaine licence est possible dans le choix des caractres et en particulier lusage dempattements ou pas.
Schmatiquement
Un caractre sans empattement sera plutt adapt pour faire ressortir la modernit, laspect technologique dun site.
Trs bonne alternative dans le cas de caractre Bton : le Century
Police Century
Un caractre avec empattement sera plutt adapt pour faire ressortir la stabilit et le ct srieux dun site.
Trs bonne alternative dans le cas de caractre Elzvir : le Garamond
23/10/2014 BP Eminet, Dveloppement et formation Drupal, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilit, multilinguisme
http://www.p-interactif.com/spip.php?article2 10/14
Police Garamond
Et pour les titres ?
Au dessus de 16 ou 18 points de taille de caractres, les caractres avec empattement peuvent tre utiliss.
Cest dailleurs " la mode". Regardez certains sites de journaux, comme Le Monde ou Libration) les caractres du texte sont sans empattement, les titres sont
avec. La police utilise est souvent du Georgia.
Il est ainsi intressant de constater que la "rgle (?)" de limpression :
Information voir (un titre) = pas dempattement
Information lire (un texte) = empattement
Cette rgle sinverse compltement sur le web. Je pense que cette "mode" a pris source lors de lexpansion des blogs qui ont quelque peu bouscul la
typographie dun site web.
Pour complter sur les styles
Un caractre gras a tendance agir sur la persistance rtinienne et nest utiliser que pour des titres ou des parties courtes dun texte.
Litalique est moins lisible sur cran, il ralentit la lecture et produit gnralement des effets descalier - il vaut mieux le remplacer par un changement de
couleur ou, encore mieux, un retrait.
Le soulign est proscrire, il est rserv aux liens hypertextes.
Alignement
gauche (fer gauche), le plus facile lire, il produit un effet douverture et de clart
droite (fer droite), informel, difficile lire , il demande des efforts au lecteur
Centr, formel, idal pour des invitations ou annonces mais plus fatiguant, utiliser pour des textes courts
23/10/2014 BP Eminet, Dveloppement et formation Drupal, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilit, multilinguisme
http://www.p-interactif.com/spip.php?article2 11/14
Majuscules / Minuscules
Les majuscules sont plus difficile lire (elles ralentissent la lecture). Il est prfrable dutiliser les minuscules. Comparer ainsi :
Et :
Si les majuscules sont utilises ( par exemple pour une barre de navigation ) accentuer les lettres.
Ainsi comparer :
LE MINISTRE CHAHUTE A LA CHAMBRE
Et :
LE MINISTRE CHAHUT LA CHAMBRE
ou bien :
LE PROJET A T DESIGN COMME IL CONVENAIT
Ou :
LE PROJET A ETE DESIGNE COMME IL CONVENAIT
Et :
LE PROJET A T DSIGN COMME IL CONVENAIT
Sagit-il de "design" ou de "dsignation" ?
Voulez-vous en savoir plus ?
Site de polices www.dafont.com
www.planete-typographie.com
Ecrire pour le web : www.redaction.be
Et en bonus
23/10/2014 BP Eminet, Dveloppement et formation Drupal, formation SPIP, plate-forme collaborative Claroline, Drupal, ergonomie, accessibilit, multilinguisme
http://www.p-interactif.com/spip.php?article2 12/14
Un gnrateur de "faux-texte" : www.lipsum.com, lire la description, cest difiant et instructif.
On appelle ce genre de texte du "bolo bolo".
Et cela pour "frimer" :
Mais cest quoi ce texte en latin ? Ben quoi ? cest pas du latin cest du bolo bolo...
Il existe mme une extension pour Firefox (voir Firefox Addon).
Installer lextension et menu Outil / Dummy lipsum.
noter que le texte descriptif existe en une grande varit de langues. Pour un site multi-lingue cest assez pratique. Lorsque je fais un site en arabe ou en russe
(je ne suis ni arabophone ni russophone), je puis utiliser le texte de la description du site lipsum.com dans cette langue. Je sais parfaitement quelle est la
traduction du texte que je place en "bolo bolo". Je ne risque donc pas de faire un impair ou une incivilit.
Cest tout de mme mieux que daller chercher un texte inconnu sur le site de lAmbassade de France au Caire ou Moscou non ?
| Articles les plus populaires |
Accessibilit |
Informations lgales |
Information diteur |
Espace priv
|
|
Ralisations rcentes :
Grard Juventin, Gologue, Aix-en-Provence - http://www.geologue-juventin.com/
Commune de Saint Alban de Montbel (Savoie) - http://www.stalbandemontbel.fr/
Antiquit Classique et Tardive (CNRS) - http://www.orient-mediterranee.com/spip.php?rubrique683
IHD (Institut de lHistoire du Droit) - http://www.ihd.cnrs.fr/
Islam Mdival (CNRS) - http://www.orient-mediterranee.com/spip.php?rubrique570
Share Share Share Share Share Share Share