Chargement en cours

Synthèses rédigées par les étudiants du cours de Culture numérique

Le Comic Sans MS
Le Comic Sans MS

Web et typographie

En quoi le web permet-il le renouveau de la typographie et modifie-t-il son approche ?

Collet Emmanuelle, Girod Pénélope, Loreille Thomas (Licence Pro. ATC Webmestre)
Qu'est-ce que la typographie ? En quoi le web permet-il un renouveau de la typographie ? A travers cette étude, nous vous proposons d'aborder les problématiques de la typographie sur le web, et plus largement du webdesign. Après avoir présenté une brève histoire de la typographie, abordé les problématiques de l'intégration des typographies dans les documents pour le web, et les aspects juridiques et légaux liés à leur utilisation, nous nous intéresserons plus particulièrement au webdesign. Comment le webdesign permet-il d'assurer la lisibilité des contenus ? Quelles sont les règles à respecter ? Qu'en est-il des livres numériques ? Et, quelles sont les nouvelles tendances en matière de design sur le web ?
(déposé le 2014-12-11 14:20:45)

Introduction

La typographie est l'art de bien choisir et de bien utiliser les caractères. On désigne par typographie (souvent appelée "typo") les différents procédés de composition utilisant des caractères et des formes en relief, ainsi que l'art et la manière d'agencer les différents types de caractères dans un but esthétique et pratique. La typographie ne recouvre donc pas seulement les polices de caractères, mais aussi le design et la mise en page. Nous nous intéresserons ici à la typographie sur le web.

La typographie est très ancienne. Mais l'arrivée de l'Internet et du web a modifié notre approche de la mise en forme des contenus. En quoi le web permet-il un renouveau de la typographie et modifie-t-il notre manière de voir le design ? Quelles sont les nouvelles problématiques qui apparaissent avec la multiplication des contenus sur le web ? Quelles différences entre le papier et le numérique ?

Nous aborderons tout d'abord l'histoire de la typographie. Quand est-elle née et quelles sont les grandes évolutions typographiques à travers les siècles ? Ensuite, nous verrons comment sont représentés les caractères typographiques sur les machines. Et, comment intégrer des polices de caractères dans des documents pour le web. Puis, nous aborderons les aspects juridiques et légaux liés à la propriètarisation et à l'utilisation des polices. Nous étudierons ensuite en quoi le webdesign permet de faciliter la lisibilité des contenus, et nous nous intéresserons au cas particulier des livres numériques. Nous terminerons par l'étude des nouvelles tendances en matière de webdesign.

Web et typographie

Web et typographie

La typographie sur le web.
Inspiration Bit
Licence : Tous droits réservés -- Copyright

A\ Une histoire de la typographie :

La typographie est très ancienne. Elle est aussi ancienne que l'apparition de l'écriture. Nous avons donc plus de cinq siècles d'usage de la typographie derrière nous, mais qu'une petite vingtaine d'années d'expérience sur le web. La typographie, comme de nombreux domaines, fait l'objet d'une classification précise et rigoureuse.

I Typographie et impression : vers une scission des métiers

Tout au long des siècles, la typographie et le métier de typographe ont connu de grands changements, avec l'apparition de mouvements culturels, de la couleur dans les imprimés, ou encore de l'informatisation de la société, et de la numérisation des contenus.

1. A l'origine, typographe et imprimeur, un seul et même métier :

L’impression est apparue au VIème siècle, en Chine. Le métier de typographe, celui qui crée les caractères nécessaires à l’impression, est apparu au même moment. Pendant très longtemps et dans tous les pays ayant une culture de l’impression et de la typographie, les deux métiers sont liés. Cela s’explique par la nécessité de posséder des compétences alors rares. Il est nécessaire de savoir lire, écrire, dessiner, mais aussi posséder des capacités manuelles, allant de la gravure sur bois à la fonderie des caractères.

Caractères en plomb

Caractères en plomb

Utilisation de caractères en plomb pour les mises en page dans les journaux
Jean Jacques Lévèque
Licence : Licence inconnue -- D.R.

Si l’imprimerie a connu un essor considérable en Occident, après l’invention de la presse par Gutenberg, le choix de la typographie est alors laissé au client. Celui qui vient faire imprimer un livre ou un texte choisit sa propre typographie, qui est alors créée pour lui. Mais, tous les clients n’ont pas l’argent pour faire créer leur propre police de caractères. Cela est donc réservé à une clientèle plutôt aisée.

2. L’industrialisation et la séparation des métiers :

Ce n’est qu’à partir des années 1920 que les métiers de typographe et d'imprimeur se séparent, notamment aux États-Unis. Les typographes deviennent alors des conseillers. Leur rôle est avant tout de choisir la police correspondant à la demande du client, ou d’en dessiner une au besoin. À noter que les années 1920 furent aussi celles durant lesquelles de nombreux artistes s’emparèrent de la typographie. C’est une des seules périodes, pré-informatique, où le public peut découvrir la typographie comme étant visible et ayant un nouvel usage. Remarquons que les règles de typographie et de mise en page modernes sont créées à cette époque, principalement à l’école Allemande du Bauhaus.

Dans les années 1940, aux États-Unis, la mise en page est transformée, notamment par la prise en compte des espaces blancs dans la composition des pages. À partir des années 1950, la typographie et la mise en page évoluent pour intégrer les images, avec l’émergence des magazines en couleur. Et les mouvements culturels, tels que les hippies, favoriseront l'apparition de nouvelles typographies.

Typographie hippie

Typographie hippie

Exemple de typographie utilisée pendant la période hippie
Zeta Prints
Licence : Tous droits réservés -- Copyright

3. L'informatisation d'aujourd'hui :

L'arrivée des logiciels de mise en page et de traitement de texte, ainsi que du web, marque la première confrontation entre les lecteurs et la typographie, dont ils n’étaient auparavant que les spectateurs plus ou moins conscients. Avec l’essor de l’informatique personnelle, chacun peut utiliser un traitement de texte qui propose un grand nombre de polices. Les utilisateurs peuvent également changer la typographie de leur texte, alors que le choix était jusqu’alors impossible sur les machines à écrire. En effet, tout au long du XXème siècle, la qualité des typographies et de l’impression d’un document personnel était étroitement liées au prix de la machine à écrire. Ainsi, les particuliers n’avaient pas la même qualité de rendu que les professionnels.

II Les classifications typographiques :

Comme dans de nombreux domaines, la typographie fait l'objet de classifications. Il existe deux grandes classifications : la classification Thibaudeau et la classification Vox-Atypi.

La classification Thibaudeau a été élaborée, en 1921, par Francis Thibaudeau. Elle permet de classer les polices de caractères en quatre grandes familles, rassemblées en fonction de la forme des empattements, c’est-à-dire des petites extensions qui forment la terminaison des caractères.

Classification Thibaudeau

Classification Thibaudeau

Description de la classification Thibaudeau
Love Communication
Licence : Licence inconnue -- D.R.

Bien que la classification Thibaudeau permette une catégorisation de toutes les typographies existantes, Maximilien Vox la trouve assez limitée, et il décide donc de créer une nouvelle classification plus complète : la classification Vox-Atypi. La classification Vox-Atypi a été élaborée, en 1952, par le typographe Maximilien Vox. Puis, dix ans après, c'est-à-dire en 1962, elle a été adoptée par l'Association Typographie Internationale (ATypI). 

Maximilien Vox

Maximilien Vox

Maximilien Vox (de son vrai nom Samuel William Théodore Monod)
Henri Thyssens
Licence : Tous droits réservés -- Copyright

La classification Vox-Atypi définit douze grandes familles typographiques, classées en quatre grandes tendances typographiques. Cette classification, contrairement à la classification Thibaudeau, ne se base pas sur la forme des caractères, mais sur leur contexte historico-culturel. En effet, on n'analyse pas un caractères selon sa forme, mais selon l'époque, le contexte historique et culturel qui l'a vu naître.

Classification Vox-Atypi

Classification Vox-Atypi

Listes de typographies classées selon la classification Vox-Atypi
Inconnu
Licence : Licence inconnue -- D.R.

Notons toutefois qu'un caractère donné ne peut que très rarement être classé dans telle ou telle catégorie. Il emprunte généralement des caractéristiques à plusieurs catégories.

B\ Représentation des caractères typographiques :

Lorsque l'on parle de typographie ou de polices de caractères, on imagine les glyphes des caractères à proprement parler. Mais qu'en est-il pour les machines électroniques ? Comment les caractères sont-ils représentés sur les machines ? Comment créer et intégrer une police de caractères sur un système ? Quels sont les différents formats de polices ?

I La représentation des caractères sur une machine :

Il est intéressant de prendre conscience de la manière dont sont représentés les caractères sur une machine. Les machines ne manipulent pas directement les glyphes tel que nous le faisons. Elles ne les reconnaissent pas, car ce sont des systèmes électroniques. L'ordinateur est une grosse machine à calculer : tout ce qu'il sait faire, c'est effectuer des calculs sur des nombres. Il est incapable de comprendre un texte. Il manipule donc des codes que l'on a donnés à chacune des lettres des différentes langues. Par conséquent, il est nécessaire de faire un choix. Par quel code telle lettre sera-t-elle représentée ? Quel code donner à tel signe de ponctuation ?

