Boris Forconi — Webdesigner freelance à Nantes 

Comme je l’expliquais dans mon précédent post, l’élargissement des po­lices de ca­rac­tères pos­sibles est, en ce mo­ment, un su­jet brû­lant dans la com­mu­nauté web. En cause? Les nou­velles pro­prié­tés — prin­ci­pa­le­ment @font-face — prises en compte par fi­re­fox 3.5 et sa­fari 4, ainsi que l’édition 2009 de la conven­tion Typecon. L’occasion d’écrire un ar­ticle fran­co­phone sur le su­jet, pour re­ve­nir sur l’état ac­tuel des choses, les al­ter­na­tives et l’avenir de ce su­jet. Merci à I Love Typography, qui m’a donné une base so­lide pour écrire cet ar­ticle.

Les po­lices “web-safe”

Jusqu’à pré­sent, le web­de­si­gner de­vait li­mi­ter l’usage des fontes uti­li­sées à un nombre res­treint. Ce nombre est fonc­tion des po­lices de ca­rac­tères ins­tal­lées par dé­faut sur les postes des in­ter­nautes. Il faut d’ailleurs bien pen­ser à pré­ci­ser des al­ter­na­tives, au cas où l’internaute ne pos­sé­de­rait pas la fonte pré­ci­sée. Pour ma part, j’utilise comme base le ta­bleau sui­vant :

Mon tableau des polices de caractères web
pdf — 204Ko

Ce do­cu­ment a pour base une ex­cel­lente sé­lec­tion sur Ampsoft, Common fonts to all versions of Windows & Mac equivalents. Je l’ai en­suite mo­di­fié au fil de mes dé­cou­vertes sur le web, de mon ex­pé­rience, et sur­tout des pour­cen­tages d’installation des po­lices sur dif­fé­rentes pla­te­formes (Sur Code-Style, pour les sans-serifs, les serifs et Monospaces.)

Il faut bien sûr com­bi­ner les fontes de ce ta­bleau pour pro­po­ser des al­ter­na­tives CSS à chaque po­lice. N’hésitez pas à ajou­ter vos propres fa­milles, et à faire vos pro­po­si­tions dans les commentaires de cet ar­ticle.

Les “hacks”

Face à ce nombre res­treint de fontes, des so­lu­tions ba­sées sur des scripts de rem­pla­ce­ment de po­lice sont ap­pa­rues.

La plus connue et uti­li­sée est sIFR de Mike Davidson, Mark Wubben et Shaun Inman. Comme vous pou­vez le voir sur cette démo, ce script uti­lise Flash et Ja­vas­cript pour le rendu de po­lices de ca­rac­tères qui n’existent pas for­cé­ment sur l’ordinateur de l’internaute.

L’utilisation du plu­gin Flash pour mettre en place cette mé­thode a ra­pi­de­ment gêné un cer­tain nombre de pu­ristes. Des so­lu­tions en­tiè­re­ment ba­sées sur Ja­vas­cript sont ap­pa­rues : Cufón , Typeface.js, ou plus ré­cem­ment, Typeselect.

Bien qu’extrêmement bien conçues, éprou­vées et res­pec­tueuses des stan­dards et in­ter­nautes, toutes ces mé­thodes ont un point com­mun : elles alour­dissent le char­ge­ment des pages, et n’interviennent qu’après le char­ge­ment. De ce fait, elles ne sont viables prin­ci­pa­le­ment que pour les titres et sont, fon­da­men­ta­le­ment, des “hacks”.

@font-face change la donne

La pro­priété CSS3 @font-face, déjà prise en compte par Sa­fari (>3.1), Opéra (>10a) et Fi­re­fox (>3.1b), per­met de lier un fi­chier de po­lice (ttf, otf) à une page web. Les li­mi­ta­tions du nombre de po­lices de ca­rac­tères se trouvent ainsi to­ta­le­ment af­fran­chies, puisque dé­pen­dant de fontes pla­cées sur le ser­veur. En voici un superbe exemple (à voir sur les navigateurs concernés).

At­ten­tion ce­pen­dant au lis­sage de po­lices non adap­tées aux écrans, qui peuvent don­ner un rendu désa­gréable. Et sur­tout, at­ten­tion au termes de li­cence des po­lices pro­prié­taires uti­li­sées. Mieux vaut donc uti­li­ser des polices non-propriétaires avec font-face.

Mais alors, pour­quoi un dé­bat ?

