QUELLE POLICE D'ECRITURE INTERNET CHOISIR POUR LA CRà‰ATION D' UN SITE INTERNET ?
à€ l'origine, une fonte de caractères (on dit communément fonte, et en anglais font) est une représentation d'un alphabet ayant un corps
(c'est-à - dire une taille) donné(e), et une graisse (normal, gras¦) donnée. Helvetica Bold Italic 12pt est une fonte, par exemple.
Une police de caractères, aussi appelée police d'écriture, rassemble l'ensemble des fontes d'une même famille. Helvetica, Arial ou Times sont des polices de caractères.
Il existe principalement deux types de polices d'écriture, les polices serif et celles, dites sans-serif. Les polices d'écriture serif ont de petits appendices en haut et en bas de la lettre. Elles sont idéales pour de gros blocs de texte, puisque ces empattements ont été pensés pour faciliter la distinction de chaque lettre. Les polices sans-serif sont uniquement représentées de barres et de lignes basiques. En typographie, ces polices standard sont principalement utilisées pour de courtes phrases, par exemple, rubriques [1]. Dans cet article, nous faisons la critique de trois études qui comparent la lisibilité, la rapidité de lecture efficace, l'à¢ge de l'internaute et l'image du site rendue par les polices d'écriture. Bien que la communication web soit très particulière, la majorité des sites ne prennent pas en compte les recommandations des experts, pour choisir la police d'écriture de leur page web. Trop de concepteurs web choisissent la police, en fonction de leurs goà»ts, sans se préoccuper de leurs lecteurs internautes. Nous espérons donc que cet article vous permettra de choisir judicieusement la bonne police d'écriture pour la création de votre site internet.
Plusieurs travaux ont étudié le choix des polices de caractères. Nous regroupons et synthétisons trois études intéressantes qui évaluent les polices de caractères les plus connues en ligne pour étudier la relation entre les polices et le temps de lecture, la lisibilité, et la perception du site par des internautes d'à¢ges différents.
Bernard et al. [2] ont testé une série de polices, en se concentrant sur la vitesse de lecture en fonction de l'exactitude et de la perception des participants, concernant la lisibilité de la police.
2.1.1 Périmètre et conditions de l'étude
Les auteurs font le constat suivant : De nos jours, les polices serif et sans-serif de taille 12 représentent les polices les plus connues et les plus utilisées sur les sites internet. C'est pourquoi l'étude étudie 12 polices serif et sans-serif, ainsi que des modèles décoratifs (autrement appelés ornementaux), également de taille 12. Ces 12 polices de caractères sont listées dans le Tableau 1.
Tableau 1. Les 12 polices de caractères étudiées, adaptées de [2]
|
Polices Sans- |
Polices Serif |
Polices |
|
|
serif |
d'ornement |
||
|
Agency FB |
Courrier |
BrAdley HAnd |
|
|
Arial |
Georgia |
Monotype Corsiva |
|
|
Comic Sans |
Goudy Old Style |
||
|
Tahoma |
Century |
||
|
Verdana |
Times New |
||
Le panel de cette étude est constitué de 22 participants de 20 à 40 ans. Leur l'à¢ge moyen est de 25 ans (écart type = 6 ans). 95 % des participants lisent régulièrement des informations sur un écran d'ordinateur. Les participants lisent 12 textes issus de Microsoft's Electronic Library ou autrement dit EncartaTM, et chaque texte utilise une des 12 polices de caractères étudiées. Ces textes sont de la même longueur (1032 mots en moyenne par texte), avec des marges horizontales fixées à 640 pixels.
La distance entre l'internaute et l'écran d'ordinateur est de 57 cm. Les participants sont invités à lire rapidement et correctement le plus de textes possibles. Les textes contiennent 15 mots, mal orthographiés et placés aléatoirement dans les dits textes. La note finale de lecture est calculée sur la base du pourcentage de mots mal orthographiés, détectés correctement par le participant. Le temps passé à lire les textes est chronométré.
2.1.2 Résultats
Les résultats indiquent que les polices de taille 12 sont bonnes pour l'efficacité de la lecture. Les polices de caractères, Courrier, Comic, Verdana, Georgia et Times sont plus lisibles que les polices décoratives (cf. Figure 1).
Figure 1. Lisibilité de police, adapté de [2]
L'étude considère le temps moyen de lecture de chaque police, sans s'intéresser à l'exactitude : La police Tahoma (police sans-serif) est lue plus rapidement que Corsiva (police de caractère d'ornement). Les résultats sont présentés en Figure 2.
Figure 2. Temps de lecture en secondes, adapté de [2]
Cette étude montre que les polices sans-serif d'ornement, Bradley et Corsiva, sont perà§ues comme ayant une forte personnalité et étant élégantes, tandis que Times New Roman est perà§ue comme étant un style professionnel "business-like". La police de caractères Comic est la police la plus "Jeune & Fun". En terme de préférence, les participants ont choisi les polices sans-serif : Arial, Verdana et Comic. Il est intéressant de voir que Times, la police par défaut de Word, est très fréquente sur le web et qu'elle se trouve en bas dans le classement des préférences des internautes.
Plusieurs études de polices d'écritures et de lisibilité ciblent seulement les lecteurs jeunes, et adultes d'à¢ge moyen. Pourtant, le facteur de l'à¢ge peut avoir des conséquences significatives sur la lecture. Bernard, Liao, et Mills [3] étudient quelles sont les meilleures polices de caractère pour la création d'un site internet pour des adultes plus à¢gés.
2.2.1 Périmètre et conditions de l'étude
Deux types de polices de caractères ont été étudiés, serif (Times New Roman et Georgia) et sans-serif (Arial et Verdana). Deux tailles de polices d'écritures ont été prises en compte, 12 et 14. Times et Arial ont été initialement développées pour l'imprimerie, tandis que Georgia et Verdana ont été spécifiquement développés pour optimiser la lecture sur écran d'ordinateur (Boyarski et al., [4]).
Tableau 2. Les 4 polices étudiées, adaptées de [3]
Polices sans-serif Polices serif
Arial Georgia
Verdana Times New Roman (Times)
27 participants sont invités à participer à cette étude ; ils sont à¢gés de 62 à 83 ans, pour un à¢ge moyen de 70 ans (écart type = 6 ans). 67 % des participants lisent régulièrement des pages sur un écran d'ordinateur.
2.2.2 Résultats
Les polices serif en 14 points sont préférées aux polices en 12 points, et sont également trouvées plus lisibles que les sans-serif en 14 points. Pour la création de site internet dont la cible est des lecteurs plus à¢gés, il est donc conseillé d'utiliser les polices de taille 14 pour présenter des informations en ligne. Serif permet
une lecture plus rapide, même si sans-serif est la police d'écriture internet préférée du panel étudié.
A notre connaissance, Bernard et al. [5] ont été parmi les premiers à examiner et recommander la meilleure police d'écriture internet pour les enfants. Cette étude est présentée maintenant.
2.3.1 Périmètre et conditions de l'étude Cette recherche prend en compte les polices
serif (Times et Courrier New) et sans-serif (Arial et Comic) à la taille de
12 et 14 points. Les participants de cette étude ont entre 9 et 11 ans, et
96 % d'entre eux ont une expérience de lecture d'un texte sur un écran d'ordinateur.
On leur demande de lire 8 textes avec 10 mots, mal orthographiés et positionnés aléatoirement dans le texte. Tous les textes sont des récits courts d'enfants, de Whootie Owl's Fairytales [6] (581 mots en moyenne par texte). Les marges horizontales des textes étudiés sont fixées à 640 pixels.
2.3.2 Résultats
La taille de police à 14 points est facile à lire, et préférée par les participants. Le fond Times est perà§u comme plus difficile à lire que les fonds Arial et Comic. Il en est de même pour l'attractivité. Times est moins attrayant que le fond Comic. Sans surprise, la police d'écriture internet Comic est le fond préféré des enfants. Comic est du reste la police de caractère préférée par les interviewés, pour les manuels scolaires.
En se basant sur les trois études susmentionnées [2,3,5], nous synthétisons dans le Tableau 3, les recommandations des meilleures polices d'écriture internet à utiliser pour la création . Cette recommandation est fonction de l'image perà§ue par l'internaute cible, en fonction de l'à¢ge de l'internaute.
Tableau 3. Synthèse des polices d'écriture internet préférées
|
Elégant |
Corsiva |
12 |
14 |
|
Comic |
12 |
14 |
|
|
Professionnel |
Times |
12 |
14 |
|
Forte |
Bradley |
12 |
14 |
|
Préférence |
Arial |
12 |
14 |
Jeunes et adultes préfèrent une police de taille 12, alors que les personnes à¢gées et les enfants seront plus à l'aise avec des polices d'écriture de 14. Enfin, pour le choix du type de police d'écriture pour les textes web, tout dépend de la personnalité souhaitée pour le site.
Peut-on utiliser n'importe quelle fonte sur un site Web?
La réponse à cette question est simple: en théorie oui, en pratique non pas du tout, mais à§a commence à être possible, et à§a sera bientà´t assez largement possible, sauf si à§a foire, donc plutà´t non mais en fait oui, faut voir.
Simple, non?
Pour dire les choses un peu plus clairement: les mécanismes pour utiliser une fonte personnalisée sur un site web existent. Ils utilisent la règle CSS 3. Ils sont de plus en plus répandus notamment grà¢ce à Google Web Fonts, mais tous les navigateurs ne l'implémentent pas de la même faà§on. Lisez l'article indiqué dans le précédent paragraphe pour les détails.
La logique de l'utilisation des polices de caractères sur un site web est la suivante: on va dire au navigateur d'utiliser une fonte qui est présente sur l'ordinateur de l'utilisateur. Ou plutà´t, on va lui demander d'utiliser une police de caractères précise en espérant qu'elle sera disponible sur l'ordinateur de l'utilisateur, et sinon d'en essayer une deuxième, voire une troisième et une quatrième, et enfin si rien ne va plus le navigateur devra utiliser une police «générique».
En CSS, cela se présente ainsi:
On appelle cette accumulation de polices par priorité décroissante une collection de polices ou collection de fontes (en anglais: font stack). Le nombre de polices indiquées est libre, il peut aller de zéro à plusieurs dizaines si on le souhaite — mais ne chargez pas trop vos collections!
Au sujet de la syntaxe utilisée: les différentes polices sont séparées par des virgules, et les noms de police sont entre guillemets droits (ou éventuellement entre apostrophes droites) lorsqu'ils contiennent des espaces.
Voici un exemple concret:
body {
}
Le navigateur va d'abord chercher à utiliser de l'Arial, puis de l'Helvetica si Arial n'est pas disponible, et enfin il va chercher quelle police correspond à la générique sans-serif.
Quelles sont les polices génériques? Eh bien, elles dépendent de la configuration du navigateur et du système d'exploitation.
Des collections de polices génériques
Le problème du mécanisme ci-dessus, c'est que si on choisit mal les polices de notre collection, on peut se retrouver avec deux polices très différentes chez deux utilisateurs différents. Il faut donc respecter trois principes:
1. Le design ne doit pas reposer sur les épaules d'une police en particulier. Vous devez tester vos pages en agrandissant la taille du
texte, et vous assurer que le rendu sera correct. Pas forcément idéal, mais correct (mise en page qui n'explose pas complètement, contenus qui ne sont pas cachés ou recouverts les uns par les autres).
La clé pour y arriver est de s'assurer que tous les éléments qui contiennent du texte ou presque sont extensibles en hauteur. N'utilisez la propriété height que lorsque c'est réellement nécessaire, et pas par simple commodité. ;)
2. Les polices placées dans une collection doivent être proches non seulement par leur style, mais aussi par leur taille, la largeur relative des caractères, etc. Sachez que pour un corps donné (par exemple font-size: 12px;), deux polices différentes peuvent avoir une taille variable et occuper un espace variable!
Ainsi, placer Arial et Verdana dans une même collection est une erreur: Verdana est plus haute et surtout beaucoup plus large. Par contre, on substitue facilement Arial à Trebuchet, bien que le style d'Arial soit sensiblement différent.
3. On utilisera en priorité des fontes populaires, répandues sur les ordinateurs des utilisateurs. Le plus souvent, il s'agira de polices installées par défaut avec les systèmes d'exploitation, ou installées avec certains logiciels populaires.
Détailler ce troisième et dernier principe serait fastidieux. Sachez juste que les fontes que nous vous proposons ci-dessous ont été établies grà¢ce aux critères suivants:
1. observation et comparaison, et tests lorsque c'était possible; 2. données tirées duCSS font sampler and survey(codestyle.org); 3. modeste expérience de l'auteur.
Elles ne sont sans doute pas parfaites, mais les voici:
Polices à empattements (serif)
font-family: "Times New Roman", Times, "Liberation Serif", FreeSerif, serif;
font-family: Georgia, "DejaVu Serif", Norasi, serif;
Polices sans empattements (sans-serif)
font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Luxi Sans", sans-serif;
font-family: Tahoma, Geneva, Kalimati, sans-serif;
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
font-family: Impact, "Arial Black", sans-serif;
Polices à chasse fixe (monospace)
font-family: "Courier New", Courier, "Liberation Mono", monospace;
font-family: Monaco, "DejaVu Sans Mono", "Lucida Console", "Andale Mono", monospace;
Cet article synthétise les polices d'écriture internet les plus faciles à lire et les plus appréciées, en fonction de l'à¢ge des internautes, et de leur perception de l'image transmise par le site, par rapport à la police de caractère du texte. Nous espérons que cet article aidera les designers web à choisir la meilleure police d'écriture internet en fonction de leur auditoire, lors de la création de site internet.
Rappel Chapitre 2 Les différents types de polices et leurs connotationsIl y a eu plusieurs tentatives de classification des polices de caractères. La plus utilisée est la classification Vox-Atypi, inventée en 1952 par Maximilien Vox. Elle se décompose en trois familles qui comprennent elles-mêmes plusieurs groupes suivant certains critères comme les empattements et leurs formes, la taille de l'Å“il, etc. Mais, malgré tous les efforts de son inventeur, une police peut très bien avoir les caractéristiques de plusieurs groupes.
Q ua nd l e s ut i l i s er ?
Exemple : Bodoni cette fin.
Par exemple : Futura
Par exemple, l'Omnia.
4.Les polices décoratives
A cette classification on peut ajouter la famille, très large, des polices décoratives, ou fantaisie.
Q ua nd l e s u t i l i s er ?
Surtout sur les documents de communication (affiche, texte court d'information, etc.).
A utiliser avec parcimonie, certaines sont très bien réalisées, mais d'autres font clairement amateur. Elles peuvent convenir pour des titres, mais ne doivent jamais être utilisées pour du texte courant. L'Å“il se fatiguerait très vite
5.En résumé :
6. Les bonnes pratiques
• Sur un document imprimé sérieux et long, utilisez une police moderne pour les titres et une police classique pour le texte.
• Sur un document qui sera lu à l'écran, privilégiez une police classique pour les titres, et une moderne pour le texte.
• Dans tous les documents imprimés et lus à l'écran, variez la taille des caractères (ex. : 14 pour les titres, 13 pour les sous-titre, 12 pour le texte).
• Dans les diaporamas et présentations projetés : la différence de taille des polices des niveaux de titres doit être plus marquée pour dynamiser l'information.
B o nà sa v o i r: l'utilisation de deux jeux de polices dans un document simplifie le repérage visuel, donc la lecture rapide.
