Choix des polices pour le web – comment aller plus loin?

Le choix des polices pour le web a toujours été très limité. Certaines technologies de remplacement ont été inventées, pour palier au problème d’alignement des différentes navigateurs sur un modèle standard de la gestion de la typographie… L’avenir s’annonce meilleur avec l’adoption du Module CSS3 Fonts… si l’histoire ne se répète pas!
Un attendant, un petit panorama des techniques envisageables pour gérer la typographie sur le web.

WebSafe

Il s’agit ici de choisir une police qui sera présent sur les ordinateurs de tous les visiteurs de votre site, qu’ils aient un PC, un MAC, un LINUX (et toutes les déclinaisons de distributions)… L’idéal étant de choisir une police présente sur toutes les plateformes, il est aussi possible de choisir une famille de police et de préciser une police de secours.

Bien que les technologies évoluent, le choix d’une police websafe pour la police principale de votre site reste toujours la meilleure façon de conserver l’intégrité du design de votre site, tout en garantissant une bonne interprétation par les moteurs et une bonne accessibilité. Certes, le choix est limité, mais certaines polices « standard » permettent de faire des choses très jolies.

sIfr

En combinant Javascript, DOM et conteneurs flash, Shaun Inman, Mike Davidson et Mark Wubben ont créé sIfr (pour Scalable Inman Flash Replacement). Cette technique, désormais disponible en version 3 permet tout simplement le remplacement des textes par du flash.

Au niveau du code, on retrouve le texte, donc pas de problème concernant le référencement (il s’agit d’une classe de style appliquée à un conteneur html).

Si l’on ne peut pas remplacer tout un texte avec cette technique, cela permet néanmoins à deux nombreux sites et blogs d’avoir des titres et sous-titres plus attractifs.

Avantages :

• Beaucoup plus de choix de polices qu’en web-safe
• Utilisation du flash, présent chez 97% des utilisateurs
• Possibilité de sélectionner le texte

Inconvénients :

• lenteur de chargement
• difficile à mettre en oeuvre
• difficultés à faire évoluer la police une fois mise en oeuvre (si vous voulez grossir le texte, en comparaisont avec un texte standard dont le format peut être changer rapidement dans les CSS).
• Attention aux notions de droits d’auteurs sur les polices.

FLIR

Flir permet de remplacer un texte par une image grâce à PHP et sa librairie GD. L’image contient donc le texte à afficher, dans la police souhaitée.

Avantage :

• Pas de problème de droits d’auteurs : le texte est contenu dans une image.

Inconvénients :

• Ne fonctionne qu’avec un site en PHP,
• Ne permet pas de sélectionner le texte.

Cufón et TypeFace.js

Cufon et TypeFace sont deux alternatives intéressantes à sIfr. Il s’agit là de convertir une police standard en un format spécifique qui permet de générer un texte de remplacement en CANVAS ou VML.

Avantages :

• Pas besoin de flash, s’affiche donc même si le plugin n’est pas activé,
• Plus léger et rapide que sIfr.

Inconvénients :

• l’impossibilité de sélectionner le texte,
• la lenteur sur Internet Explorer, dans certains cas,
• Attention aux notions de droits d’auteurs sur les polices.

Cufon a pris une longueur d’avance à Typeface grâce à la compatibilité avec IE8, 2Ko de moins au niveau du poids du script, le support d’un plus grand type de police (TTF, OTF, Postcript, PFB là où Typeface ne gère pour l’instant que le TTF). Cependant, TypeFace permet de gérer quelques attributs CSS complémentaires. A vous de choisir, ma préférence allant à Cufon.

@font-face

C’est l’avenir et le présent… Cette technique permettant d’appeler directement une police sur un serveur est déjà fonctionnelle sur Safari, Firefox, Opera, Chrome. Pour Internet Explorer, c’est à nouveau une autre histoire: Microsoft l’implémente pour un format de police bien spécifique (EOT).

Tant que Microsoft ne permettra pas d’utiliser d’autres types de polices, il faudra une fois encore adopter une mise en forme spécifique IE (et convertir une police TTF en EOT).

Avantages :

• Intégration directe des polices
• Facile à intégrer pour tout un site
• Assez rapide

Inconvénients :

• Mauvaise prise en charge par Internet Explorer
• Attention aux droits d’auteurs.

TYPEKIT: un service pour intégrer des polices légalement

TypeKit est un service en ligne payant (ou gratuit pour l’essai) qui permet de choisir parmi un grand nombre de polices (près de 500) et de les appeler par la technique @font-face. L’abonnement mensuel que vous payez (à partir de $25 / an) vous permet d’utiliser jusqu’à 5 polices différentes sur votre site, en total respect de la loi. Les polices sont hébergées sur le serveur de TYPEKIT.

Voici donc un petit tour d’horizon… Le design du blog n’est pas encore retravaillé (vive le thème de base, génial pour se concentrer sur le fond et non la forme), mais je pense utiliser @font-face et/ou Cufon. Et vous, qu’utilisez-vous pour vos sites?

No related posts.

La liste des entrées complémentaires est établie par le module d’extension YARPP.