Tous les web­de­si­gners et in­té­gra­teurs s’accordent pour dire qu’ils ai­me­raient avoir un choix de po­lices de ca­rac­tères plus vastes. D’un autre côté, les fon­de­ries ai­me­rait pro­té­ger, à juste titre, la base de leur com­merce, leurs fontes. Les fon­de­ries nous four­nissent un tra­vail d’orfèvre, et sont sou­vent de pe­tites struc­tures qui ont be­soin de pro­té­ger leur pro­priété in­tel­lec­tuelle pour sur­vivre. Les pro­blèmes qui se posent sont, ici, bien éloi­gnés de ceux qui se posent avec les énormes in­dus­triels du disque.

Nous avons be­soin d’eux et de leur tra­vail, et le pi­ra­tage les af­fecte énor­mé­ment. Créer des po­lices de ca­rac­tères est un tra­vail de pro­fes­sion­nel. Même si cer­taines fontes faites par des ama­teurs, sur dafont par exemple, ont par­fois une qua­lité ac­cep­table, c’est loin d’être suf­fi­sant.

Hors, les po­lices mises sur ser­veur pour uti­li­ser @font-face se­ront té­lé­char­geables aussi fa­ci­le­ment qu’une image, pour être en­suite uti­li­sées sur son propre poste. D’où le dé­bat qui fait rage en ce mo­ment.

Une so­lu­tion : EOT

Microsoft, sou­tenu par Adobe et Monotype, a pro­posé au W3C, et mis en place le for­mat EOT (Em­bed­ded Open­Type For­mat), pour IE. Ce for­mat pro­prié­taire em­pêche le vol de la po­lice de ca­rac­tère in­cluse, grâce à des res­tric­tions d’utilisations na­tives.

Cette pro­po­si­tion n’a pas trouvé suf­fi­sam­ment de sou­tien en rai­son de pré­oc­cu­pa­tions DRM (Di­gi­tal Rights Ma­na­ge­ment), et semble aban­donné en par­tie pour le mo­ment (sauf un for­mat dé­rivé, plus souple, bap­tisé “EOT Lite”).

L’alternative : .web­font

La se­maine pas­sée, deux pro­gram­meurs, Tal Leming & Erik van Blokland ont pro­posé au W3C une al­ter­na­tive non pro­prié­taire à EOT, bap­tisé .web­font ou WFNT, dont vous pou­vez lire les spé­ci­fi­ca­tions ici. Elle a très vite ob­tenu le soutien massif des fon­de­ries, dont la très res­pec­tée Hoefler & Frere-Jones.

Ba­si­que­ment, le for­mat .web­font est une ar­chive com­po­sée de deux fi­chiers (la po­lice, et un fi­chier de confi­gu­ra­tion xml). Les au­to­ri­sa­tions et méta-données conte­nues dans le XML se­raient en­suite in­ter­pré­tées par les na­vi­ga­teurs.

Reste à sa­voir si suf­fi­sam­ment d’acteurs in­fluents adhé­re­ront à ce pro­jet pour convaincre le W3C. On at­tend les ré­ac­tions des prin­ci­paux édi­teurs de na­vi­ga­teurs comme Mozilla. La mise en place de cette tech­no­lo­gie, dans tous les cas, risque d’être longue.

En at­ten­dant

Une autre fa­çon d’aborder le pro­blème a été en­vi­sa­gée par Typekit et Fontdeck . Le prin­cipe est simple : payer un abon­ne­ment pour louer les po­lices de ca­rac­tère sur un ser­veur tiers. Il suf­fit de joindre un fi­chier ja­vas­cript à sa page web, pour pou­voir in­té­grer les fontes de lo­ca­tions dans les pro­prié­tés CSS font-family. Un très bel exemple ici : no­va­teur, ra­pide et res­pec­tueux. On at­tend les ta­rifs, pour sa­voir si les pe­tites struc­tures au­ront ac­cès à ces ser­vices.

Conclu­sion

Nous sommes au coeur de l’événement. De grandes dé­ci­sions sont en train d’être prises, pour un fu­tur plus souple du mé­tier de web­de­si­gner. D’abord avec typekit, puis avec des normes comme webfont.

Cette tran­si­tion ne se fera pas sans sueur, pour deux rai­sons. D’une part, la plu­part des po­lices de ca­rac­tères ne sont pas op­ti­mi­sés pour l’écran. D’autre part, chaque lot d’innovations ou­vrant de nou­veaux ho­ri­zons en­traîne une part d’excès d’enthousiasme — et j’ai bien peur que l’on ren­contre d’ici peu d’affreux mé­langes de po­lices Papyrus et Mistral sur la toile !