1. Le code ASCII :

Il existe différents codes pour représenter les caractères. Un des plus connus est le code ASCII (American Standard Code for Information Interchange). Le code ASCII définit de manière précise une correspondance entre un nombre et un caractère (lettre minuscule, lettre majuscule, signe de ponctuation...). Par exemple, la lettre "a" sera représentée par le nombre 97. Cependant, le code ASCII ne donne aucun code pour les accents et tous les autres symboles utilisés dans des langues autres que l'anglais.

2. Le code Unicode :

Pour résoudre ce problème, on a créé le code Unicode. Unicode permet l'échange de textes écrits dans des langues différentes à l'échelle mondiale. Unicode a été développé par le Consortium Unicode. C'est un standard informatique qui a pour but de permettre le codage d'un texte, en donnant à un caractère de n'importe quel système d'écriture un nom et un code unique, quel que soit le système d'exploitation ou le logiciel utilisé. Unicode comporte plus de 109 000 caractères, couvrant 93 écritures. Unicode se présente sous la forme de tableaux de codes.

Table Unicode

Table Unicode

Extrait d'une table Unicode (en hexadécimal) parmi d'autres.
Tama Software
Licence : Licence inconnue -- D.R.

Par exemple, le code de la lettre A est 0041 (en hexadécimal) et 65 (en décimal).

La dernière version de Unicode, Unicode 7.0, a été publiée le 16 juin 2014.

Par ailleurs, Unicode a aussi permis de remplacer l'utilisation de pages de code nationales. Une page de code permet de donner un code à chaque caractère d'une langue, ou de langues proches. Mais, un même code pouvait renvoyer à plusieurs caractères, et cela posait donc de nombreux problèmes, et des incompatibilités entre des documents de langues différentes, ou de systèmes informatiques différents. En effet, par exemple, pour un signe monétaire, le même texte qui autorise une dépense en dollars, aux États-Unis, une fois transmis au Royaume-Uni autorisera la même dépense en livres sterling, sans que la valeur de la dépense n'ait été changée.

À l'heure actuelle, tous les systèmes d'écriture ne sont pas encore pris en charge dans Unicode. En effet, cela demande un travail de documentation important, notamment pour des caractères rares, ou pour des systèmes d'écriture peu connus, ou disparus.

