Typographie et Web : la solution Typekit

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.

Typeface image

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é.

Codestyle : websafe font list

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

Type img3Dans 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 : homepage

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 screenshot

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.

Typekit : offres tarifaires

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.

Typekit : kit page screenshot

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.

Typeface image

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.

Quelques liens pour finir :

19 réflexions au sujet de « Typographie et Web : la solution Typekit »

  1. Ping : Tweets that mention Typographie et Web : la solution Typekit | All For Design -- Topsy.com

  2. Pas de Javascript, pas de Typekit : c’est pour moi tout à fait disqualifiant, hélas.
    L’un des inconvénients majeurs des techniques alternatives côté client (SiFR & co) était de s’appuyer sur des technologies tierces et d’en hériter des points faibles (poids, installation facultative, etc.) et Typekit reproduit hélas ce schéma.

  3. Ping : Typekit — La typographie sur le web

  4. Le projet Typekit est une excellente initiative. Il a le mérite de proposer un modèle de rémunération tangible pour les créateurs de Polices, et il garanti le respect de la propriété intellectuelle.

    Le système à pourtant deux petits points noirs:

    - Le nombre de Polices est limité. Comment puis-je faire pour utiliser mes propres fontes ou celles de mes clients avec ce système ?

    - le système ne laisse aucune place aux Polices open source. Je trouve ça dommage et j’espère que des systèmes alternatifs plus ouverts verront le jour dans les mois/années à venir.

    Perso, j’aurais préféré un système de marquage des fontes placé dans l’entête des fichiers, un code qui permettrait de tracer la Police ou d’empêcher son téléchargement en détruisant les fichiers téléchargés par exemple.
    Ça permettrait d’utiliser toutes les fontes et de les héberger où on veut.

    Si je pouvais donner des idées à un entrepreneur ambitieux…

  5. Excellente nouvelle ! Je ne savais pas que CSS3 permet d’ajouter sa fonte. On risque d’avoir de belles surprises si l’usage se généralise. En partant de l’a priori que les fontes gratuites sont souvent farfelues et le goût douteux des webmasters en herbe, les sites web pro et amateurs vont se différencier largement.

    Je ne sais pas si l’analogie avec le livre est pertinente. Imaginons que j’écrive un livre. Le choix de la typo est réservée à l’imprimeur qui en possède le droit d’utilisation. J’imagine que dans ma facture, je paye cette licence. Plus je publie et plus je reverse des droits d’auteur. Pour le moment, sur le web, le coût pour l’utilisation d’une typo est comprise dans le prix global de l’OS. C’est l’utilisateur final qui paye un faible montant, ou rien du tout si la copie est piratée. Avec Tipekit, c’est le concepteur qui devra payer pour diffuser une police. On pourrait même imaginer que le prix fluctue en fonction du nombre de hits: plus le site est visité (plus la police est visualisée par les utilisateurs) et plus cher sera la facture.
    .-= Dernier blog de katsoura : Persistance rétinienne =-.

  6. Merci pour vos commentaires.
    Effectivement Typekit présente des inconvénients assez importants mais je voulais saluer le modèle de rémunération des droits. C’est pour cette raison que mon article est assez largement orienté sur la gestion des licences.
    Cela dit, pour répondre à vos remarques, concernant JS je pense que tout dépend de la cible. A qui s’adresse mon site ?
    Les utilisateurs finaux auront peut-etre en majorité Javascript activé ?
    Dans tous les cas, sans JS activé, il est toutefois possible de définir des polices de remplacement dans les feuilles de style donc il n’y a rien de dramatique (même si je conviens que c’est quand même dommage).

    Laurent je te rejoins sur le manque d’ouverture du modèle proposé par Typekit. Je pense qu’il va falloir regarder de près le nouveau format WOFF déjà accepté par Firefox 3.6 (et en cours d’acceptation par IE8?) qui va peut-etre prendre beaucoup d’ampleur par la suite.
    J’ai vu que FontSquirrel propose un outil « FontFace Generator » qui permet de convertir gratuitement ses propres fontes pour les utiliser via @font-face. Cet outil donne même le code à insérer. Même si j’ai peur qu’il soit mal utilisé (utilisation pour des polices commerciales) c’est une solution qui me semble intéressante.
    Katsoura je pense également que cette nouvelle propriété @font-face est un peu comme la boite de Pandore et que de nouveaux sites web complètement illisibles vont voir le jour. C’est clair que les expert en typo vont clairement sortir du lot et c’est tant mieux.

  7. > il est toutefois possible de définir des polices de remplacement dans les feuilles de style donc il n’y a rien de dramatique

    Dramatique, probablement pas, mais je n’arrive pas à comprendre pourquoi une solution serveur n’a pas été préférée, parce qu’elle me semblerait plus logique, plus sûre, plus performante et plus universelle. Après, je n’ai pas fouillé plus avant le fonctionnement du script donc il y a peut-être une bonne raison technique.

    C’est d’autant plus regrettable que ça gadgetise une belle idée (on est d’accord là-dessus). La question de la cible (JS activé ou pas) me gêne ici parce que la base « philosophique » de @font-face c’est justement l’universalité triomphante : ENFIN, nous avons l’affichage natif de n’importe quelle font sur le web quel que soit le navigateur (alors que c’était déjà possible depuis très longtemps sur IE par exemple). Je trouve que c’est aller à l’inverse de cette logique que de filtrer à nouveau les utilisateurs, et c’est là que je trouve ça dommage.

  8. Ping : Ajouter une fonte personnelle sur son site | Tutoweb

  9. C’est avant tout une solution commerciale qui enchaîne le designer ou l’agence web ou le client final à Typekit, il suffit d’arrêter de payer et c’est finit ou on est enchaîné à leur politique commerciale, s’ils changent les prix, les clients ne vont pas arrêter sinon ils devront racheter toutes les fonts utilisées sur leur site .
    Je pense que le fond du problème est capitaliste, et non un respect des droit d’auteurs. Avant le web, helvetica coûtait le même prix qu’aujourd’hui alors qu’il y a des millions d’utilisateurs en plus. La famille helvetica coûte 667euros (http://www.fonts.com/FR/MondoSearchResults.htm?st=12&kid=helvetica&pg=1). Et c’est là que se situe le problème. Je pense qu’il faut surtout revoir la politique commerciale sur laquelle reposent les droits d’auteur et qui est basée sur un profit maximal.
    Personnellement, je refuse de payer les droits d’auteur non par manque de respect de la propriété intellectuelle mais parce qu’il ne faut pas confondre pognon avec droits d’auteur.

  10. je connais beaucoup d’agences qui abusent en utilisant des polices pas libre de droit… En general, je me cantonne a 8 polices au maximum car effectivement le risque de ne pas etre lu … peut devenir vite genant ¨^^¨

  11. C’est peut être une bêtise, mais il me semble que c’est possible d’utiliser @font-face sans passer par quoi que ce soit de particulier.

    Admettons un serveur comme celui ci :

    www //Fichier qui contient le site web
    -img
    -css
    -index.php

    mon-url.com renvoit donc index.php

    Si maintenant on met un dossier au même niveau que www pour contenir les polices, soit :
    fonts
    www
    -img
    -css
    -index.php

    Dans ce cas, on peut accéder aux polices via un chemin relatif, par contre l’utilisateur ne peut pas accéder à la font en elle même, l’url n’existant pas puisque le domaine pointe vers le dossier www.

    Si les fontes téléchargées ne sont pas installées automatiquement dans ce cas cette méthode devrait pouvoir éviter de mettre en danger les licenses.

  12. HammHetfield > faux, il faut que la font puisse être accédée coté client, et ce n’est pas le cas dans la solution que tu proposes.

  13. Ping : Typekit, Adobe, @font-face et le marché de la typographie « Laurent Demontiers

  14. Ping : Gestion des fonts | Foisinfo

  15. Ping : Le petit journal du web — Edition spéciale TypOgrApHiE !

  16. Ping : Typographie et web | blog.mi-ca.ch

  17. Ping : Le petit journal permanent de la TypOgrApHiE !

  18. Ping : Ajouter une fonte personnelle sur son site | ¶ Pied-de-mouche

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge