Nous assistons depuis quelques mois à une profonde transformation des usages typographiques sur le web. Les webdesigners ne sont plus limités à l’utilisation des polices websafe mais la gestion des licences des fontes est devenue une problématique centrale. Cet article présentera les solutions proposées par le site Typekit et sera illustré par le point de vue de Jean François Porchez, célèbre typographe, directeur de Porchez Typofonderie, qui a décidé d’y proposer une partie de son catalogue…

Si son nom ne vous dit rien Jean-François Porchez est typographe, directeur de Porchez typofonderie, professeur à l’ENSAD, il a été le président de l’ATypI (Association Typographique Internationnale) durant 3 ans et a participé au jury des plus grands concours typographiques mondiaux. Il a notamment créé : Ambroise, Apolline, Bienvenue, Costa, Dereon, Le Monde, Parisine, Sabon Next.

Cet article sera illustré par des extraits de ses réponses à quelques unes de mes questions. Une courte interview que j’ai réalisé et que vous pourrez retrouver dans son intégralité à la fin de cet article.

La typo et le web : un conflit d’intérêts ?

Le rendu typographique d’une page web dépend de multiples facteurs : les choix typographiques du webdesigner, le navigateur utilisé, le système d’exploitation, les préférences de l’utilisateur final etc.

Pour limiter la différence de rendu des pages web, les webdesigners ont longtemps opté pour des polices qualfiées de «Websafe» c’est-à-dire des polices présentes sur les machines des internautes : Arial, Verdana, Georgia, Helvetica, Tahoma, Lucida Grande, Lucida Console etc… Le site Codestyle a classé les polices en fonction de leur disponibilité.

En travaillant avec ces polices, les webdesigners gardent un maximum de contrôle sur le rendu final des pages qu’ils ont créé. Cependant, il est parfois frustrant de passer à côté d’un choix typographique qui semble coller parfaitement à la problématique soulevée par le client, par souci d’homogénéité du rendu final…

Des solutions ont donc été trouvées au fil du temps pour permettre aux webdesigners d’intégrer un plus large choix typographique dans leur processus de création. En général, ces solutions (Cufon, SIFR, FaceLift, Typeface.js etc.) s’appuient sur Flash, Javascript ou encore PHP.

Chacune d’entre elles possède ses avantages et ses inconvénients mais voici les problèmes récurrents : texte impossible à sélectionner, référencement, sémantique, temps de chargement, compatibilité, respect des standards etc.

…Nous parlons beaucoup de nouveaux modèles de licences pour rendre possible l’usage de fontes sur le web en respectant le droit d’auteur…

L’arrivée des CSS3 a considérablement transformé les moyens d’agir sur la typographie sur le web. La propriété «@font-face» a focalisé tous les regards. Avec cet outil, il est possible d’afficher une police dans un navigateur web même si celle-ci n’est pas installée sur la machine de l’utilisateur final.

Avec «@font-face», il suffit de placer votre fonte (le fichier de police) sur un serveur et d’indiquer le chemin dans votre feuille de style. Même si le travail de standardisation de tous ces nouveaux outils CSS3 n’est pas terminé, il est dores et déjà possible d’utiliser ces propriétés sur de nombreux navigateurs.

La solution est toute trouvée alors me direz-vous, plus besoin de chercher midi à quatorze heures, utilisons tous «@font-face» et ne nous limitons plus dans nos choix typographiques !

Hum hum… en fait, cette solution extrêmement puissante pose deux problèmes majeurs :

1. Comment gérer les droits d’auteur des fontes ainsi utilisées ?
2. Comment protéger ces fichiers ? En effet, si j’ai accès à l’url du fichier, je peux le télécharger et l’installer sur ma machine (je vole donc le créateur de cette fonte).

…il est aujourd’hui important de proposer des alternatives viables et faciles d’usage pour éviter de se retrouver dans des usages qui ne respectent pas les droits d’auteurs, comme il est possible techniquement avec le «@font-face» dans sa version brute.

Inutile d’être juriste spécialisé en droit de la propriété intellectuelle pour comprendre le problème qui se pose avec cette nouvelle solution…

Typographie et droit

Dans le droit Français, une police de caractères est protégée au même titre qu’un logiciel. L’utilisation de l’un ou de l’autre doit se faire après l’achat d’une licence. Cette dernière n’est valable que pour un nombre défini de postes (un ou plusieurs selon les cas).