Toutefois, les systèmes les plus utilisés dans le monde sont représentés dans Unicode, ainsi que les règles concernant la sémantique des caractères, leurs compositions et la manière de combiner les différents systèmes entre eux (par exemple, pour l'insertion d'un système d'écriture se lisant de droite à gauche dans un système se lisant de gauche à droite).

3. UTF-8 :

Dans Unicode, les caractères sont généralement codés sur 2 octets, c'est-à-dire sur 16 bits, alors que dans le code ASCII, ils ne sont codés que sur un seul octet. Un texte codé en Unicode prendra donc deux fois plus de place en mémoire qu'un texte codé en ASCII, alors que la plupart des caractères utilisés dans la langue française n'ont pas besoin d'être codés sur 2 octets. Pour contourner ce problème de gaspillage de la mémoire, on a créé l'UTF-8. Un texte en UTF-8 est écrit en ASCII et dès que l'on a besoin d'un caractère codé en Unicode, on ajoute un symbole pour l'indiquer.

4. Et les pages web dans tout ça ? :

Pour intégrer des caractères, qui ne sont pas pris en charge par le code ASCII, dans une page web, il existe trois solutions différentes. La première solution consiste à utiliser des entités HTML. Par exemple, au lieu d'écrire la lettre "É", on écrira le code & Eacute;. La seconde solution est d'encoder son fichier, dans l’éditeur de texte, en UTF-8. Et la troisième solution consiste à ajouter une ligne dans l'en-tête du fichier indiquant que le contenu est en UTF-8.

II Comment créer une typographie personnalisée ? :

Les polices intégrées nativement dans les Systèmes d’Exploitation d’aujourd’hui, ainsi que celles proposées par les distributeurs, sont très nombreuses et variées. Cependant, dans certains cas, on peut vouloir utiliser une police fantaisiste et particulière, n'existant pas sur le marché.

Dans ce cas, comment les utilisateurs peuvent-ils créer leur propre typographie personnalisée et ainsi se détacher de celles proposées par les distributeurs ?

De nombreux logiciels permettent de créer une police, par exemple, à partir d'une écriture manuscrite ou de dessins numériques. La première étape dans la création de sa police consiste à en réaliser le gabarit. Un gabarit est un document qui se présente sous la forme d’une grille. Chaque case de la grille correspond à un caractère de l’alphabet que l’on souhaite transcrire. Ainsi, retrouve-t-on les lettres, chiffres, caractères spéciaux et propres à chaque alphabet, mais aussi la signature. Si une case du gabarit n’est pas remplie, alors le caractère n’apparaîtra pas dans la police créée. Il est donc recommandé de remplir toutes les cases du gabarit, permettant ainsi d'utiliser sa police de caractères dans plusieurs langues.

Gabarit de police

Gabarit de police

Exemple de gabarit de police
Jean-Baptiste Baud
Licence : Tous droits réservés -- Copyright

Les gabarits sont également dotés de repères afin de permettre un dimensionnement cohérent des caractères. Cela permet ainsi de ne pas avoir des lettres minuscules plus grandes que des lettres majuscules, par exemple.

Une fois le gabarit complété avec les différents caractères, il doit être numérisé et enregistré en tant qu'image. Puis, l'image devra être envoyée à un service de création de polices, tel que YourFonts. Le service de création de polices analyse le gabarit et affiche un aperçu des caractères. Si l'aperçu est satisfaisant, il est alors possible de télécharger la police, et de l'installer sur le Système d'Exploitation de la machine.

III Les différents formats de polices :

Il existe cinq grands formats de polices. Notons que les formats de polices existaient bien avant l'arrivée du web.

La pluralité des formats utilisés sur le web trouve son origine dans un long processus de standardisation. En effet, les navigateurs web ont mis du temps à se mettre d’accord sur le format à utiliser, et ils n’ont trouvé un compromis qu’en 2009.

Les navigateurs ne reconnaissent pas tous les formats. Les formats les plus courants sont TrueType Font (TTF) ou OpenType Font (OTF), leurs formats compressés Web Open Font Format (WOFF) ou Embedded OpenType (EOT), et Scalable Vector Graphics Font (SVG).

Les formats TTF, ou TrueType Font, et OTF, ou OpenType Font, sont des formats utilisés couramment hors du web, mais qui ne sont pas reconnus par Internet Explorer. Le format TrueType Font a été créé à la fin des années 1980, par Apple, et le format OpenType Font, qui est une évolution de TTF, a été créé à la fin des années 1990, par Adobe et Microsoft.

Le format WOFF, ou Web Open Font Format, est un format ouvert. Il est aujourd'hui, dans sa nouvelle version, reconnu par tous les navigateurs du marché.

Le format EOT, ou Embedded OpenType, est utilisé seulement par Internet Explorer et n’est donc reconnu par aucun autre navigateur du marché.

Le format SVG, ou Scalable Vector Graphics, créé à la fin des années 1990, est un format d’image vectorielle standard du W3C. Cependant, il n'est pas reconnu par Internet Explorer et Firefox, et est déprécié par Chrome et Chromium.

Il est donc recommandé de “servir” sa police dans un maximum de formats, pour éviter les problèmes de compatibilité. En effet, en fonction des navigateurs, modernes ou récents, de bureau ou mobiles, les polices ne sont pas interprétées de la même manière. Certains formats, acceptés par Firefox ou Chrome, ne seront pas reconnus par la version 9 de Internet Explorer, par exemple.

Support des formats de polices par les navigateurs du marché

Support des formats de polices par les navigateurs du marché

Les différents navigateurs du marché ne supportent pas tous les mêmes formats de polices.

C\ Intégration des polices dans des documents web :

Il existe de nombreuses manières d'intégrer des polices de caractères dans des sites web. Par ailleurs, les distributeurs de polices, présents en masse sur le web, permettent aujourd'hui de revisiter les typographies utilisées et offrent ainsi aux webdesigners de nouvelles perspectives.

I Comment intégrer les polices de caractères dans un site web ? :

L'intégration d'une police de caractères n'est pas réalisée de la même manière, selon qu'il s'agisse d'une police standard ou d'une police personnalisée.

1. Utilisation du CSS pour une police standard :

Les polices standards, c’est-à-dire celles qui sont nativement reconnues et intégrées dans les Systèmes d’Exploitation, sont intégrées par le biais des propriétés de type font- définies par la norme CSS2. Il existe de nombreuses propriétés de type font permettant de modifier la typographie utilisée. Une des propriétés principales est la propriété font-family qui permet de déclarer la police de caractères à utiliser.

2. Utilisation du CSS pour une police personnalisée :

Pendant de nombreuses années, les webmestres ont déploré le nombre restreint de polices utilisables pour un site web.

Grâce à l’annotation @font-face, on peut, à présent, utiliser des polices de caractères exotiques et laisser cours à son inventivité sur le web. La règle @font-face est apparue pour la première fois en 1998, dans la norme CSS2. Lors du chargement de la page, la police était téléchargée et installée sur le système de l’internaute. Cependant, cette règle a été assez peu implémentée par les navigateurs, et seul Internet Explorer permettait son utilisation. Deux problèmes majeurs étaient rencontrés. D’une part, la grande majorité des polices proposées étaient protégées par le droit d’auteur et ne pouvaient donc pas être redistribuées. D’autre part, les polices rajoutent un poids non négligeable, pouvant atteindre plusieurs centaines de kilo-octets. Les développeurs de navigateurs étant peu intéressés par la résolution de ces problèmes, la révision de CSS2, CSS2.1, supprima cette annotation.

En réalité, l’annotation n’a pas été supprimée définitivement et figure dans la dernière version de CSS, CSS3, publiée en 2007. Les principaux navigateurs du marché implémentent aujourd’hui l’annotation @font-face. Toutefois, tous les navigateurs n’implémentent pas cette annotation de la même manière. Firefox et Opera semblent l’implémenter sans problèmes notables, ce qui n’est pas le cas pour Internet Explorer. Parfois, certains caractères ne sont pas reconnus.

Mettre des polices de caractères atypiques avec font-face - Tutoriel CSS
Mettre des polices de caractères atypiques avec font-face - Tutoriel CSS (Vidéo)

Vidéo

Tutoriel d'utilisation de la règle @font-face pour l'intégration de polices non-standards dans des documents web.
Yann Bidon
Licence : YouTube Standard Licence

3. Les solutions anciennes :

Avant l'apparition de la règle @font-face, des solutions existaient pour intégrer des polices personnalisées à des pages web. Aujourd'hui, ces solutions sont devenues complètement obsolètes et ne sont plus du tout utilisées, sauf dans de très rares cas très particuliers où il n'est pas possible ou souhaité de faire autrement.

Un des moyens les plus simples pour être sûr du rendu visuel était l’utilisation d’une image. Ainsi, le contenu n'était plus considéré comme du texte, mais comme une image. Mais, cette façon de faire posait des problèmes en termes d'accessibilité.

Il était également possible de générer des images côté serveur, en utilisant un langage de programmation, comme PHP ou Java, ce qui nécessitait donc d'avoir des connaissances en programmation.

Une autre solution consistait en l’utilisation d’un utilitaire en JavaScript, comme TypeFace.js. Ces utilitaires permettent d’émuler le comportement des règles @font-face. Toutefois, ils présentent des limites assez importantes, comme une mauvaise reconnaissance des caractères accentués, ou une impossibilité d’afficher du texte sur plusieurs lignes.

Aujourd'hui, ces trois solutions n'ont plus lieu d'être utilisées et appartiennent désormais au passé.

II Les distributeurs de polices :

Un nouveau marché s'est développé sur le web. Il s'agit du marché des distributeurs de polices. Les distributeurs de polices fournissent, gratuitement ou non, un très grand nombre de polices de caractères, plus ou moins classiques, et utilisables sur le web.

1. Tour d’horizon des principaux distributeurs de polices sur le web :

Il existe de nombreux distributeurs de polices sur Internet. Deux des distributeurs les plus connus et les plus utilisés sont GoogleFonts et FontSquirrel. Les webdesigners recourent très souvent à ce genre de services. En effet, les distributeurs proposent un très grand nombre de polices différentes et, pour la quasi-majorité d'entre elles, gratuites.

Font Squirrel

Font Squirrel

Page d'accueil du distributeur FontSquirrel
Font Squirrel
Licence : Tous droits réservés -- Copyright

2. Comment intégrer une police d’un distributeur dans un site web ? :

Il existe deux manières d'intégrer une police de caractères d'un distributeur dans son site web. La police peut être soit téléchargée, et ses sources fournies avec celles du site, soit être importée des serveurs du distributeur.

Le cas du téléchargement de polices :

Des services, tels que FontSquirrel, permettent de télécharger une police dans un format spécifique (EOT, TTF, OTF, SVG, ou WOFF). FontSquirrel permet également de générer des fichiers dans tel ou tel format à partir d’un format donné. Ensuite, le designer enregistre les fichiers sources et y fait référence dans la feuille de style CSS.

Mais, une bonne police doit exister dans différents styles (normal, italique, gras, gras italique). Il ne suffit pas de grossir le trait de la police pour qu’elle soit en gras, ni d’incliner les lettres pour qu’elle soit italique. Il est donc nécessaire de récupérer la police dans chaque style. Cependant, les services d’utilisation de web fonts donnent un nom différent à chaque type de police. Ainsi, on obtiendra MaPolice, MaPoliceGras, MaPoliceItalique. Et, il est impossible pour le navigateur de savoir que MaPoliceGras et la version grasse de MaPolice, et MaPoliceItalique est la version italique de MaPolice. Pour ce faire, il est donc nécessaire de lier les différents styles entre eux.

Le cas de l’import de polices 

Le service GoogleFonts a été crée en 2010. Dénommé Google WebFonts, jusqu’en juin 2013, ce service propose plus de 200 typographies différentes, ce qui satisfera tous les web designers, y compris les plus exigeants.

Contrairement à des sites tels que FontSquirrel, le service principal de Google n’est pas le téléchargement de polices (même si cela est possible), mais son import. Lorsque l’utilisateur souhaite télécharger une police depuis Google Fonts, le message “You do not need to download the font to use it on your webpages. Instead, refer to the "Use" section.” (“Vous n’avez pas besoin de télécharger la police pour l’utiliser dans vos pages web. Consultez la rubrique ‘Utilisation’”) apparaît. Au lieu de télécharger des fichiers de polices et d’y faire référence depuis sa feuille de styles CSS, Google propose l’import de polices. Ainsi, les polices ne se trouvent pas sur le serveur où est hébergé le site web, mais directement sur les serveurs de Google. Lorsqu’un internaute consulte le site, le serveur web envoie une requête aux serveurs de Google qui renvoient le code source correspondant.

Par ailleurs, à travers ce service, Google en profite pour renforcer son traçage des internautes dans la mesure où il permet de voir le nombre de fois que la police a été importée et dans quels pays majoritairement.

Statistiques générées par Google

Statistiques générées par Google

Statistiques générées par Google Fonts concernant les imports de la police Roboto
Google
Licence : Tous droits réservés -- Copyright

Mais, l'import de polices pose de nombreux problèmes en termes de maintenabilité, d’évolutivité, et même d’accessibilité des sites web : que faire si Google décide de fermer son service de distribution de polices ?

D\ Aspects juridiques et légaux :

Comme tous les travaux d’artistes, un auteur d’une police de caractères doit être rémunéré pour son travail. En effet, la création d’une police est un travail important et loin d’être trivial. Pour exemple, Apple a payé une grosse somme d’argent pour la création de sa police Garamond. De la même manière, Microsoft prend un soin particulier à faire créer des polices de qualité pour ses produits logiciels et applicatifs. Il existe bel et bien un marché de la typographie. Les typographies se vendent et s’achètent, et certaines pour des sommes très élevées. De nombreuses entreprises, telles que Adobe, Monotype ou encore Linotype, vendent des services dans le domaine de la création de la typographie. Un grand nombre d’artistes vendent aussi directement leurs créations, comme Ray Larabie.

I Comment devenir propriétaire d’une police que l’on a créée ? :

En France, les polices de caractères sont protégées par le droit de la propriété intellectuelle. La propriété intellectuelle se compose de deux branches distinctes : la propriété littéraire et artistique, et la propriété industrielle.

1. La propriété littéraire et artistique : le droit d’auteur

Pour bénéficier de la protection du droit d’auteur, la police de caractères, considérée comme une œuvre de l’esprit, doit être suffisamment originale du fait des choix faits par l’auteur en termes de la calligraphie, et du style adopté. Le droit d’auteur est un droit de propriété incorporelle exclusif et opposable à tous. C’est un droit obtenu sans formalités spécifiques. Il n’y a donc aucune obligation de dépôt de la police.

Le droit d’auteur est composé de deux droits : un droit moral et un droit patrimonial.

Le droit moral est composé d’un droit de divulgation (porter l’œuvre à la connaissance du public), d’un droit à la paternité (être reconnu comme étant le créateur de l’œuvre), d’un droit au respect de l’œuvre et d’un droit de repentir (retirer l’œuvre du marché). Le droit moral est perpétuel et imprescriptible.

Le droit patrimonial est composé d’un droit d’exploitation (de représentation et de reproduction), et d’un droit de suite (conservation des droits d’auteur même si l’œuvre est vendue). Le droit patrimonial court toute la vie de l’auteur et 70 ans au-delà pour ses ayants droit, avant de tomber dans le domaine public.

La violation du droit d’auteur expose son auteur à des poursuites pour délit de contrefaçon. La contrefaçon est une pratique anticoncurrentielle, en violation d’un droit de propriété intellectuelle, et une tromperie.

À titre d'exemple de violation de droit d'auteur, on peut citer le cas de l'Hadopi. Un des logos présentés par la Haute Autorité pour la Diffusion des Œuvres et la Protection des Droits sur Internet (l'Hadopi), en 2010, utilisait une police de caractères réservée à France Télécom. Il s'agissait de la police "Bienvenue", créée par le typographe Jean-François Perez pour l'entreprise France Télécom. Donc pour pouvoir utiliser cette police de caractères, il est nécessaire d'obtenir l'accord du typographe et de France Télécom. Mais, Hadopi n'avait pas demandé leur accord. L'agence de communication qui avait esquissé ce logo avait en fait commis une erreur, et il n'aurait jamais du être présenté comme une version définitive. "À la suite d'une erreur de manipulation informatique, indique l'agenceune esquisse de logotype qui avait été écartée lors des phases traditionnelles de vérification de similitude a été malencontreusement présentée comme solution graphique définitive.". L'Hadopi a très vite corrigé cette erreur en modifiant son logo par l'utilisation d'une autre typographie.    

