Web et Typographie II

par Damien le 23/11/09

2. Typographies spéciales et solutions alternatives

Comme nous l’avons vu précédemment, les polices exploitables en XHTML/CSS sont peu nombreuses et limitent les possibilités graphiques. L’utilisation de polices autres peut, dans certains cas s’avérer nécessaire. Il existe différentes techniques permettant d’afficher du texte XHTML avec des polices de son choix : le remplacement de typos. Le principe est de remplacer un élément XHTML par un élément graphique généré automatiquement : objet Flash©, images et élément CANVA.

2.1. Solutions de remplacement de typos Flash

Les solutions de remplacement de font utilisant la technologie Flash© utilisent Javascript. Le principe est le suivant : au chargement de la page, le script lit les éléments XHTML à afficher avec la typo et les remplace par une animation Flash© prenant le texte en paramètre et l’affichant avec la typo voulue. L’animation Flash© contient la police spéciale encapsulée (embeded). Ces système ont l’avantage d’afficher dans le code XHTML du texte lisible par les moteurs de recherche ne pénalisant pas ainsi le référencement.

Voici quelques système de remplacement de font en Flash© :

Cufón

Cufón est, à mon avis le plus abouti des systèmes de remplacement de police. Voici ses caratéristiques :

• Gestion du rollover
• Gestion des couleurs avancées (Cufón gère même les dégradés et ombres portées !)
• Gestion de la hauteur de ligne (line-height)
• Gestion des opacités

• Site web de Cufón

sIFR 2

sIFR 2 est une bonne alternative. Il utilise la même technique. A noter que sIFR 3 est en beta. Voici ses caractéristiques :

• Gestion du rollover
• Texte sélectionnable

• Site web de sIFR 2
• Site web de sIFR 3

2.2. Solutions de remplacement de typos par images

Il existe deux méthodes pour remplacer des éléments  texte XHTML en images. La première se fait à priori (la page HTML est parsée, les éléments textuels sont remplacés par des images générées), la seconde sur le poste client, où le parsage et la génération d’image est faite par du code Javascript.

Méthode serveur

La méthode de P+C DTR effectue une analyse du code XHTML de chaque page,en extrait les balises et y insère une image pointant sur le script de génération d’image.

Le problème de cette solution est le peu de mise en forme que l’on peut appliquer : couleur, taille et fond sont les seuls paramètres sur lesquels on a la main. De plus, l’analyse du CSS permettant d’extraire ces paramètres ne se fait qu’une fois par session de navigateur, ce qui proscrit les styles d’éléments CSS différents d’un page à l’autre, par exemple.
Son point positif est que dans sa construction, il est très facile à intégrer à des pages, mêmes dynamiques.

• Site web de P+C DTR

Méthode mixte client+ serveur

Étant un mélange des deux méthodes, Facelift génère une image en PHP après avoir parsé la page via Javascript.

• Site web de Facelift

Méthode client

La solution tout client consiste à parser la page et générer l’image de l’élément typographique entièrement du côté client.

Typeface est utilise les éléments SVN ou Canvas selon les cas pour afficher l’image. Cela nécessite la création en ligne d’un fichier de vectorisation de la typo (convertisseur de typo).

• Site web de Typeface