Exemple : Une entreprise qui souhaite s’offrir une nouvelle identité typographique devra acheter autant de licences que de postes informatiques sur lesquels sera installée cette fonte. A grande échelle, inutile de préciser que les coûts des licences sont globalisés.

Si vous vous demandez pourquoi est-ce si contraignant d’utiliser des polices de caractères, il faut savoir que leur conception demande énormément de travail aux typographes (des semaines, des mois voir des années).

La seule source de revenu pour ces créateurs reste la vente de licences.

Vu sous cet angle, on comprend aisément que les fonderies portent un œil attentif à la question de la gestion des licences et à la protection des fontes.

La solution Typekit

Typekit est un service web qui met à disposition un catalogue de polices commerciales afin d’élargir les choix typographiques des webdesigners.

Le but est de pouvoir proposer des pages web affichant des textes dans des polices qui ne sont pas forcement installées sur les machines des internautes.

Les polices proposées sont hébergées sur une centaine de serveurs éparpillés dans le monde entier. Le site assure une très bonne qualité de service et propose même un lien d’accès aux statistiques des serveurs typekit (ping et temps de réponse).

Le modèle proposé par typekit

Typekit utilise la propriété «@font-face» pour permettre l’affichage de polices sur vos pages web.

Heuuu… oui mais nous venons de voir que cette opération est à la portée de n’importe quel webdesigner donc quel est l’intérêt ?

La valeur ajoutée se situe sur la gestion des licences et sur la sécurité. Les fontes sont sécurisées et il est impossible pour l’utilisateur lambda de les télécharger pour les réutiliser à son tour.

C’est pour cette raison que de nombreuses fonderies (dont Porchez Typofonderie) collaborent avec Typekit et mettent à disposition une partie de leur catalogue aux utilisateurs de ce service.

Typekit : comment ça marche?

Après avoir ouvert un compte, vous devez proposer les noms des domaines sur lesquels vous utiliserez ce système. Cela permet de définir précisément les limites d’utilisation des polices.

Ensuite c’est très simple, vous avez accès à une bibliothèque de polices. La classification est plutôt bien faite puisque vous pouvez faire votre choix en fonction des fonderies, de la forme des caractères (serif, sans, script, decorative), en fonction de tags (bitmap, small caps, art deco, bold, etc.) ou encore en fonction de l’utilisation que vous comptez en faire (titre ou labeur).

Typekit vous donne la possibilité de tester la police choisie avec votre propre texte, dans plusieurs styles (bold, italic, roman…) et biensur plusieurs corps (12pt, 13pt, 15pt etc.).

Le site propose une solution au problème de la gestion des licences en présentant 4 offres tarifaires de 25$/an (soit 17€) à 250$/an (soit 175€) pour la première année d’utilisation.

La différence entre ces offres se situe au niveau de la taille de la bibliothèque de polices utilisables, le nombre de noms de domaines enregistrables et de la bande passante qui vous est allouée. A noter qu’en version d’essai, vous devrez vous acquitter d’un badge Typekit obligatoire en bas de la page web utilisant le service..

Une police de caractère sélectionnée dans le catalogue sera automatiquement ajoutée dans votre « kit », une page accessible rapidement qui vous permet de visualiser votre panier et de gérer l’utilisation de vos polices.

Sur cette page vous pourrez assigner une classe css à une police. Une fois dans votre site, il vous suffira d’ajouter deux lignes de code dans le header de votre page puis d’appliquer cette même classe css à un élément pour voir le texte automatiquement transformé dans la police que vous avez choisie.

L’image ci-dessus est un screenshot d’un kit (version gratuite).,On peut voir que j’ai ajouté la police « Apolline STD » à mon kit. La classe css «.tk-apolline» m’a été proposée pour transformer le texte de ma page web avec les css.

Vous avez la possibilité de modifier le nom des classes par défaut, vous pouvez également créer vos listes (css font-stack) de remplacement pour les navigateurs ne prenant pas en charge la propriété «@font-face» (attention toutefois puisque les font-stack Typekit sont liées à Javascript… Pas de Javascript, pas de service Typekit)

Si vous souhaitez vous faire une idée du rendu voici une page de demo Typekit.

On constate donc que l’opération est extrêmement simple. Le code reste propre, la sélection du texte est possible tout comme le reste du texte sur la page web…

Concernant la compatibilité, Typekit fonctionne sur tous les navigateurs prenant en charge la propriété «@font-face» : Firefox 3+, Safari 3.1+, Internet Explorer 6+.