Violation de droits d'auteur par Hadopi

Violation de droits d'auteur par Hadopi

En haut : le logo officiel de Hadopi. En bas : le logo utilisant la police réservée à France Télécom.

2. La propriété industrielle : le droit des marques, dessins et modèles

D’après la loi du 14 juillet 1909, le droit des marques, dessins et modèles protège "tout dessin nouveau, toute forme plastique nouvelle, tout objet industriel qui se différencie de ses similaires, soit par une configuration distincte et reconnaissable lui conférant un caractère de nouveauté, soit par un ou plusieurs effets extérieurs lui donnant une physionomie propre et nouvelle". Pour pouvoir bénéficier de la protection au titre du droit des marques, dessins et modèles, une police doit répondre à certains critères. Elle doit être nouvelle avec des traits distincts et reconnaissables, être apparente, et sa forme ne doit pas découler directement de sa fonction. La police doit absolument être nouvelle, en ce sens qu'il doit y avoir une absence d'antériorité. Par ailleurs, la typographie et les dessins de caractères devront faire l’objet d’un dépôt auprès de l’INPI, Institut National de la Propriété Industrielle, pour pouvoir être protégés.

La violation du droit des marques, dessins et modèles expose son auteur à des poursuites pour délit de contrefaçon, voire de concurrence déloyale. La durée de la protection au titre de ce droit est de cinq ans.

Notice de dépot

Notice de dépot

Notice du dépôt à l'INPI d'une police de caractères par la Française des Jeux

II L'open source :

1. Les polices open source : la licence SIL

La licence SIL, ou Open Font License (OFL), a été créée le 7 septembre 2005. Le but de cette licence est de promouvoir, à travers le monde, la mise en place de projets collaboratifs concernant les polices de caractères, d’aider à la création de polices dans les milieux académiques, notamment. Mais, l’objectif principal de la licence SIL est de fournir un cadre libre et ouvert dans lequel les polices sont partagées et améliorées collectivement.

Les polices placées sous la licence SIL peuvent être utilisées, étudiées, modifiées et redistribuées librement, dès lors qu’elles ne font pas l’objet d’une vente commerciale. Les polices de caractères peuvent être fournies, redistribuées, vendues, incorporées avec n’importe quel logiciel. Cependant, les polices de caractères placées sous licence SIL doivent obligatoirement rester sous cette licence. Toute modification de la police devra être placée sous les mêmes termes que la licence d’origine. C'est une licence virale qui s'applique donc aux œuvres dérivées. Une personne qui utilisé une police SIL dans ses documents reste détentrice des droits d’auteur sur ces documents. Il est tout à fait possible d’utiliser des polices placées sous licence SIL dans des pages web.

Licence SIL

Licence SIL

Logo de la licence SIL
SIL International
Licence : Tous droits réservés -- Copyright

Il existe aussi la licence Apache, éditée par la société Apache Software Foundation. La licence Apache est une licence de logiciel libre et open source. Elle permet d'autoriser la modification et la distribution des sources sous quelque forme que ce soit (libre ou propriétaire, gratuit ou commercial) et oblige le maintien du copyright lors de toutes les modifications effectuées.

2. Les Google Webfonts sont-elles open source ? :

D’un point de vue juridique, les Google Webfonts sont effectivement open source. Mais, du point de vue de leur conception, on ne peut pas réellement parler d’open source. L’open source ne concerne pas seulement l’aspect juridique, mais a également une philosophie propre. Cette philosophie consiste en la recherche de la qualité, la coopération dans le cadre d’une communauté de personnes. Or, la très grande majorité des polices proposées par Google sont des polices qui ont été développées par des personnes, travaillant seules, et dont le travail ne fait pas l'objet d'une supervision par un comité de qualité. Il n'y a donc pas de recherche de qualité dans la création de ces typographies, et c'est la principale raison pour laquelle on ne peut pas réellement parler d'open source. Le but premier de Google est de proposer le plus grand nombre possible de polices, sans se soucier de proposer des polices qui soient toutes de qualité.

III Comment utiliser une police légalement ? :

D’après les éléments exposés précédemment, on comprend qu'il n'est pas possible d' utiliser une police de caractères comme on veut.

Si la typographie est utilisée dans une image, une animation Flash, ou encore un document PDF, il est obligatoire de s’acquitter du paiement de la licence de la police. En revanche, si la police est utilisée dans une page web, il n’y a aucune licence à payer. En effet, en utilisant la police, le webdesigner manifeste seulement sont souhait que cette police soit utilisée, mais c’est sur l’ordinateur de l’internaute qu’elle sera effectivement utilisée (si elle y est présente).

Toutefois, il est indispensable de lire les licences de polices avant de les utiliser, et de prendre absolument connaissance des conditions et restrictions d’utilisation pour ne pas enfreindre la loi, et s’exposer, de fait, à des poursuites judiciaires, de la part des auteurs des polices.

E\ Webdesign et typographie :

Contrairement à ce que beaucoup d'internautes pensent, le design n'a pas pour finalité d'être beau. Son but premier n'est pas de faire d'une interface quelque chose de "beau", mais bien de faire passer un message et d'assurer la lisibilité du contenu, ce qui est fondamental. Un contenu dont la lisibilité n'est pas assurée ne sera pas lu.

D'après une étude menée par l'agence web 13Pixels, 40% des internautes partent d'un site s'il met plus de 30 secondes à s'afficher. 70% des internautes lisent les listes à puce, contre seulement 55% lorsqu'elles ne sont pas marquées. 0,05 secondes suffisent pour que les internautes se forgent une opinion concernant un site. 88% des internautes ne reviendront pas sur un site s'ils y ont eu une mauvaise expérience utilisateur. Ces statistiques montrent que le design et l'ergonomie d'un site ne doivent absolument pas être négligés.

I Qu'appelle-t-on la "lisibilité" ? :

Le métier du webdesigner consiste à réaliser une mise en page qui réponde aux problématiques de communication de son client. Pour qu'un message soit compris, il doit pouvoir être décodé par les internautes. La lisibilité d'un contenu n'est donc pas quelque chose d'optionnel, mais bien une vraie nécessité.

La lisibilité comprend deux notions distinctes : la "legibility" et la "readability".

La "legibility" caractérise ce qui est déchiffrable par notre œil. Cela concerne donc notre capacité à pouvoir distinguer les lettres entre elles. On s'intéresse à l'aisance que l'on a, à la lecture, à distinguer la forme des lettres. La "legibility" d'un contenu dépend notamment d'une hauteur d'x importante (hauteur du corps de la lettre), d'un grand contrepoinçon, c'est-à-dire l'espace blanc à l'intérieur des lettres, et une différenciation suffisante des lettres entre elles.

Afin d'évaluer la différenciation des lettres dans un contexte typographique, les webdesigners utilisent ce que l'on appelle des panagrammes. Les panagrammes sont des phrases qui contiennent toutes les lettres de l'alphabet et qui permettent donc de visualiser la manière dont les lettres sont représentées les unes par rapport aux autres. Un des plus célèbres panagrammes français est "Portez ce vieux whisky du juge blond qui fume". Il en existe même une version longue, qui inclut les lettres accentuées, "Portez ce vieux whisky au juge blond qui fume sur son île intérieure, à côté de l'alcôve ovoïde, où les bûches se consument dans l'âtre, ce qui lui permet de penser à la cænogénèse de l'être dont il est question dans la cause ambiguë entendue à Moÿ, dans un capharnaüm qui, pense-t-il, diminue çà et là la qualité de son œuvre." De manière moins poétique mais peut-être plus pragmatique, Jon Tan propose le panagramme "aegh! iIl1 0O,". Cette expression permet de vérifier que l'on peut facilement et sans erreur différencier un "I" (i majuscule) d'un "l" (L minuscule), un "l" (L minuscule) et un 1 (chiffre 1) ou un "o" et un "0" (zéro). En effet, certaines polices de caractères ne permettent pas de faire facilement cette distinction et posent donc des problèmes de lisibilité.

Lisibilité typographique

Lisibilité typographique

Exemple de différenciation typographique.
Thibault Mahe
Licence : Tous droits réservés -- Copyright

