Boris Forconi — Webdesigner et co-gérant de Stéréosuper 

Il y a presque un an sur ce blog, je dressais un état des lieux sur l’utilisation des polices de caractères sur le web. L’occasion de faire le bilan point par point, et de voir comment les choses ont évolué depuis. Si vous ne l’avez pas encore fait, je vous recommande la lecture de ce précédent article avant d’aller plus loin…

Les polices “web-safe”

Je vous parlais de ces polices dites “web-safe”, que l’on peut utiliser sans trop de soucis de compatibilité entre les clients et les navigateurs. Je vous avais aussi parlé du tableau que je m'étais construis pour consigner la liste de ces fontes.

Je n'ai pas mis à jour ce tableau. Normal, aucune révolution numérique ne va ajouter une police par défaut à tous les ordinateurs du globe.

Ceci dit, les évolutions des navigateurs ont permis une amélioration du rendu de ces fontes.

text-rendering: optimizeLegibility;

Par exemple, l'instruction CSS précédente va permettre, sous Safari, Chrome & Firefox (où elle est appliquée, par défaut, sur les polices de corps supérieurs à 20px), d'améliorer les ligatures et l'approche typographique.

Un exemple sur le titre du blog de Kyle Meyer, astheria :

Un autre exemple est l'instruction "font-size-adjust”, qui permet de normaliser la hauteur d'x (fonctionne uniquement sur Firefox).

Une autre pratique émerge au niveau des font-stack. Vous le savez certainement, lors de la définition des polices de caractères utilisées dans un site, il est possible de lister les fontes dans leur ordre de préférence d’affichage.

font-family: “Helvetica neue”, Arial, sans-serif

Dans cet exemple, si l’utilisateur possède la fonte “Helvetica Neue” d’installée sur son poste, le texte sera affiché avec cette police. Si il ne la possède pas, on l’affiche en Arial, etc…

Revenons à nos moutons : souvent, ces font-stacks sont constituées d’une liste de polices “web-safe”. De plus en plus, les designers utilisent d’autres polices, pour permettre à ceux qui en sont équipés un affichage plus agréable des pages. Pensez donc bien à votre cible, et prenez garde à choisir des familles de polices qui ont à peu près la même chasse.

All for Design en est un excellent exemple (cocorico) avec son font-stack : font-family:Garamond, Baskerville, “Times New Roman”, serif;. Profitez-en pour lire son article sur le making-of de ce site, passionnant.

Au passage, une excellente ressource quant à la disponibilité des fontes en fonctions des profils d’internaute est visible sur 24ways, appellée font-matrix.

En résumé :

• Continuez à faire attention à bien utiliser des polices répandues;
• Surveillez les nouvelles fonctionnalités CSS, une simple ligne peut parfois grandement améliorer le rendu typographique de l’ensemble de la page;
• Enrichissez vos familles de polices avec des fontes moins répandues de chasse approchante. Ceux qui peuvent en profiter apprécieront, les autres n’y verront que du feu.

les “hacks”

Je vous parlais il y a un an de solution alternatives pour intégrer des polices comme sIFR (dont la version 3 apporte de grandes améliorations), Cufón ou Typeselect.

Sur ce blog, les titres sont affichés en Alternate Gothic grâce à sIFR, à base de technologie Flash. Depuis, il y eu les grands débats sur l’usage de Flash (avec l’iphone puis l’ipad). Je ne me prononcerais pas sur ces débats stériles, mais sachez que pour faire votre choix, il faut prendre en compte les éléments suivants :

• Le site concerné aura-t-il d’autres modules en Flash? Par exemple, je présente des travaux en Flash sur ce book. à priori, les gens auront besoin d’un plug-in Flash installé pour lire ces animations.
• La police de caractère que vous voulez utiliser a t-elle des restrictions de license? Pour certaines polices, il sera possible d’utiliser sIFR, mais pas Cùfon ou @font-face. C’est le cas de l’Alternate Gothic de mes titres (voir la licence ici).
• Si vous avez répondu “non” aux deux questions précédentes, n’utilisez pas sIFR. Ne vous embarrassez pas d’un plug-in Flash, les alternatives s’appliqueront à merveille.

@font-face

Rappel de mon précédent article : la propriété CSS3 @font-face, déjà prise en compte par Safari (>3.1), Opéra (>10a), Firefox (>3.1b) et Chrome, permet de lier un fichier de police (ttf, otf) à une page web.

Il fallait s’y attendre, cette solution a explosé. Font-squirrel a une bibliothèque de polices gratuites de très bonne facture, que vous intègrerez dans vos sites avec une ridicule facilité.

De son côté, Typekit, solution payante, devrait être adoptée par toute agence web qui se respecte. Leur bibliothèque est fournie en fontes de qualité, et ne cesse de s’agrandir. Les fonderies les plus connues s’y sont mises (Hoefler & Frere-Jones, vous nous manquez!) : Veer, Suitcase, The League of Moveable Type, etc… Fontshop a même ouvert de nouvelles perspectives en permettant à ses clients de lier leurs achats de police à leur compte Typekit, rendant ainsi la bibliothèque expansible. Et encore une fois, l’usage de typekit est simple comme bonjour.

N’oubliez pas fontdeck, par Clearleft, qui a encore une bibliothèque toute jeune, mais qui est un service très prometteur.

Enfin, même si l’intégration de ces services est extrêmement simple, améliorez-la avec ces quelques recommandations sur l’usage de @font-face consignées ici par Paul Irish.

Conclusion

Le champ des possibles ne cesse de s’agrandir, nous avons de plus en plus de liberté quant au choix des polices que nous pouvons utiliser sur le web.

Attention à ne pas oublier :

• que certaines polices ne sont pas adaptées à un affichage sur écran;
• que ce n’est pas parce que vous mettez plus de polices différentes que votre page sera plus jolie;
• que “typographie” ne veut pas dire “choisir une police”;
• qu’il est possible d’aider automatiquement vos clients à améliorer le rendu typographique de leus contenus grâce à des lignes CSS, des plugins comme wp-typography ou des modules PHP comme php-typography.

On en reparle dans un an?