Typo web

Nous, pauvres designers web, sommes bien malheureux. Je pense m’exprimer au nom de tous mes confrères lorsque je dis : les polices sur le web, c’est la misère.

Pourtant, le texte est un élément majeur du design d’une page web. Problème : sur le web le nombre de polices est limité. Là où un graphiste papier a à sa disposition un nombre quasi infini de polices, le designer web lui, en a 7 : arial, verdana, helvetica, georgia, times, trebuchet et courrier. Ca limite les effets de styles.

Historiquement, ceci s’explique par le fait qu’une page web n’encapsule pas les polices, contrairement à un fichier flash par exemple. Lors du rendu d’une page sur un écran, le navigateur se sert des polices présentes sur le poste client pour la mise en forme du texte. Si l’une des polices déclarée dans votre page n’est pas présente sur le poste client, le navigateur ne pourra pas l’afficher. On se limite donc aux polices les plus largement diffusées sur les différents OS. D’où le nombre réduit de polices.

Heureusement, les css sont là pour nous aider et nous faire passer de l’état pauvre designers bien malheureux, voire quasi frustés, à celui de riches designers heureux et épanouis [1]. Les CSS et leurs propriétés de texte permettent au final de s’en sortir pas trop mal. Petit inventaire quasi exhaustif.

Avant tout

La propriété font-family permet de choisir sa police. En général on renseigne plusieurs valeurs (helvetica, verdana, sans-serif) en mettant en première position sa police d prédilection. Ainsi si le visiteur n’a pas la première police sur son poste, la deuxième prendra le relais puis la troisième. En général, on achève cette liste avec une de ces 2 valeurs génériques : serif ou sans-serif, qui ne sont pas des noms de polices à proprement parler mais plutôt des familles génériques qui correspondent grosso modo à times ou arial, ou tout autre type de police serif (avec déco) ou sans-serif (sans deco) mais là, on est hors sujet.

Les basiques

Les propriétés font-size, font-weight et font-style nous permettent de changer la taille, la graisse et le style des polices. La base quoi.
Un peu plus exotique, la propriété text-transform permet de jouer avec la casse, très utilisé pour la titraille (h1, h2, h3…).

Téléchargez l’exemple

L’indispensable line-height

line-height permet de modifier la taille des interlignes. Carrément indispensable. Je ne fais pas une seule maquette sans changer le line-height standard (par défaut à 100%) pour le fixer à 150%. Ca fait respirer la page.

Téléchargez l’exemple

Plus avancé

word-spacing gère l’espace entre les mots tandis que letter-spacing gère l’espace entre les lettres. Cela permet d’étirer ou de contracter un texte. Ces 2 propriétés sont généralement utilisées ensemble : quand on modifie le word spacing, on équilibre visuellement le letter spacing. Ces 2 propriétés sont susceptibles de changer totalement l’esprit d’une police. A utiliser avec modération, plutôt dans les titres que dans les paragraphes. Mais en même temps, vous faites bien ce que vous voulez !

Téléchargez l’exemple

Les exotiques

font-variant transforme votre texte en petites capitales. Attention, ce n’est pas le même effet que text-transform. Sympa comme effet.
Le pseudo éléments :first-letter vous autorise à appliquer un style particulier à la première lettre de l’élément ciblé. Idéal pour créer un effet lettrine. Combiné à un float, c’est du plus bel effet (le texte flotte autour de la première lettre).

Téléchargez l’exemple

Moins utilisées

text-indent comme son nom l’indique indente votre texte. C’est-à-dire qu’il décale de x pixel le début de votre paragraphe. text-align permet de ferre son texte à gauche, à droite ou même de le justifier. Ces 2 propriétés sont peu utilisées en web : le texte est très souvent ferré à gauche, rarement à droite et quasiment jamais justifié (pour éviter les effets cheminées dans les paragraphes).

Téléchargez l’exemple

Pour plus d’infos sur toutes ces propriétés, je vous invite à consulter le site du W3schools sur les propriétés font et texte.

Bien sûr, il existe d’autres méthodes plus sophistiquées permettant de surmonter les limites des navigateurs web, en appelant un fichier flash dynamiquement par exemple (IFR) ou en utilisant des images et du javascript, le tout restant très accessible donc ne pénalisant pas le référencement, mais là on se lance tout de suite dans l’usine à gaz. D’ailleurs, je ne connais pas de gros sites utilisant ce genre de méthode pour la typo.

Et aujourd’hui avec du texte basique, on est plus très loin d’un rendu image. sur mac les polices sont anti aliasées (c-à-d que le navigateur lisse les polices) et on peut espérer qu’avec la sortie de Vista, Microsoft va s’aligner. L’utilisation des CSS, même si les effets restent limités, me paraît être une bonne piste.

1. quoique, riche, ça se discute