Afin d'assurer la "lisibilité" d'un contenu, la "legibility" ne suffit pas. En effet, il est aussi nécessaire que le contenu soit présenté dans une harmonie telle qu'elle permette d'assurer une bonne compréhension des contenus. Cette notion concerne donc la mise en page des contenus et le design adopté. C'est ce que l'on appelle la "readability".

Site illisible

Site illisible

Un des sites les plus illisibles du net.
Lin Cars
Licence : Tous droits réservés -- Copyright

II Le webdesign au service de la lisibilité :

Plusieurs notions doivent être respectées pour assurer la "readability" d'un texte, et plus largement d'une page web.

1. Utilisation de grilles :

La composition d'une page web doit absolument se baser sur l'utilisation d'une grille. Une grille est une structure ou une combinaison de lignes horizontales et verticales qui servent à faciliter le positionnement des éléments d'une page web. L'utilisation de grilles dans le web provient de la mise en page "papier", qui est divisée en colonnes, comme dans les journaux, par exemple.

Les grilles permettent ainsi d'avoir une cohérence et une harmonie entre toutes les pages. Elles permettent d'améliorer le confort de lecture en hiérarchisant les éléments. L'utilisation de grilles permet au webdesigner de maîtriser l'équilibre des pages, et ainsi de pouvoir le briser pour attirer l'attention du lecteur et donc orienter son regard. En effet, d'après Timothy Samara, "une grille n'est parfaitement réussie que, si une fois tous les problèmes résolus, le designer parvient à se démarquer de la structure imposée par sa grille pour créer une narration visuelle dynamique et de fait maintenir l'intérêt du lecteur page après page". Il est donc nécessaire de trouver une juste milieu entre le respect strict de la grille ou la briser par endroits.

Les grilles les plus utilisées dans les pages web sont les grilles en 12 ou 16 colonnes, qui, la plupart du temps, s'adaptent à tous les contenus. Il ne faut pas non plus utiliser de telles grilles, et vouloir absolument y faire entrer un contenu pour lequel ce type de grille ne serait pas adapté. Les grilles ne doivent pas être vues comme des contraintes de mise en forme, mais bien comme des outils permettant de faciliter la lisibilité du contenu.

Grille utilisée en webdesign

Grille utilisée en webdesign

Exemple d'utilisation d'une grille pour la mise en page d'un site web
Alsa Créations
Licence : Tous droits réservés -- Copyright

2. Une hiérarchisation visuelle du contenu :

La typographie peut, par ailleurs, servir à la hiérarchisation du contenu.

Pour des titres, on pourra ainsi modifier la taille de la police, sa graisse, son style (avec empattements, sans empattements), ou encore même choisir une autre police. Il faudra tout de même conserver une certaine cohérence entre les différentes polices et ne pas les multiplier sur une même page. De manière générale, on privilégiera la clarté pour le corps de texte et l'attractivité pour les titres. Certaines polices doivent être utilisées exclusivement pour les titres ou les effets visuels, parce qu'elles accentuent plus la qualité graphique que la lisibilité. Toutefois, une perte de lisibilité ne nui pas toujours à la clarté du contenu, dans la mesure où le mot peut devenir une image expressive.

Aujourd'hui, une des combinaisons les plus employées par les typographes est le choix d'une même police, en utilisant sa variante serif, pour les titres, et sans-serif, pour les paragraphes. Cette façon de faire est facilitée, parce que de plus en plus de polices sont proposées dans les deux déclinaisons.

3. Une taille de corps et un interlignage suffisant :

Dans le but de faciliter la lecture à l'écran, il est recommandé d'utiliser une taille de 16 pixels pour les paragraphes. Cependant, il est préférable d'utiliser des unités relatives, qui permettent ainsi de conserver des ordres de grandeur entre les différents éléments d'une composition (titre, sous-titres/intertitres, paragraphes, mentions de bas de page) que des unités absolues, telles que les pixels. Fixer les tailles des caractères avec des unités absolues empêchera le lecteur de les modifier, à sa convenance, sur certains systèmes.

On calcule l'interligne comme un ratio par rapport à la hauteur d'x de la police utilisée. Un ratio de 1 signifie que l'espace entre les lignes est aussi grand que la taille d'un caractère d'une des lignes, ce qui équivaut donc à une absence d'interligne. Un interligne plus conséquent est absolument nécessaire pour la bonne lisibilité du texte, notamment sur écran. Pour une composition équilibrée, on optera généralement pour un ratio de 1,5. Mais cela dépend très fortement de la police utilisée. Jost Hochuli, pose un principe universel, dans son ouvrage, Le détail en typographie, «Le principe général qui guide de manière concrète l'espacement entre les mots est le suivant : "Aussi grand que nécessaire, aussi petit que possible."».

Interlignage d'un texte

Interlignage d'un texte

Gestion de l'interligne dans des paragraphes
Antonio Carusone
Licence : Tous droits réservés -- Copyright

4. Veiller à la longueur des lignes :

Le nombre de caractères par ligne est également important. Le temps que met le lecteur pour passer de la fin d'une ligne au début de la ligne suivante est un temps mort, durant lequel le cerveau tente de comprendre ce qu'il vient de lire sur la dernière ligne. Si la ligne est trop longue, les informations s'accumulent et perturbent la concentration et la compréhension, le lecteur se fatigue plus vite. Au contraire, si la ligne est trop courte, les yeux iront trop souvent à la ligne, et se fatigueront plus rapidement, surtout sur des textes longs. On considère que le nombre optimal de caractères par ligne est situé entre 50 et 75. Pour déterminer le nombre optimal de caractères par ligne, le typographe Robert Bringhurst propose de multiplier la taille de la police par 30. Ainsi, par exemple, une police de 16 pixels serait plus lisible sur une ligne de 480 pixels.

Longueur des lignes

Longueur des lignes

Gestion de la longueur des lignes de paragraphes
Antonio Carusone
Licence : Tous droits réservés -- Copyright

Cependant, il est aussi nécessaire de prendre en compte le fait que la lecture d'un contenu n'est que partielle. En effet, on ne lit qu'une partie de ce qui est écrit. L'œil lit sous la forme de saccades. Il est donc primordial de prendre en compte ce phénomène et de disposer les contenus de sorte à ce que l'internaute lise tout de même les passages importants.

Afin de faciliter la lecture de textes longs, il est recommandé d'utiliser une police sans serif, c'est-à-dire sans empattements, plutôt qu'une police avec. Les lettres avec empattements sont moins lisibles sur l’écran que celles sans empattements. Deux raisons expliquent ce phénomène. La première raison est le fait que, dans le cas d'une police avec empattements et d'une petite résolution, les détails ont tendance à se "perdre" dans l'écran. La deuxième raison est la création d'un "effet escalier" à la base des caractères parce que la résolution d'un écran est beaucoup plus faible que celle sur papier. Ainsi, plus la taille des caractères est petite, plus on préférera utiliser une police sans empattements, et inversement. Mais, ce principe n'est pas universel, et dépend en réalité des polices de caractères. Certaines seront plus lisibles avec empattements, d'autres sans empattements.

5. Détacher les figures de leur environnement :

Pour être perçue, une figure doit se détacher de son environnement. Les espaces blancs aèrent le texte et offrent des espaces de repos pour les yeux. Les recommandations typographiques préconisent l'utilisation de polices ayant une hauteur d'x élevée, le choix d'un interlignage conséquent, ou encore des lignes courtes, parce que la prise en compte des espaces blancs est une problématique majeure pour assurer la bonne lisibilité d'un texte.

Il est aussi possible de jouer sur l'espace négatif, la forme et la contre-forme des éléments, pour assurer leur détachement de l'environnement dans lequel ils sont placés.

6. Utilisation des couleurs :

Le choix des couleurs reste une problématique importante dans la réalisation d'un site web. En effet, les webdesigners et les clients se doivent de sortir de considérations purement subjectives, telles que le "j'aime / je n'aime pas". L'utilisation d'une couleur ne repose pas sur des choix liés à l'affectif, mais bien sur des choix concernant le contexte dans lequel la couleur est utilisée. Une création graphique doit pouvoir être expliquée et justifiée. Elle est le fruit d'une réflexion par rapport à une problématique donnée.

Les choix chromatiques doivent être affordants, c'est-à-dire en lien avec le contenu. Par exemple, on n'affichera pas un message d'erreur en vert, ou un message de succès en rouge. D'une part, il y a une symbolique à respecter, et d'autre part, la charte graphique (couleurs du logo...) doit être respectée.

Par ailleurs, certaines couleurs ne se marient pas toujours bien ensemble et peuvent créer des effets de vibrance, les bords des formes deviendront flous, et rendront ainsi la lecture du contenu plus difficile.

Lorsque l'on choisi une couleur, il est également nécessaire de s'assurer de la bonne lisibilité pour tous. Par exemple, pour les daltoniens, ayant une perception différente des couleurs, le rendu d'une page ne sera pas le même. Il existe des outils en ligne qui permettent de visualiser le rendu d'un site, en modifiant ses couleurs.

Daltonisme

Daltonisme

Exemple de page web vue par un daltonien.
Pomodoro’s Pizza
Licence : Tous droits réservés -- Copyright

