Le Web est un média naissant, l’information qu’il véhicule est transmise par des caractères et des images, animées ou pas. La typographie pour le Web a longtemps été LE parent pauvre du www, quelle misère de devoir composer avec les fameuses 11 polices compatibles !

Table de typographie du 9ème siècle

Non, ce n’est pas la première version du Comic Sans MS

On devait alors composer avec le peu de variété à notre disposition (bon alors pour ce site, Arial ou Verdana ? Youhou !), ou passer les titrages en mode image pour éviter d’avoir une mise en scène proche du traitement de texte. Et donc alourdir le poids de la page, perdre l’accessibilité du texte, et faire reculer le référencement naturel.

Mais c’est fini ! Réduite initialement à un rôle purement pratique (juste pour lire du texte), la typo reprend ses lettres de noblesse sur le Web, et devient enfin un vrai vecteur de communication et d’identification du locuteur.

La typo, c’est quoi ?

Pour faire court, la typographie c’est (source Wikipédia) :

…l’art d’assembler des caractères mobiles afin de créer des mots et des phrases et de les imprimer.

Pur mieux comprendre la typographie, on peut notamment distinguer :

  • la police (un ensemble de représentations visuelles de caractères),
  • le corps (la taille de la police, mesurée en points),
  • la mise en page (la disposition de ces caractères dans l’espace).

Pour pousser un peu plus loin dans le détail, on distingue les polices avec empattement (comme la Times New Roman) de celles sans empattement (comme la Sans-serif, aussi appelées « bâton »).

Au commencement…

Certaines typo sont vieilles comme le monde …enfin presque ! Par exemple, Helvetica a fêté ses 50 ans en 2007 (un film lui a même été dédié), Times New Roman fêtera ses 80 ans l’année prochaine.
Elles ont bien sûr été utilisées pour l’impression papier d’abord (la typographie existe quand même depuis 1440) et pour le web plus progressivement.

On se souvient tous plus ou moins de nos premières navigations sur internet, et encore mieux des premiers sites assez moches, avec ses pâtés de texte et ses liens en bleu canard

Avec l’émergence Net, de nouveaux métiers ont éclos. L’édition électronique a progressivement pris ses marques. Les CSS, ces feuilles de style qui permettent de définir une fois pour toute l’organisation et la présentation de l’ensemble des pages web d’un site, n’existent que depuis une petite dizaine d’année.
C’est le CSS, couplé à la standardisation des navigateurs, qui ont notamment permis à la typo web de prendre toute sa place.

La typo pour le web, différente du print

D’autres que nous l’ont très bien résumé, comme Anne-Sophie Fradier lors de son intervention à Paris Web 2010 (vu chez Graphisme & interactivité) :

La page web est un Volumen, pas un livre, on la déroule. Le papier a des dimensions fixes et un contenu immuable. [Elle] n’a pas de dimension réellement prévisible, le web mobile, tout ce que l’on sait c’est qu’il offre un écran au format portrait.

(…) Avoir une « fin de page » n’existe pas sur le web, il faut donc trouver d’autres moyens pour assurer des pauses et assurer le confort de lecture. (…) On peut utiliser beaucoup la couleur (…), cela ressort mieux et s’avère souvent plus facile qu’avec l’imprimé.

On ne peut donc pas concevoir une page papier de la même façon qu’une page web : impossible de prévoir la dimension du support de lecture (la taille de l’écran), ni la façon dont les internautes le liront (ils peuvent par exemple agrandir la taille du texte pour mieux le voir).

Ceci dit, l’édition web ouvre de nouvelles portes vers la créativité et l’esthétisme du texte. En bref, on peut en faire des tonnes, sans perdre en confort de lecture.

Et aujourd’hui alors ?

Et bien aujourd’hui, ladies and gentlemen, vos navigateurs permettent à nos petites mains d’agence web d’inclure directement les polices !

Ça veut dire ? Et bien fini le choix ridicule des 3/4 polices archi-compatibles, désormais la technique Font-face de CSS3 permet de commander au navigateur d’aller chercher sur Internet la police que vous désirez afficher. Ça change tout !!

Ce qui signifie également qu’il en est enfin fini des textes en image. Résultat : des pages plus jolies et plus légères, des titrages accessibles aux moteurs de recherches, et l’assurance de conserver la possibilité de les modifier à la volée sur la forme (contenu du texte) comme le fond (graisse, couleur, famille, etc.).

Il y a tout de même encore quelques réserves (la liste des typos qui existent en format Web n’est pas infinie), mais l’essentiel est là !

Un exemple de site qui « tourne » selon ce principe, le récent Aqua Bien Être de Nantes que nous avons réalisé pour la société NGE :

Spa Aqua Bien Etre à Nantes

Le Spa Aqua Bien Être à Nantes

Bien choisir une typo

À l’heure de choisir « sa » police, il convient de bien prendre le temps de tourner 7 fois son curseur autour du bouton de sélection.

Même s’il est possible d’en changer, autant éviter par exemple d’utiliser des polices dont on a usé et abusé (Comics Sans MS pour n’en citer qu’une, pas un menu de crêperie du fin fond du Trégor n’en est dépourvu…).

En effet choix des typos sur une page web est aujourd’hui tout aussi important que celui d’un logo : elle défini ou complète l’identité de celui qui l’arbore. Alors imaginez-vous le message global qui passe au moment de découvrir un site utilisant Comics Sans MS. Le site Bancomicsans se charge d’ailleurs de lui tailler un costard…

Autre conseil pratique dans le cas où vous décideriez d’utiliser une police existante, faites bien attention à ce qu’elle ne soit pas déposée et exclusive !
Dans la rubrique « faits divers », vous avez certainement entendu parler d’Hadopi qui a malencontreusement opté pour une police appartenant à France Télécom.

Les sites de polices gratuites abondent (dafont.com en est certainement le plus connu), mais ne vous y méprenez pas : le gratuit est rarement à la hauteur du payant, la typographie est un travail d’artisan, d’orfèvre même ; il convient de louer la qualité des collections réalisées par des professionnels, qui conçoivent des familles de polices capables de supporter différentes graisses, différents types d’affichage, et différents alphabets (qui n’a jamais pondu une super maquette pour un site en français, et se retrouve ensuite coincé par une police gratuite qui ne dispose pas de tous les accents, ou de version cyrillique pour la filiale russe du même site ?).

De nombreux sites font l’interface entre les grandes « fonderies » et le consommateur final, citons par exemple Myfonts.com.

Pour conclure

Chez LunaWeb, on utilise depuis un petit bout de temps des outils de remplacement de police tels que Cufón ou TypeKit, les nouvelles alternatives permettant de créer des typos web accessibles et dynamiques. Cette évolution technique n’a à ce jour aucun inconvénient par rapport à l’ancienne méthode (image ou création à la volée d’une petite animation flash contenant le texte mis en forme), si ce n’est d’être rendue inaccessible pour ceux qui ont désactivé Javascript sur leur navigateur (mais dans ce cas la police par défaut est utilisée, on ne perd personne…).

Un dernier petit mot avant de vous quitter : lors d’un récent voyage outre-manche, j’ai découvert un excellent bouquin retraçant l’histoire de typos célèbres, lesquelles se révèlent excellente à l’usage du design moderne : Classic Fonts For Contemporary Design.

Bonne lecture !