Ajout des versions anglaise et espagnole.

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

1. Gestion de la typographie en XHTML/CSS

La plupart des éléments textuels contenus dans un document XHTML peuvent être mis en forme grâce aux feuilles de style CSS de façon convenable. Les attributs CSS d’un élément de type texte sont assez nombreux et permettent pas mal de choses.

1.1. La taille

Le premier attribut est celui gérant la taille : font-size. La taille d’une typo est définie selon des unités relatives ou absolues.

• Le pixel px
  Unité de mesure absolue.
• Le point pt
  Unité de mesure absolue.
• L’«em» em
  Unité relative se basant sur la taille de police par défaut de la page.
• Le pourcent %
  Unité relative se basant sur la taille de typo définie pour l’élément parent.
• Les valeurs smaller et larger
  Valeurs relatives augmentant ou diminuant la taille de typo par rapport à celle définie pour l’élément parent.
• Les valeurs xx-small, x-small, small, medium, large, x-large, xx-large
  Valeurs absolues ayant un rapport de 1.2 entre elles.

Pour plus de détails, voici quelques articles traitant des tailles de typo :

• Typographie web : gérer la taille du texte avec les «em»
• Définir des tailles de police

1.2. La casse

La casse de la typo peut être modifiée par deux propriétés CSS : font-variant et text-transform. Ceci permet d’afficher un texte en majuscule alors qu’il est en minuscule dans le code HTML, par exemple. Cette technique est à préférer à l’entrée directe en majuscule dans le contenu de la page.

• text-transform:uppercase;
  Tout le texte est passé en majuscule.
• text-transform:lowercase;
  Tout le texte est passé en minuscule.
• text-transform:capitalize;
  La première lettre de chaque mot est passé en majuscule.
• font-variant:small-caps;
  Les lettres minuscules sont affichées en petites majuscules.

1.3. La graisse et l’italique

Plus classiquement, la graisse et l’inclinaison peuvent-être gérées grâce aux propriétés CSS suivantes :

• La graisse font-weight
  Permet de passer la graisse en gras (bold) ou nono-gras (normal). A noter qu’un système de valeurs absolues (100 → 900) et relatif (bolder, lighter) existe, mais qu’il ne fonctionne pas. Attention ! Si le but est de mettre du texte en avant dans un paragraphe, par exemple, ne pas utiliser le mise en forme CSS mais l’élément <strong> : en effet, dans ce cas, la graisse a une valeur sémantique.
• Le style font-style
  Permet d’afficher la typo en Italique (italic). De même que pour la graisse, s’il s’agit d’afficher une portion de texte en italique au sein d’un texte, utiliser l’élément <em> puisque le passage en italique a une valeur sémantique.

1.4. Les espacements

Moins utilisées, les propriétés CSS portant sur les espacements entre les caractères, entre les mots et entre les lignes permettent un réel enrichissement de l’effet typographique. Les différents espacements sont gérés par les propriétés CSS suivantes :

• Espacement de caractères letter-spacing
Permet de régler l’espacement entre les caractères. Les unités utilisées sont les mêmes que pour les tailles de typo (px, pt, em et %) et peuvent être négatives.
• Espacement des mots word-spacing
  Permet de régler l’espacement entre les mots. Les unités utilisées sont les mêmes que pour les tailles de typo (px, pt, em et %) et peuvent être négatives.
• Hauteur de ligne line-height
  Permet de régler la hauteur de ligne. Les unités utilisées sont les mêmes que pour les tailles de typo (px, pt, em et %) et peuvent être négatives.

1.5. Les familles de fontes

Enfin voici la dernière propriété sur laquelle influer en CSS : la famille de fonte (font-family). L’utilisation de cette propriété se fait par priorité en fonction des fontes installées dans l’OS du poste client : on spécifie une suite de famille de fonte, la première est affichée si elle est présente, sinon, on passe à la seconde, etc.

• Famille de fonte font-family:Georgia, ‘Times New Roman’, Times, serifCete configuration affichera le texte en Georgia, sinon en Times New Roman, enfin, si aucune des deux polices n’est installée sur le poste client, c’est la polie de type ‘serif’ par défaut qui sera utilisée.

Seules quelques famille de police sont installées par défaut dans les principaux OS. On retrouve pour chaque OS les polices suivantes :

Pour plus de détails, voici quelques articles reprenant des résultats de tests plus complets :

• Guide to CSS Font Stacks [en]
• Font Matrix [en]
• Complete guide to pre-installed fonts [en]

Suite »

Behind The Web Design met tout en œuvre pour rester fidèle à votre création, et ce, dans les moindres détails. En effet, si la valeur ajouté d’un design réside dans ses principes graphiques et son ergonomie, ce qui va faire la différence sont les détails, la finesse des finitions. Nous vous offrons une qualité d’intégration la plus haute possibel, une compatibilité avec les différents navigateurs et une dégradation élégante sur des navigateurs obsolètes.

Conseil

Behind The Web Design vous apporte également du conseil en ergonomie et sur les contraintes du Web, permettant ainsi une optimisation du temps de création du design du site de votre client.

Déclinaison graphique

Enfin, Nous vous proposons également des prestations de déclinaison des pages du site. Vous créez une page modèle qui est déclinée par nos soins pour toutes les pages du site. Ainsi, vous pouvez vous concentrer sur votre coeur de métier : la création, en vous dégageant de la partie production, à moindre valeur ajoutée pour vous.

Behind The Web Design met à votre portée les dernières innovations en matière de développement Web. C’est grâce à une veille technologique constante et minutieuse que Behind The Web Design recense les meilleures technologies disponibles sur le marché.

Des technologies adaptées et durables

L’utilisation de la technologie adaptée au besoin de votre client est d’une importance capitale à court comme à long terme. En effet, il s’agit de répondre de la manière la plus exacte et la plus qualitative possible à la demande du client, mais également (et surtout) de permettre à son produit Web d’avoir une vie après le développement : évolution, ajout de fonctionnalités, facilité de mise à jour, etc.

Behind The Web Design met tout en oeuvre afin de fournir à votre client un développement de qualité et durable.