Il est également nécessaire et indispensable de vérifier les contrastes, la luminosité, ainsi que la brillance afin d'assurer une bonne lisibilité des contenus.

7. Respecter les règles typographiques de base :

Mais la recherche de la lisibilité ne doit pas pour autant se substituer aux règles typographiques de base. Ainsi, on accentuera les capitales et on évitera le texte en majuscules, qui s'assimile à des cris. Des études ont démontré que les textes en majuscules sont lus de 13 à 20% plus lentement que les textes en minuscules. Par ailleurs, le texte ne doit pas être justifié pour éviter les gros espaces blancs lorsque la résolution de l'écran n'est pas la même. Le texte doit aussi être lisible même une fois zoomé.

Pour conclure, on notera que les études scientifiques ont démontré que moins le cerveau a à faire d'efforts pour comprendre une information, mieux il la mémorise.

III Typographie sur le web : un choix réfléchi :

1. Certaines typographies ont une connotation :

Les choix typographiques doivent être adaptés au contexte. Certaines typographies ont un sens particulier et ne pourront donc pas être utilisées pour d'autres situations, sauf à faire une faute de contexte. Par exemple, la police Didot connote la mode, la classe, le luxe, et est utilisée, entre autres, par le site web de Vogue. La police Optima, quant à elle, connote quelque chose d'immuable et est utilisée notamment par de nombreuses marques de produits de beauté.

2. La triste histoire du Comic Sans Ms :

Le Comic Sans Ms a été dessiné, en 1995, par Vincent Connare, un ingénieur de Microsoft. Il développait un jeu pour enfants, sous Windows. Il considérait que Times New Roman était trop "austère" pour des enfants, et il a donc décidé de concevoir la police Comic Sans Ms. Microsoft a décidé  de l'intégrer à Windows, augmentant ainsi le nombre de polices disponibles sur le système.

Le comic sans MS

Le comic sans MS

Exemple de jeu pour enfant avec du Times New Roman, considéré comme "austère" dans ce contexte.
Kaligram'
Licence : Tous droits réservés -- Copyright

The most HATED font ever... Comic Sans
The most HATED font ever... Comic Sans (Vidéo)

Vidéo

Présentation de la police Comic Sans Ms. Dans quelle contexte a-t-elle été créée ? Pourquoi est-elle aujourd'hui à éviter ?
Senior Steffan
Licence : YouTube Standard Licence

Par la suite, Comic Sans Ms, qui n'est ni totalement sérieuse, ni totalement fantaisiste, a été utilisée à outrance. On retrouve, aujourd'hui, cette police dans des contextes inadaptés.

Le Comic Sans MS

Le Comic Sans MS

Mauvaise utilisation du Comic Sans MS, ici par une pharmacie
Kaligram'
Licence : Tous droits réservés -- Copyright

Paradoxalement, des études ont montré qu'un texte écrit en Comic Sans Ms serait plus facilement mémorisé qu'un texte écrit dans une autre police. Comme toutes les polices d'écriture compliquées, le Comic Sans Ms forcerait l'attention de celui qui le lit, conduisant de fait à une meilleure assimilation des contenus. Pour en arriver à cette conclusion, des chercheurs ont constitué deux groupes de personnes. Dans le premier groupe, les individus ont été confrontés à un texte écrit en Arial de 16 points, et le deuxième groupe à un texte écrit en Comic Sans Ms de 12 points. Puis, quinze minutes après la lecture, les deux groupes ont été interrogés sur le texte. Le premier groupe a obtenu 72,8% de bonnes réponses, alors que le deuxième groupe, confronté au Comic Sans Ms, a obtenu 86,5% de bonnes réponses.

3. Utilisons-nous les choix qui s'offrent à nous ? :

Il semblerait que l'on n'utilise pas réellement tous les choix typographiques qui s'offrent à nous, et que les polices les plus utilisées sur le web soient en réalité des polices standards de base. En effet, les polices Arial et Helvetica sont les plus populaires sur le web. Elles sont beaucoup utilisées parce que tout le monde le fait, par ignorance, ou tout simplement en raison de leur disponibilité et de leur compatibilité sur toutes les plateformes. Mais, ces polices ne sont pas conçues pour des paragraphes de texte. Et, elles rendent la lecture pénible en comparaison d'autres typographies créées pour le web.

Cependant, certains sites ont réussi à les appliquer correctement. C'est le cas de Github ou Gmail qui ne les utilisent pas pour des paragraphes. Mais, globalement, ces polices, surutilisées et de fait monotones, doivent être évitées autant que possible.

Utilisation de l'Helvetica et de l'Arial

Utilisation de l'Helvetica et de l'Arial

La Maison Blanche utilise de l'Helvetica (et de l'Arial) pour ses textes, comme les items de menu, par exemple.
US Government
Licence : Creative commons - by

F\ La typographie sur les liseuses ou le cas particulier des ebooks :

Quand on parle de livre numérique, on pourrait s'imaginer qu'il s'agit simplement d'un document Word ou Open office. Mais, en réalité, les livres numériques, vendus sur Kobo ou Amazon, par exemple, nécessitent un traitement différent pour offrir une bonne expérience de lecture. La typographie d'un livre numérique est presque aussi importante que le contenu en lui-même. Mais, dans certains cas, certains éditeurs ne  s'intéressent que peu à la typographie et à la mise en page d'un livre numérique, comme le montrent des critiques.

Critique Amazon

Critique Amazon

Critique utilisateur sur le site Amazon à propos de la mauvaise qualité typographique d'un ebook
Un ebook presque parfait
Licence : Tous droits réservés -- Copyright

I Quelle typographie pour les livres numériques ? :

1. Transmettre l'identité de l'ouvrage :

Il ne suffit pas que la typographie soit lisible, elle doit aussi correspondre et transmettre l'identité de l'ouvrage.

Pour un livre numérique, plus que pour un livre imprimé, la typographie est sa personnalité, dans la mesure où celle-ci peut être beaucoup moins transmise par la couverture. Cela étant, la typographie doit correspondre à l'identité du livre, mais pas de son auteur. Il ne s'agit pas ici que l'auteur choisisse une typographie qui lui plaise. La lisibilité reste la règle prioritaire. On utilisera, par exemple, la même typographie pour tous les ouvrages d'une même collection, afin de leur donner une identité commune.

On utilisera deux typographies différentes. Une première typographie pour les titres, sans empattements de préférence. Et une seconde typographie, pour le corps du texte, avec empattements, afin de faciliter la lecture. Il est également recommandé de ne pas utiliser des polices complémentaires. Le but est de pouvoir les différencier aisément et rapidement. Il ne faut jamais utiliser plus de deux, voire trois polices différentes. Dans un souci de cohérence, les polices utilisées devront être les mêmes tout au long du livre.

Par ailleurs, les polices fantaisistes sont absolument déconseillées. En effet, elles nuisent, parfois, à la lisibilité des contenus. Ce type de police est plutôt destiné aux titres des ouvrages pour lesquels on peut se permettre une certaine liberté graphique afin d'attirer l'attention du lecteur.

2. Faire attention au contraste :

L'écriture noire sur fond blanc est à proscrire, au profit d'une écriture un peu moins foncée et d'un fond qui ne soit pas d'un blanc pur. On choisira un blanc cassé, par exemple. En effet, l'utilisation de ces deux couleurs entraîne une fatigue plus rapide de l'œil.

3. Prendre en compte l'affichage sur écran :

À l'écran les caractères sont affichés sous la forme de pixels. Un pixel correspond à un petit carré. Cette pixellisation des caractères implique un défaut de précision dans leurs contours. Ce défaut varie d'une police à l'autre, mais il est très important de le prendre en compte lors du choix d'une typographie pour l'écran. Plus un caractère est petit, moins il est constitué de pixels. Ses contours seront donc moins affinés, et de fait le caractère sera moins lisible. Dans ce cas, le manque de lisibilité n'est pas uniquement lié à la petite taille du caractère, mais aussi à son affichage pixelisé à l'écran. Il existe néanmoins des procédés d'anticrénelage qui permettent de lisser les contours en proposant, au niveau d'un pixel, un dégradé nuancé entre la couleur utilisée pour la police et la couleur de l'arrière-plan. Cependant, il est conseillé, pour des raisons de confort de lecture, de ne pas descendre sous une taille de 16 pixels pour le corps de texte. Et pour des raisons d'affichage, il est conseillé de ne pas descendre sous une taille de 12 pixels. On notera tout de même que ces paliers varient en fonction de la police de caractères utilisée. Par ailleurs, plus le format du livre est petit, plus la police de caractères devra être petite, sans quoi un nombre insuffisant de mots sera affiché à l'écran, rendant de fait la lecture désagréable.

Ainsi, lorsque l'on veut utiliser une police pour l'écran, il est recommandé de choisir une police conçue spécialement pour les écrans. C'est le cas, par exemple, de la police Lucida, utilisée dans le système d'exploitation Mac OS X d'Apple, mais aussi des polices Verdana, Georgia, ou encore Tahoma. Il existe des polices conçues pour écran aussi bien serif que sans-serif. On notera que Georgia est considérée comme la meilleure police pour un affichage sur écran.

II Les problèmes et difficultés inhérents aux livres numériques :

