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.

Symbaloo c’est quoi ?

Avec ce service vous pourrez stocker sur le web tous vos bookmarks et ainsi y accéder où que vous soyez. Mais Symbaloo ne s’arrête pas là puisqu’il vous permet également de centraliser certains services basiques : pages jaunes, recherche google, outil de traduction, comparateur de prix, programme ciné, et bien plus encore…

Après vous être inscrit gratuitement, vous bénéficierez d’un espace personnel pour stocker tous vos bookmarks, vos flux RSS et accéder à de nombreux services disponibles sous forme de Widget. Si vous optez pour le partage de vos pages, Symbaloo vous offre la possibilité de prévenir vos amis en leur envoyant l’url de la page rendue publique.

L’utilisation de Symbaloo est simple et efficace. Un système d’onglets permet un classement optimisé de tout votre contenu, l’utilisation est simplifiée grâce à la fonction de « glisser-déposer ». Pour modifier un bookmark, il vous suffit par exemple de le glisser sur la zone centrale présente sur chacune de vos pages. Vous pourrez alors modifier ce contenu, le déplacer vers un autre onglet, le copier ou le supprimer.

En plus d’être simple et efficace, je trouve que l’esthétique de cet outil est assez réussie… Vous pouvez par exemple assigner le visuel de votre choix à chacun de vos bookmarks. Cela améliore le rendu des pages et facilite l’accès à votre contenu.

Accès direct à tous mes bookmarks : 200 adresses utiles !

Puisque Symbaloo permet de partager son contenu, je vous offre un accès à 200 adresses utiles : Webdesign, Graphisme, Inspiration, Coding, Magazines, Tutoriaux, Groupes FlickR… Voici une mine de contenu classé par catégories, rien que pour vous chers lecteurs…

Cliquez sur les images pour accéder aux pages

Le contenu présenté dans chaque page est susceptible d’évoluer avec le temps. Les noms des sites inscrits sur les visuels ne sont parfois pas exhaustifs (par manque de place) et ne seront pas mis à jour par la suite. Rendez-vous donc sur mes pages pour voir les updates…

Pour terminer ce post je dirai que Symbaloo est un outil très utile bien qu’il ne soit pas révolutionnaire. Sa facilité d’utilisation, sa polyvalence, sa stabilité ( je n’ai pas encore rencontré de bug) et sa gratuité en font un service qui mérite d’être connu.

Ce petit manuel a été conçu par Harry Roberts, un développeur de 18 ans, exerçant son métier au Royaume-Uni. Malgré son jeune age, Harry possède déjà une bonne maitrise technique puisqu’il est spécialisé dans les CSS, les standards web, la sémantique XHTML et l’accessibilité.

Web Design+ s’adresse plutôt à ceux qui connaissent déjà le HTML et les CSS mais qui souhaitent parfaire leur technique en s’appropriant les bonnes pratiques. Lorsqu’on parle d’intégration web, même s’il existe différentes façons pour aborder un même problème, il y a néanmoins des solutions génériques, propres, respectueuses des standards. Ce sont ces solutions que vous trouverez dans ce guide.

Je sais qu’il existe de très nombreux documents présentant les standards du web. L’intérêt de celui-ci réside dans la clarté, la simplicité des explications, l’étendue des sujets traités et leur côté très pragmatique. C’est selon moi, un document qui peut s’avérer très utile en cas de doute sur un problème de construction de page web ou tout simplement pour en apprendre plus sur les standards, la sémantique ou sur l’accessibilité.

Web Design+ fait partie de CSS Wizardry, le site d’Harry Roberts sur lequel vous trouverez de nombreuses ressources parmi lesquelles son propre framework css « Typogridphy« , une rubrique « Toybox » où vous trouverez de nombreux snippets (php, css, xhtml), « Clecktionary » un dictionnaire humoristique dédié aux natifs de la ville de Cleckheaton (UK).

Designers Toolbox se décompose en trois rubriques principales auxquelles s’ajoute un espace personnel pour les utilisateurs souhaitant ouvrir un compte sur le site.

