Deuxième partie d’une série sur les fonts web

Cet article explique les fontes web pour tous, mais s’adresse plus particulièrement aux graphistes, infographes et directeurs artistiques et spécialistes de Photoshop qui ont été formés, et sont habitués à travailler, pour l’imprimerie. 

Parmi les graphistes qui se lancent dans le design de sites internet, peu comprennent qu’ils ne peuvent aborder la typographie de la même manière pour le web que pour l’imprimé. Sachez tout de suite que contrairement à l’imprimerie, il est tout simplement impossible de contrôler le résultat de l’affichage du texte par les différents navigateurs web. 

Note : Nous parlons ici du texte « général » d’une page web (pas des titres, nous y reviendrons). 

Un graphiste typique fera sa maquette dans Photoshop en utilisant la fonte de son choix pour le texte. Il justifiera le texte, ajustera l’espacement entre les lettres de certains mots pour égaliser ses lignes, ajoutera des demi-espaces pour les signes de ponctuation, etc. Puis il enverra sa maquette en format PDF à son client. 

ERREUR! Aucune de ces méthodes n’est applicable en texte HTML. Vous ne pourrez obtenir le site comme votre maquette, et votre client sera déçu. 

Pourquoi les fontes web diffèrent?

Les navigateurs web (Explorer, Firefox, Safari…) ne peuvent utiliser que les fontes présentes sur l’ordinateur de l’usager (les bases de ce concept sur Wikipedia).** 

Donc, si vous utilisez du TradeGothic dans un site internet, et qu’un internaute arrive sur votre page, il ne verra pas le texte, ou alors le verra déformé car il n’a pas la police TradeGothic installée sur son oridnateur! Aussi simple que ça! 

Comme personne n’a les mêmes fontes installées, et que la majorité des internautes n’a jamais installé de polices de toute façon, voici pourquoi il existe des fontes web standard : elles sont garanties d’exister sur tous les ordinateurs, puisqu’elles sont installées par défaut avec le système d’exploitation Windows ou MAC. Aussi appelée web-safe fonts, car elles sont sécuritaires à utiliser. 

Voici la liste : 

TABLEAU DES FONTES WEB STANDARD (web-safe fonts)

Fonts sur Windows / Fonts sur MAC / Famille de fontes

---

Arial, Arial, Helvetica, sans-serif

Arial Black, Arial Black, Gadget,sans-serif

Comic Sans MS, Comic Sans MS5, cursive

Courier New, Courier New, Courier6,monospace

Georgia1, Georgia, serif

Impact, Impact5, Charcoal6, sans-serif

Lucida Console, Monaco5, monospace

Lucida Sans Unicode, Lucida Grande, sans-serif

Palatino Linotype, Book Antiqua3, Palatino6, serif

Tahoma, Geneva, sans-serif

Times New Roman, Times, serif

Trebuchet MS1, Helvetica, sans-serif

Verdana, Verdana, Geneva, sans-serif

Symbol, Symbol (Symbol2, Symbol2)

Webdings, Webd(Webdings2, Webdings2)

Wingdings, Zapf(Wingdings2, Zapf Dingbats2)

MS Sans Serif4, Geneva, sans-serif

MS Serif4, New York6, serif

(Ce très bon exemple est tiré de la page www.ampsoft.net, on peut aussi voir des captures écrans de ces fontes dans différents navigateurs) 

Ce qui pose un autre problème :  

les fontes MAC et PC n’ont pas les mêmes noms, et ne sont pas tout à fait pareilles! 

Les Fallback fonts (fontes de rechange)

Si vous avez déjà joué dans Dreamweaver, vous avez constaté que les typos web disponibles se déclinent comme suit, séparées en familles : 

 

Vous avez vu dans le tableau des fontes web standard que certaines fontes n’existent pas simultanément sur les deux plateformes (PC et MAC – Tahoma et Trebuchet, par exemple). Ainsi, les PC ont ARIAL comme fonte sans sérif de base, et les MAC ont Helvetica! 

Donc si le programmeur indique seulement HELVETICA pour la page web, et que l’utilisateur navigue avec un PC (qui n’a pas cette fonte), et bien… Soit le texte disparait, soit il sera remplacé par la fonte par défaut du navigateur, souvent Times (yuck). 

Le programmeur utilisera donc le principe des Fallback fonts (fontes de rechange). 

Voyez un style typique qui utilise le Fallback :
font-family: Arial, Helvetica, sans-serif; 

Ainsi lorsque le navigateur ouvre une page web, il reçoit la commande “affiche le texte en Arial”. Le navigateur cherche la fonte Arial sur l’ordinateur. S’Il la trouve, il affiche le texte en Arial. S’il ne la trouve pas, il passe au plan B, Helvetica. Il cherche cette fonte, et s’il la trouve, il affiche le texte en Helvetica. Sinon, plan C, le sans-serif par défaut des ordinateurs. 

Ce qui pose un autre problème!  

Arial (PC) et Helvetica (MAC) se ressemblent beaucoup, mais ne sont pas pareilles!
Et alors? 

Si vous choisissez Trebuchet, la fonte de rechange en MAC est… Helevetica. C’est ce qui lui ressemble le plus MAIS ce n’est pas Trebuchet… 

Justifier?
Regardez cette page web avec du texte justifié. Changez les fontes pour voir. 

Le navigateur ne peut justifier comme un logiciel de mise en page le permet. Ainsi, les espacements sont mal gérés, forment des rivières. 