1. Utiliser une police non adaptée à la lecture sur écran :

Vouloir absolument utiliser la même police de caractères que celle choisie pour la version imprimée du livre est une erreur trop souvent faite. Il est indispensable d'utiliser une police conçue spécialement pour une lecture à l'écran. En effet, une police ayant une bonne lisibilité sur papier ne présentera pas forcément une bonne lisibilité à l'écran.

2. Non-reconnaissance des polices par tous les formats de ebooks :

Toutes les polices de caractères ne sont pas reconnues par tous les formats de ebooks. Certaines polices ne sont pas adaptées au formatage d'un ebook en PDF, ePub, ou Mobi, et d'autres ne sont pas lues par certains appareils de lecture (tablettes, liseuses). Par exemple, les polices supportées par le format ePub ne seront pas les mêmes que celles supportées par le format iBooks. Il est donc conseillé de n'utiliser que des polices traditionnelles.

Notons par ailleurs que le nombre de polices sur les liseuses est limité. Par exemple, la Kindle d'Amazon ne propose que onze typographies différentes. Après avoir formaté son livre, il est donc absolument nécessaire de vérifier que tous les caractères s'affichent correctement, avec les bons espacements. En effet, en ne testant pas suffisamment la police utilisée sur les appareils de lecture, on ne pourra pas voir les bugs de rendu qui pourraient rendre le contenu illisible, sur certains systèmes.

3. Choix de la typographie par le lecteur :

Sur un livre numérique, le lecteur peut choisir la typographie : police, taille, interlignage. Cela n'interdit pas de travailler la typographie du livre numérique afin que le lecteur n'ait pas à faire de telles modifications, et se sente directement à l'aise avec le travail proposé. Mais, l'éditeur ne devra pas chercher à trop en faire. La simplicité reste de rigueur. Il ne s'agit que d'apporter un meilleur confort de lecture, et non de faire de chaque livre numérique un exercice de design graphique avancé. Surtout, les constructeurs ne supportent pas encore toutes les propriétés CSS que propose l'ePub, bien que ce dernier soit un standard. L'éditeur devra donc choisir une typographie la plus simple possible afin d'être certain d'apporter concrètement un soin à chaque livre, pour chaque support.

4. Non-respect des licences de polices :

Un des points les plus importants, et trop souvent négligé, dans le choix d'une typographie, pour un livre numérique, est le respect de la licence de cette police.

En effet, on pense souvent pouvoir intégrer une police système dans le livre numérique, alors que sa licence ne l'autorise pas. Les licences des polices système ne facilitent pas leur intégration à des ebooks. Pour pouvoir les utiliser dans ce contexte, il est nécessaire de s’acquitter d'une licence qui, la plupart du temps, dépasse de très loin, le budget initial fixé par l'éditeur. Si, par exemple, on trouve la police Georgia en téléchargement gratuit, on peut penser que cette police, étant disponible sous Windows et Mac, est gratuite. Or, elle ne l'est pas, et tout éditeur qui veut l’intégrer à son livre numérique doit obligatoirement payer la licence. Mais, cela ne signifie pas que l'éditeur n'a pas le droit d'y faire référence dans sa feuille de styles CSS, la police pouvant être mise à disposition par le fabricant de liseuse ou le développeur de l'application de lecture. De manière générale, si on trouve une police système en téléchargement gratuit, cela signifie probablement que le téléchargement est illégal, dans la mesure où il ne respecte pas la licence de la police.

5. Utiliser des images pour certains caractères :

Il est absolument déconseillé de mettre des polices sous la forme d'images pour contourner les restrictions de licence, ou les restrictions techniques de certains systèmes. En effet, en mode nuit, cela se voit, et crée une très mauvaise expérience utilisateur. Les mots en images deviennent des parasites et donnent l'impression d'un travail fait rapidement et à l'économie.

Polices en images

Polices en images

En mode nuit, on voit les caractères pour lesquels l'éditeur a utilisé des images
Jiminy Panoz
Licence : Tous droits réservés -- Copyright

G\ Les nouvelles tendances de la typographie :

Aujourd'hui, de nouvelles tendances en matière de typographie et de webdesign se dessinent. L'apparition de ces nouvelles tendances s'explique en partie par la multiplication des plateformes et des nouveaux usages de l'Internet.

1. Polices imitant l'écriture manuscrite :

On est aujourd'hui dans l'ère du "social media" et les internautes communiquent plus souvent et plus rapidement entre eux qu'auparavant. Les internautes veulent montrer que ce qu'ils écrivent viennent d'eux, et utilisent donc de plus en plus des typographies qui imitent une écriture manuscrite. Ces typographies forment des lignes irrégulières, car les lettres n'ont pas la même taille, ni la même graisse. Mais attention à la lisibilité du contenu.

2. Le flat design et les polices "flat" :

L'année 2013 a marqué l'arrivée du flat design, et cette tendance tend à se poursuivre dans les années à venir. Les interfaces sont claires, épurées, et présentent de grand aplats de couleurs. Il n'y a plus d'effet de relief ; on privilégie une esthétique bidimensionnelle. C'est une des raisons pour lesquelles on qualifie les sites en flat design de minimalistes. Beaucoup de designers se basent sur le flat design pour créer un site. Et de nouvelles typographies ont donc été créées.

Design Flat

Design Flat

Exemple de site avec un design flat : on reconnait les grand aplats de couleurs, les icônes monochromes, et l'aspect minimaliste, clair et épuré.
Etch
Licence : Tous droits réservés -- Copyright

3. Le mélange de typographies différentes :

En 2014, des experts ont prédit que les webdesigners mélangeraient de plus en plus des typographies différentes entre elles. Dans une première approche, l'idée pourrait paraître étrange. Mais, en réalité, le fait de mélanger des polices qui s'accordent bien entre elles peut créer un effet artistique très intéressant.

4. Des tailles de polices plus grandes :

Une des tendances qui émerge dans le webdesign est le fait de grossir les tailles de polices de manière importante. Le standard du 12 pixels n'est plus aussi lisible sur les résolution d'aujourd'hui, et les webdesigners augmentent donc les tailles des polices. Cette façon de faire permet de rendre le contenu plus clair, facilement compréhensible, et attrayant. Cette tendance est surtout utilisée pour les titres des pages d'accueil dans le but d'attirer l'attention des internautes et de leur donner envie d'aller plus loin et d'explorer le site.

Polices de grande taille sur les pages d'accueil

Polices de grande taille sur les pages d'accueil

L'utilisation de polices ayant une grande taille se démocratise sur le net, en particulier sur les pages d'accueil.
Electric Mainline
Licence : Licence inconnue -- D.R.

5. Moins de clics :

Partant du constat que les internautes préfèrent défiler que cliquer, une tendance actuelle est de présenter un site en une seule page. Le site se présente en une longue page défilante. Généralement, le design est épuré, organisé et ergonomique, et les contenus sont concis et clairs, de sorte à ne pas noyer les internautes sous une masse d'informations. 

Site en une page

Site en une page

Exempe de site avec un scrolling important
Wix
Licence : Tous droits réservés -- Copyright

6. Les pages d'accueil revisitées :

La plus grande tendance de cette année sera probablement les grandes entêtes, avec une image et un peu de texte, qui remplaceront petit à petit les carrousels d’introduction.

En-tête de site

En-tête de site

Exemple de design avec une grande en-tête mettant en avant la typographie

7. Réduction du nombre de couleurs :

À l'image du design, les couleurs font elles aussi l'objet de modifications. En effet, elles sont beaucoup plus épurées. Les webdesigners privilégient l'utilisation du noir et du blanc, ainsi que deux autres couleurs pour permettre de faire ressortir des éléments importants, par exemple. Les palettes de couleurs deviennent donc minimalistes, ce qui pourrait être due à l'utilisation du flat design.

Couleurs simples

Couleurs simples

Exemple d'utilisation d'une palette de couleurs très réduites. Les seules couleurs utilisées sont le blanc et des nuances de bleu.
French Web
Licence : Tous droits réservés -- Copyright

8. Le responsive design :

Le responsive design permet d'adapter une interface aux différentes tailles et résolution des terminaux utilisés pour afficher un site web (smartphone, tablette, ordinateur...).

Site responsif

Site responsif

Exemple de design responsive : passage d'un ordinateur à grand écran, à un ordinateur à petit écran, puis à une tablette et à un smartphone.
mediaqueri.es
Licence : Licence inconnue -- D.R.

