Web et Typographie I

par Damien le 24/09/09

La typographie est un élément essentiel du webdesign. En effet, c’est le premier vecteur d’information d’un site web : il doit donc être traité avec le plus grand soin. Cet article va traiter des différentes techniques d’affichage et de mise en forme typographique des éléments textuels dans un webdesign. Attention, on ne parle ici que des textes de contenus voire de navigation qui peuvent d’ailleurs être amenés à être traités dynamiquement par un CMS, et non pas des éléments textuels intégrés au graphisme du site, ni des choix esthétiques et/ou ergonomiques de typos.

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 »