De plus, vu la différence entre les fontes PC et MAC, la justification ne se fera pas aux mêmes endroits selon que vous regardez le site avec un PC ou un MAC!*** 

Voyez l’exemple ci-dessous, où la différence est soulignée en jaune. 

 

Encore un autre problème :
L’aspect visuel des polices de caractères. 

Regardez l’exemple suivant : 

 

En imprimé, une fonte en 7 points est très lisible.
En web, voyez comme elle est illisible.
Pourquoi? 

En HTML, lorsqu’on regarde avec un navigateur, les lettres sont formées de PIXELS. En imprimé, elles sont VECTORISÉES. 

Le navigateur tentera donc de reproduire l’aspect visuel du texte, en utilisant une méthode nommée Aliasing ou, en français, « crénelage » ou encore « l’effet d’escalier ». 

 

Selon Wikipedia : 

Ce procédé consiste à échelonner la couleur des pixels au niveau des limites entre deux zones de couleur ou de contraste différent. L’échantillonnage de la couleur d’un pixel est ainsi réalisé en fonction de sa proximité avec les deux zones de couleur. Une fois ce procédé appliqué, la frontière entre les deux zones aura l’air légèrement plus floue. 

En web, les maquettes doivent être travaillées en 72 dpi, RGB, à la taille 100% du projet final. 72 dots-per-inch, ou point-par-pouce, ça ne laisse pas beaucoup de pixels pour dessiner une fonte! 

Dans l’exemple ci-dessous, grossi à 300%, on voit la hauteur de la fonte en pixels (illustrée par les pixels rouges et verts). 

 

Ainsi, si une lettre tombe entre deux pixels écrans, le navigateur tentera de garder son aspect visuel en ajoutant des pixels pâles autour. 

Ainsi j’ai souvent vu des graphistes mettre du texte en 7 points, justifié, dans une maquette de page web, la montrer à leur client en PDF (donc très belle qualité, même en zoomant) mais impossible à reproduire avec les fontes web standard. 

Car en plus…
Un pixel et un pixel. Donc, un espace entre deux lettres sera de 0 pixels, ou 1 pixels, etc.
Il n’y a pas de demi-espaces! 

Et on rajoute… 

Les préférences que l’utilisateur choisi dans son navigateur. Par exemple, avec Internet Explorer, les vieilles versions du navigateur ont les lettres en pixels par défaut (Anti-aliasing, exemple 1), mais les nouvelles versions ont “clear-type” activé (aliasing, exemple 2). Un usager peut choisir de naviguer avec les fontes en Clear-type, ou non. 

Et je ne vous parle même pas de l’option zoom sur les navigateurs, qui grossi le texte, ou même l’option text-size qui elle aussi bousillera votre design. 

Donc la conclusion…

Contrairement à l’imprimerie, il n’est pas possible de contrôler le résultat de l’affichage du texte par les différents navigateurs web. 

Que faire alors? 

• Respirez par le nez
• Faites confiance à votre programmeur
• Faites confiance à votre navigateur
• Acceptez que la typographie web ne peut reproduire l’imprimé.
  Et sourtout…
• Montrez des maquettes RÉALISTES à vos clients.

Comment? 

Préparez l’espace de travail Photoshop 

 

Color settings > RGB
Préférences > Units & rulers = pixels (mesures en pixels, pour le document et les fontes)
Votre document : à 100% de la taille réelle et finale de votre projet, en 72 dpi. 

Puis, sélectionnez l’option Anti-Aliasing NONE pour les fontes, afin d’obtenir du texte clair et de taille réaliste (voir ci-dessous). 

 

Mémo : 

• Pas de demi-espaces
• Ne justifiez pas le texte
• N’allez pas plus petit que 10 px pour la taille des polices

Une fois le concept terminé, envoyez votre maquette en format jpeg à un programmeur afin de valider si le concept peut être converti en HTML (avant de promettre la lune à votre client). 

Et pour terminer, envoyez votre maquette au client EN JPEG, idéalement déjà dans une page HTML afin de pouvoir être vu avec un navigateur. Le produit final sera un site internet, fait pour être vu ainsi, pas un PDF! 

Pour voir votre jpeg dans un navigateur :

Ouvrez une page vierge avec un logiciel de type Notepad.

Collez le code ci-dessous : 

---

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Maquette1</title>
</head> 

<body>
<img src=”nomdevotrefichierjpg.jpg” alt=”Maquette1” width=”990″ height=”660″ />
</body>
</html> 

---

Remplacez les noms en rouge avec les noms de vos fichiers. 

Sauvegardez ce fichier sous le nom TEST.html

>> Assurez-vous de sauvegarder ce fichier au même endroit que le jpg de votre maquette! 

Puis, allez double-cliquer sur ce fichier. Il devrait s’ouvrir dans votre navigateur par defaut. 

---

** Il y a de nouveaux moyens de forcer l’installation de polices sur l’ordinateur de l’usager, ou alors d’héberger des polices ailleurs et les mettre en lien, mais ces techniques sont avancées et ne sont pas prises en charge par tous les navigateurs. Nous y reviendront aussi.) 

*** Les Ninjas du CSS diront qu’on peut justifier du texte. C’est vrai. Mais cela représente un niveau technique plus avancé, surtout si l’on tient compte des nouveaux supports comme le iPad, par exemple! Pensez à site qui doit être “fluide” (c’est-à-dire, s’adaptant à la largeur de l’écran de l’utilisateur), et cliquez ici.