Le responsive design est une approche de conception web qui est basée sur des grilles fluides, des images flexibles, et des media queries (règles CSS qui déterminent comment tel élément sera affiché à l'écran pur telle résolution). Le but est d'avoir "un seul web", selon les termes du W3C. Cela signifie que l'on doit mettre à disposition des utilisateurs les mêmes informations et services, indépendamment de l'appareil utilisé. Mais cela ne veut pas dire que la même information sera disponible exactement dans la même représentation à travers tous les appareils.

Lors du maquettage d'un site en responsive design, on conçoit d'abord l'interface pour mobile. C'est ce que l'on appelle le concept du mobile first. On pense d'abord la mise en page et la présentation du contenu pour les terminaux à petits écrans. Ensuite, on définit les interfaces pour terminaux à écran plus grand en enrichissant le contenu. On parle donc d'amélioration progressive de l'interface.

On distingue le responsive design de l'adaptative design. Souvent ces deux notions sont confondues. Mais, bien qu'elles soient complémentaires, elles ne recouvrent pas la même chose. Alors que le responsive design adapte le contenu à la largeur du contenant, l'adaptative design adapte le contenant et le contenu à l'internaute. L'adaptative design consiste à concevoir des interfaces adaptées aux capacités de l'utilisateur. C'est donc une question d'accessibilité du contenu.

Le responsive design et l'adaptative design sont des concepts assez récents, mais qui sont absolument indispensables à prendre en compte dans le développement et le design d'un site web.

9. Un contenu simplifié :

En raison de l'utilisation des réseaux sociaux et de la rédaction de messages courts sur ces plateformes (140 caractères pour Twitter), les internautes veulent de moins en moins lire. C'est donc une des raisons pour lesquelles les sites ne présentent que le contenu le plus important. Ce qui est aussi préférable pour les plateformes mobiles.

10.Utilisation des icônes :

Une des tendances actuelles, qui trouve probablement son origine dans le flat design, est l'utilisation d'icônes dans les menus de navigation. Cela permet de donner une touche plus "sophistiquée" aux menus. Mais, il est nécessaire de faire attention à la lisibilité et à la compréhension des icônes. Les icônes ne doivent pas être utilisées pour remplacer le texte des items, mais doivent venir en complément. En effet, les internautes ne doivent pas passer du temps à essayer de déchiffrer des icônes plus ou moins expressives. C'est d'ailleurs la raison pour laquelle lorsque l'on développe un site en responsive design, on ne doit pas supprimer les textes des menus et laisser seulement les icônes pour la version mobile. Au contraire, les textes devront rester et les icônes disparaître.

Design changeant

Design changeant

Changement de design de la version desktop à la version mobile. Les icônes du menu disparaissent dans la version mobile ; seuls les textes des items sont conservés.
Fork CMS
Licence : Tous droits réservés -- Copyright

Un point sur les polices d'icônes :

Les polices d'icônes, ou "icons fonts", sont des icônes qui sont inclues dans une police. Chaque icône correspond à un symbole. Les icônes sont donc des symboles vectoriels personnalisables qui peuvent être manipulés grâce à des attributs CSS3, et intégrées à n'importe quel endroit d'un site.

L'utilisation des icônes typographiques à la place d'icônes classiques présente de nombreux avantages. En effet, pour chaque "icône image" d'un site, une requête est exécutée pour récupérer l'image et l'afficher. Même s'il existe des solutions qui permettent d'optimiser les temps de chargement, comme les sprites où l'on met plusieurs icônes dans une même image, le temps de chargement peut demeurer long. Les "icônes typographiques", qui sont utilisées de la même manière que les caractères typographiques, permettent donc d'éviter l'exécution de requêtes vers le serveur, et diminuent de fait les temps de chargement.

Par ailleurs, les icônes typographiques offrent d'autres avantages. En effet, on peut facilement faire évoluer leur taille, sans passer par un éditeur d'images, on peut les coloriser directement avec les CSS et y ajouter des effets simples et rapides (ombres portées, transparence). Ces icônes ont une bonne compatibilité sous tous les navigateurs, même les plus anciens, tels que Internet Explorer version 6. Et, ces icônes ont aussi un poids moins élevé que les "icônes images". Par exemple, on peut passer d'un sprite de 650 Ko à une "icône typographique" de 11 Ko, ce qui n'est pas négligeable, notamment pour l'accès au site avec des connexions bas débit.

Il existe de nombreux sites qui permettent de télécharger gratuitement des polices d'icônes, pour ensuite les intégrer à des pages web. Plusieurs méthodes permettent d'intégrer des "icônes typographiques" à un site web. Après avoir téléchargé l'icône, on peut utiliser le code de l'icône que l'on met dans une classe CSS et ensuite on appelle cette classe dans le document HTML. On peut aussi utiliser l'attribut "data-icon", en HTML5, qui permet d'ajouter une image de fond à un élément en utilisant une police de caractères. La valeur passée à l'attribut correspond à l'entité HTML de l'icône.

Utilisation de l'application proposée par IcoMoon

Utilisation de l'application proposée par IcoMoon

L'application de IconMoon permet pour chaque icône (ici, un appareil photo) d'obtenir le code HTML et CSS ou l'entité HTML pour l'intégrer à une page web.
IcoMoon App
Licence : Tous droits réservés -- Copyright

Conclusion

Nous avons aujourd'hui plus de cinq siècles de typographie derrière nous, mais à peine une petite vingtaine d'années d'expérience sur le web.

En cinq siècles, la typographie a connu des changements majeurs. Le passage du papier au numérique marque la pierre angulaire de l'histoire de la typographie. Les outils, les méthodes de travail, les savoir-faires, la composition des pages ont été modifiés. On passe des caractères en plomb aux caractères numériques, du matériel à l'immatériel, du journal à l'écran Retina...

L'arrivée des ordinateurs et la numérisation des contenus ont amené des changements technologiques, des changements en matière de développement web, des changements juridiques, et aussi des changements humains.

Les ingénieurs informatique ont mis en place le codage électronique des caractères. Les développeurs web ont développé de nouvelles solutions pour l'intégration de polices. Les juristes ont statué sur de nouvelles affaires en lien avec la propriétarisation des polices. Et, chacun a pu devenir un typographe en choisissant sa propre police ou en en créant une nouvelle.

Le métier de webdesigner s'est développé. On ne reproduit pas à l'écran ce que l'on a sur papier. On prend en compte de nouveaux critères, de nouvelles règles. Les webdesigners développent de nouvelles compétences. La lisibilité des contenus est indispensable.

Le métier d'éditeur change et évolue. On est dans une société où les livres numériques tendent à dépasser les livres papier. Les éditeurs s'intéressent à de nouvelles problématiques. Le passage du papier au numérique n'est pas si simple.

Mais alors quel avenir pour la typographie ? De nouvelles tendances apparaissent. Le flat design remplace le design réaliste, les pages s'allongent, les polices de caractères s'agrandissent, les carrousels d'introduction laissent la place à de grandes images de fond...

La typographie se démocratise et, grâce à la simplification des outils, est de plus en plus accessible au grand public. Doit-on craindre de nouvelles dérives, comme celle du Comic Sans Ms ? Ou au contraire, vivre cette démocratisation de manière positive ?

L'évolution de la typographie montre l'évolution de la société. De nouveaux métiers apparaissent, d'autres disparaissent. De nouvelles formations voient le jour dans les universités et les écoles. On forme aujourd'hui de vrais webdesigners et on intègre des modules d'enseignement numérique dans les formations d'éditeurs. Voir la typographie comme quelque chose sans grande importance serait donc une erreur.





Cette synthèse est placée sous la licence Creative Commons CC-by-sa



Bibliographie de référence


Webgrids - structure et typographie de la page web,

de Anne-Sophie Fradier, Editions Atelier Perrousseaux, 112 pages, 2012

Adaptive Web Design: Créer des sites riches avec l'amélioration progressive,

de Aaron Gustafson, Editions Pearson, 144 pages, 2013

The Web Designer's Idea Book, The Ultimate Guide to Themes, Trends and Styles in Website Design,

de Patrick McNeil, Editions How Books, 2008

Lisibilité des sites web : Des choix typographiques au design d'information,

de Marie-Valentine Blond, Olivier Marcellin, Melina Zerbib, Editions Eyrolles, 313 pages, 2009

Typographie, guide pratique,

de Damien Gautier, Editions Pyramyd , 100 pages, 2001

Comprendre la typographie,

de Ellen Lupton, Editions Pyramyd, 176 pages, 2007

Typo & web : Pour une lisibilité optimale de la typographie sur Internet,

de Aurélien Foutoyet, Editions Atelier Perrousseaux , 168 pages, 2012




 

Documents associés complémentaires

Licence SIL

Licence SIL

Logo de la licence SIL
SIL International
Licence : Tous droits réservés -- Copyright
 

Notes de lecture

Insolite : Comic Sans, une police qui facilite la compréhension

Comment choisir une fonte ?

Histoire de la typographie

La typographie sur le web

On peut utiliser comme on veut les polices de caractères

Summary of key rules

La typographie et la loi

Stop Using Arial & Helvetica

La Haute Autorité a-t-elle violé les droits d'auteur avec son logo ?

Why Google Web Fonts aren’t really open source

12 statistiques sur le Webdesign que vous devez connaitre avant de faire votre site

Typographie de l'ebook

Polices en CSS

Comic Sans by Vincent Connare.

Dossier : Comment intégrer les « icons fonts »

C'est quoi l'ASCII, l'UNICODE, l'UTF-8 ?

Bonnes pratiques pour les déclarations @font-face

Web design : 6 tendances fortes pour 2014

4 Typography Trends for 2014

Les formats du livre numérique

Typographie sur le web

Guide des polices pour le livre numérique

Les 10 grandes tendances du design Web en 2014