Les inconvénients de Typekit

Même si Typekit est une solution satisfaisante, elle n’est pas parfaite pour autant et présente quand même quelques inconvénients.

• Utiliser ce service va alourdir votre page et donc augmenter le temps de chargement. Le poids de chaque police est indiqué en bas de votre page de kit (100ko minimum pour une fonte complète)
• Typekit ne fonctionne pas sans Javascript… Les font-stack css que vous avez spécifié dans votre kit fonctionnent également avec Javascript… Il faudra donc prévoir des polices de remplacement pour les utilisateurs ayant désactivé Javascript (en ajoutant une liste font-family dans votre propre feuille de style).
• Le prix du service risque d’augmenter après la première année de souscription. Une promotion est en cours au moment où j’écris ces lignes : si vous souscrivez maintenant, le prix restera le même jusqu’à ce que vous décidiez de partir.
• Actuellement, les fonctions OpenType ne sont pas encore correctement supportées.

Les fontes Typofonderie disponibles sur Typekit ne sont que des fontes basiques, collection STD, car les fonctions OpenType ne sont pas encore totalement supportées sur le web et les navigateurs.

Bref… chaque solution possède des inconvénients et Typekit ne fait pas exception. Cela dit, ce service a le mérite de proposer une solution au problème de la gestion des droits d’auteur des polices commerciales et à la sécurisation des fontes. Rien que pour cela, nous pouvons saluer cette belle initiative.

Le point de vue de Jean François Porchez

Pour terminer cet article je vous livre les réponses que Jean François Porchez a apporté à quelques-unes de mes questions.

1. Comment avez-vous connu Typekit?

C’était quelques mois avant le lancement, car nous parlons beaucoup de nouveaux modèles de licences pour rendre possible l’usage de fontes sur le web en respectant le droit d’auteur.
Déjà avec les fontes incorporées à des produits logiciels, ce sont des sujets sensibles. Le Flash, d’autres choses comme le TrueDoc, le Sifr, etc. Depuis les CSS avec ce nouvel outil @font-face, cela devient très problématique. Il existe également le format Woff, supporté par Firefox, moins pire que FontFace mais pas forcement adapté comparativement à Typekit.

2. Qu’est ce qui vous a poussé à proposer vos fontes sur ce service ?

Comme je disais il est aujourd’hui important de proposer des alternatives viables et faciles d’usage pour éviter de se retrouver dans des usages qui ne respectent pas les droits d’auteur, comme c’est le cas techniquement avec @font-face dans sa version brute.

3. Quels sont les bénéfices de la présence de PTF sur Typekit ?

Impossible à dire, c’est trop tôt.

4. Comment s’est effectué le choix des fontes que vous avez mis à disposition ? Aviez-vous des spécifications minimales requises ?

Un extrait de catalogue, d’autres arriveront plus tard logiquement. Si les fontes sont correctement conçues, il y a normalement aucun problème d’affichage écran avec les systèmes d’exploitation contemporains, type MacOs X et Vista-7.
Les fontes Typofonderie disponibles sur Typekit ne sont que des fontes basiques, collection STD, car les fonctions OpenType ne sont pas encore totalement supportées sur le web et les navigateurs.
Exemple : Parisine et Parisine PTF, le support OpenType et le nombre de glyphes n’est pas identique.

5. Quel est votre regard concernant l’évolution de la typo sur le web ?

De gros changements très positifs comparativement au début de la dernière décennie, où la main mise d’Internet Explorer rendait impossible le développement d’un web qui respecte les normes du W3C.
Voyez ça : Le redesign de Typofonderie et Type sites do web standards.

En guise de conclusion

Il me semble que nous vivons actuellement une vraie révolution des outils et pratiques de création de sites web. Avec l’arrivée des CSS3, du HTML5, nous avons (ou aurons bientôt) accès à une multitude de nouveaux outils.

Des services comme Tyepkit peuvent être d’un réel intérêt s’ils sont utilisés à bon escient. Nous ne devons pas perdre de vue que le but est avant tout de répondre à la problématique de nos clients. Avoir accès à des milliers de polices de caractère c’est bien, savoir les utiliser correctement c’est encore mieux.

Il me semble qu’en matière de typographie, les webdesigners auront tout à gagner en se servant de la longue expérience du monde de l’impression.

Ne perdons pas de vue le célèbre adage «Form follows function» et sachons tirer parti de toutes ces nouvelles solutions qui s’offrent à nous pour enrichir nos pratiques.