Dans la rubrique « Design Life » vous trouverez différents articles traitant du design en général, une sélection hebdomadaire de sites web intéressants etc…
La partie « Store » sur laquelle vous pourrez acheter de nombreuses ressources telles que des backgrounds format psd, des templates de documents divers et variés (contrats client, contrats de maintenance, devis pour travailleurs freelance etc…) ainsi que des ressources vectorielles. Autre chose intéressante, le site vous propose un outil pour créer votre portfolio. Je n’ai pas testé mais le service est gratuit les 15 premiers jours donc ça peut valoir le coup d’œil…

Mais c’est sans doute la rubrique « Design Ressources » qui est la plus intéressante… Là c’est la caverne d’Ali Baba ! Vous pourrez y trouver de nombreuses ressources entièrement gratuites : Templates pour print (enveloppes de différentes tailles, dossiers, jaquettes de cd/dvd vierges, business cards etc…) et de nombreux outils pour vous aider dans la création de vos maquettes web.

Pour les Web designers, je vous conseille d’aller faire un tour sur le lien « Web Safe Area » où vous pourrez télécharger gratuitement des templates (format psd) de fenêtres de navigateurs (Safari,Firefox et IE) sur différentes résolutions. Dans le même esprit, via le lien « Web browser elements« , le site met gratuitement à disposition les psd de tous les éléments pour vos formulaires (boutons radio, check-box, textarea, input-button, input-text, etc…) sur plusieurs navigateurs et en fonction des systèmes d’exploitation (XP, Vista, Mac). Ces ressources seront vraiment un gain de temps si vous créez des maquettes web donc n’hésitez pas à les télécharger, c’est gratuit !

Le site met également de nombreux outils à disposition : une liste des tailles standard des bandeaux web, les éléments graphiques de l’Iphone (Iphone GUI), un générateur de texte « lorem ipsum », une liste des principaux caractères spéciaux codés en html etc…

Vous l’aurez compris, Designers Toolbox est une adresse très utile, ne serait-ce que pour les nombreuses ressources et outils mis gratuitement à votre disposition.

Phoenix pour la création et la retouche d’image. Cet outil ressemble un peu à Photoshop. Vous pourrez y retrouver le système de calques, les filtres, les options de fusion. Vous créez de toute pièce votre image ou vous l’importez depuis votre pc ou depuis le net. Une palette d’outils propose des formes de sélection, baguette magique, pinceaux, formes, etc… Bref, si vous utilisez Photoshop, vous ne serez pas vraiment perdu.

Screenshot Phoenix

Avec Peacok, Aviary propose un nouveau moyen de créer des images. A première vue c’est assez perturbant mais après quelques minutes on comprend de suite la logique. Dans cette interface, les outils sont présentés sous forme de fenêtres que l’on peut connecter entre elles afin d’y ajouter des effets.

Ex : Pour appliquer un réglage d’histogramme à votre image, il vous suffit de connecter le module « layer » (qui est la base de votre image) au module histogramme. En double cliquant sur chaque module, on accède à leurs paramètres. C’est un système très efficace et incroyablement riche d’effets et de filtres en tous genre. L’interface de Peacock est une solution vraiment créative qui ouvre de nouvelles voies, très intéressantes d’un point de vue ergonomique.

Screenshot Peacock

Toucan est un logiciel permettant de jouer avec les couleurs. Les solutions qui proposent ce service sont nombreuses : ColourLover, Kuler, ColorBlender, Color Palette generator, 9rules logo color etc etc… Rien de bien nouveau donc, si ce n’est que chez Aviary, tout est à portée de main. On peut définir des couleurs directement à partir de la roue colorimétrique, dégager les couleurs composant une image préalablement uploadée, enregistrer ses propres nuanciers et visualiser les compositions des autres utilisateurs bref, tout est là.

Screenshot Toucan

La suite d’outils Aviary est en constante évolution. De nombreux logiciels viendront s’ajouter à la liste :

• Raven : création vectorielle (disponible en version Alpha pour les utilisateurs ayant un compte)
• Myna : Audio editor
• Eagle : Pixel pattern recognition
• Owl : Desktop publishing
• Penguin : Word processor
• Pigeon : Painting simulator
• Hummingbird : 3D modeler
• Ibis : Font creator
• Roc : Music generator
• Starling : Video editor
• Tern : Terrain generator