Adieu Verdana, Arial et Georgia

par
   

Copie d'écran du site The New YorkerPendant 15 ans, la plupart du texte lu sur le web l'était dans l'une des trois polices suivantes : Verdana, Arial et Georgia principalement. Cette époque est maintenant terminée.

Le tag HTML @font-face est maintenant largement supporté par les navigateurs web. Les sites peuvent enfin respecter leur norme typographique, sans remplacer le texte par des images.

C'est ce que fait maintenant la publication « The New Yorker » par exemple.

Le blogue d'Adviso tire également parti de cette fonctionnalité depuis environ 6 mois.

Comment ça marche?

Sans entrer dans les détails, voici ce qu'on trouve dans le code source des pages du New Yorker.

@font-face 
{font-family: "ny-irvin-em-101104-h01-1", 
Times New Roman, serif}

On voit que le nom de la police souhaitée est directement inscrit dans la feuille de style de la page (ny-irvin-em-101104-h01-1). On y voit ensuite les polices qui s'afficheront si la police préférée n'est pas disponible (times new roman, serif).

Quels navigateurs supportent les nouvelles polices web ?

La situation est assez complexe, car il existe plus qu'un format de police. Mais on peut dire que le support est maintenant généralisé à tous les navigateurs web récents.

Il est également utile de se rappeler que cette fonctionnalité est rétrocompatible : les navigateurs qui ne supportent pas la fonctionnalité montrent simplement la police de remplacement choisie par le développeur.

Est-ce que ça fonctionne aussi pour les courriels?

Contrairement à ce qu'on pourrait croire, très peu d'applications de courriels supportent les nouvelles polices web. D'après un article de Campaign Monitor publié en mars 2010, les seules exceptions seraient l'application Mail sur le Mac OX et sur l'iOS (iPhone, iPod, iPad). Pour les spécialistes des infolettres, ce n'est toutefois pas si surprenant, car ils savent qu'une fraction des possibilités des standards HTML et CSS fonctionnent dans les courriels.

C'est compliqué à utiliser?

Oui et non.

Si on veut les intégrer « à la main », ça peut être assez compliqué. Sans compter qu'il faut alors acheter les polices et les placer sur notre serveur web.

Heureusement, de nouveaux services comme Typekit. Fontdeck et Google Webfont permettent de profiter des nouvelles polices, mais sous forme de service.

L'exemple de Typekit

Voici les principaux avantages de Typekit par comparaison à une intégration manuelle.

Simplicité

Copie d'écran du site de l'outil de configuration de TypekitTypeKit permet d'utiliser les nouvelles polices en ajoutant une ligne de code aux pages d'un site. Le code de Typekit se charge alors de toutes les questions de compatibilité techniques. Les polices restent également hébergées chez Typekit.

Le panneau de configuration de Typekit permet de sélectionner les parties du site qu'on veut cibler. C'est donc tout de même un peu technique, car on parle ici de cibler des classes de la feuille de style du site.

Diversité des polices

L'autre avantage de Typekit est le grand nombre de polices disponibles.

Beaucoup de polices sont gratuites, mais certaines requièrent un abonnement payant. Cependant, le coût des abonnements est relativement faible, et il est proportionnel au nombre de visiteurs.

Conclusion

Les designers graphiques seront probablement emballés par ces nouvelles possibilités, mais devront encore être patients, car le catalogue des polices disponibles n'est pas encore très vaste. De plus, ils ne pourront toujours pas les utiliser pour les infolettres.

Quant aux intégrateurs, c'est à eux que reviendra la tâche additionnelle de configurer ces différents outils.

D'un point de vue ergonomique, il faudra être vigilant quant à la lisibilité des nouvelles polices, car celles qui présentent une excellente lisibilité à l'écran sont l'exception plutôt que la règle.

 M'abonner au Point de Repère

Chaque mois, soyez au fait des trouvailles, des bonnes pratiques et de nos nouvelles avec l’infolettre d’Adviso. À tout moment, il vous sera possible de vous désabonner. Politique de confidentialité.

Si vous préférez, écrivez-nous à

conseil@adviso.ca

Ou téléphonez-nous directement au

514 598 1881

Merci de votre demande!

Vous recevrez une réponse de notre part sous peu.

×

Une erreur est survenue

S’il vous plaît nous contacter directement par courriel à l’adresse conseil@adviso.ca ou par téléphone au 514-598-1881. Merci !

×

 

COMMENTAIRES

Laisser un commentaire

XHTML: Balises autorisées <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>