La sortie de Firefox 3.5 et sa généralisation progressive (la mise à jour est désormais proposée aux utilisateurs de la version 3), signifie notamment que le public pouvant bénéficier des sites utilisant la propriété CSS @font-face va connaître une explosion démographique.

Avant : les créateurs de sites web ne pouvaient utiliser que des polices de caractère installées sur les postes des utilisateurs. Concrètement ça limitait la typographie web à une poignée de polices, essentiellement Times New Roman, Georgia, Arial, Verdana... (qui a dit Comic Sans ?!).

Maintenant : en fait c’est pareil si l’on souhaite le même rendu sur tous les navigateurs (pour quoi faire ?) mais si l’on veut aller plus loin il est désormais possible d’utiliser la police de son choix... enfin si la licence d’utilisation de celle-ci l’autorise, il faut donc préciser : la police de son choix parmi les quelques-unes l’autorisant Oui aussi surprenant que cela puisse paraître à beaucoup de monde, les typos s’achètent aussi, probablement pour faire vivre les typographes.

Donc si vous avez eu le bon goût de vous doter de Safari 4, Firefox 3.5 ou la RC d’Opéra 10, vous ne verrez plus le web de la même façon. Installez l’un de ces navigateurs si ce n’est déjà fait et visitez ces quelques sites ou encore désormais valeryxavierlentz.eu ou dirtyclubber.com. Vous ne remarquez rien ? Parfait. Mais c’est plus joli.

Alors naturellement, il existait et il existe des moyens d’afficher des typos exotiques et sophistiquées aujourd’hui. Flash et Javascript sont mis à contributions dans des techniques pittoresques de remplacement d’images comme sIFR par exemple. On peut également utiliser des images dynamiques générées par le serveur. Le CMS SPIP (par exemple, au hasard) propose ce type d’images typographiques nativement. Cette technique est en pratique limitée aux titres mais permet des traitements que @font-face ne permettra pas à ma connaissance (cf. les techniques proposées par Arnaud Martin pour SPIP).

Il reste la question des performances web. C’est à dire ce qui permet d’éviter la formation de toiles d’araignées sur la souris de vos visiteurs attendant le chargement de vos pages web. Une typo ça pèse... 153 ko pour celle que je viens d’installer sur taurillon.org, la très discrète LiberationSerif. Sur zzz.rezo.net, Fil a deux typos pour ce poids là.

Alors qu’est-ce que ça donne sur la page d’accueil de l’animal (cache navigateur vide) ? Selon Firebug :

• avec les images typographiques : 76 requêtes (oui, je sais...), 624 ko
• avec @font-face : 65 requêtes (nettement moins pire déjà), 738 ko
• avec du Georgia : 64 requêtes (bah oui, une de moins forcément) et 584 ko (le poids de la typo en moins, donc).

Même si la page d’accueil comportait onze titres en images, elle pèse moins qu’avec le chargement de la typo (10 ko chacune environ). Toutefois, la multiplication des requêtes (c’est à dire les échanges entre le navigateur et le serveur pour charger l’ensemble des éléments constituant la page) augmente les délais. À la louche (car c’est difficile à dire avec les widget tiers), deux secondes de plus qu’avec @font-face. Sans cette dernière c’est encore deux secondes de moins environ.

Il reste à trouver une typo plus jolie pour ce site, et pas trop lourde. Demander l’avis des 4 rédacteurs en chef aussi, peut être.