Certains en doutent... il est possible d'appliquer les règles fines de la typographie sur le Web quasi aussi facilement et correctement que sur n'importe quel autre support dont le support papier. Il est même possible de le faire de façon suffisamment souple pour pouvoir être traité par la majorité des environnements informatiques (système opératoire [Windows 95 ou Seven, Linux Ubuntu ou Slackware, MacOS ou encore Chrome de Google...], logiciels de navigation [Internet Explorer, Netscape, Safari, Firefox...], caractéristiques techniques des ordinateurs et des écrans [carte video, résolution de l'écran, sa taille, sa définition] et obtenir des résultats dignes des meilleurs logiciels de PAO (publication assistée par ordinateur). Encore faut-il toutefois s'en donner la peine, sauf si l'on ne désire pas écrire de texte correct et faire preuve de flemme ou d'ignorance.

Avant de développer plus la "typographie sur le Web", nous invitons le lecteur à prendre connaissance des règles essentielles à respecter pour la présentation typographique correcte d'un document qui se respecte. Le site "Conseils de typographie" semble répondre aux critères essentiels à connaître et respecter.

Plusieurs sites parlent de "typographie sur le Web" ; le lecteur pourrait prendre connaissance de quelques-uns ici^[10]. Nous nous adressons ici à tous les concepteurs de sites web, y compris ceux qui sont issus du monde des arts et industries graphiques, et plus précisément à ceux qui viennent de la PAO (Publication Assistée par Ordinateur).
Ces derniers ont abordé le web avec leurs habitudes et leur savoir-faire — dont la typographie fait évidemment partie — et ils n'ont pas caché leur déception : pourquoi le HTML est-il si limité en ce qui concerne la typographie ? Pourquoi ne le remplace-t-on pas par Postscript ou PDF ? Pourquoi ne peut-on pas transmettre les polices avec la page web ? Pourquoi de belles polices s'affichent-elles de manière aussi laide sur l'écran des ordinateurs ? Pourquoi les navigateurs permettent-ils à l'internaute de modifier l'apparence du texte des pages web comme il l'entend ?

Peu de documents traitent de ces questions sur le Web. Des sites existent, qui traitent de la typographie classique (celle qui est utilisée en PAO) mais l'adaptation de cette dernière au web n'est généralement pas ou peu abordée. C'est la raison pour laquelle nous avons créé et mis en ligne ce dossier.

Il en résulte que la typographie du web souffre de contraintes qui n'existent pas pour la typographie classique sur papier. Nous examinerons tour à tour les points suivants :
 

Les propriétés du Web sont très différentes de celles de l'imprimé. Il faut se faire aux défauts de "la toile", profiter de ses qualités, et faire évoluer la typographie du web (web typography) dans son nouveau cadre.
Enfin, on peut se consoler en usant et en abusant de la COULEUR, qui est plus belle sur l'écran d'un moniteur que sur un produit imprimé.

Il était de bon ton chez les gourous d'Internet, au début de l'année 2000, d'expliquer calculette en main qu'on allait disposer de tellement de "bande passante" (bandwith — en fait, "débit" est le terme correct en français) qu'on ne saurait plus qu'en faire. Ces messieurs avaient additionné le nombre de kilomètres de fibre de verre posés ces dernières années, extrapolé les futures performances de chaque fibre, et tiré leurs brillantes conclusions.

Ils avaient oublié une première chose, c'est qu'aux deux bouts de la fibre il faut mettre de l'optoélectronique, qu'à chaque nSud de la toile il faut installer des ordinateurs puissants et des routeurs costauds, et que si le gros tuyau des dorsales enfle, il faudrait aussi que les moyens tuyaux, et le petit tuyau qui va jusqu'à l'internaute, en fassent autant.

Qui a déjà changé son cablage téléphonique depuis ces 10 dernières années ?

Peut-être nos gourous avaient-ils oublié aussi une deuxième chose, à savoir que le nombre d'internautes augmente à toute vitesse, si bien que les investissements actuels permettent d'accepter les nouveaux utilisateurs, mais ne contribuent guère à l'amélioration du fonctionnement pour ceux qui sont déjà présents — un processus qui est loin d'être terminé.

Pour neutraliser la croissance de la population mondiale, voici des stats pour 100 habitants [Graph of internet users per 100 inhabitants between 1997 and 2007 by International Telecommunication Union (ITU) recreated in OpenOffice Calc,
[source: http://www.itu.int/ITU-D/ict/statistics/ict/graphs/internet.jpg] et que, de 2 % en 1997 on passe à un petit 15 % en 2004, et (d'après la même source) on est passé en 2014 à quelque 40 % d'utilisateurs d'Internet au niveau mondial.
[source: http://www.internetlivestats.com/internet-users/#trend]

Toujours est-il que, quelques semaines plus tard, les gourous annonçaient que les gros débits sur Internet n'étaient pas pour demain. Dans cinq ans, peut-être... En attendant, si vous voulez être présent sur le net, il faut vous adapter à ses performances actuelles.
 

Comparé à d'autres systèmes qui véhiculent aussi du texte et des images, Internet présente des performances qui paraissent minables :
 

L'expérience montre que si une page web met plus de 20 secondes à se charger, l'internaute s'impatiente et va cliquer ailleurs.

Comme il y a plus de 27 millions de sites (chiffre de novembre 2001)
[Plus de 186 millions (186 727 854 pour être précis), c’est le nombre de sites Internet recensés sur le web fin 2008, selon la dernière estimation de Netcraft (seule source fiable dans ce domaine)... Netcraft considère que 75 millions sont véritablement actifs (soit un peu moins de la moitié)]
et près de deux milliards de pages HTML sur le web (chiffre de novembre 2001)
[1 trillion, c'est-à-dire mille milliards (1.000.000.000.000) : voilà le nombre de pages web distinctes que Google a répertorié (chiffre de 2008)] !
En juillet 2013, le web comptait plus de 698 millions de sites², dont plus de 175 millions considérés comme actifs³.

Jesse Alpert et Nissan Hajaj (2 ingénieurs de Google de l'équipe en charge de l'infrastructure de la recherche) donnent quelques chiffres qui donnent le tournis…], le brave homme n'a que l'embarras du choix. Le débit moyen actuel d'Internet vous donne par conséquent droit à 50 Ko par page web -- 30 Ko même, selon les auteurs les plus sévères. En conséquence, les pionniers du web :
 

Le développement du web, et les exigences toujours plus pressantes des concepteurs de sites, ont amené le W3C (World Wide Web Consortium) à proposer un additif au HTML : les feuilles de style en cascade (CSS : Cascading Style Sheets) (voir "Premiers pas en HTML, "). Les spécifications correspondantes sont très riches en fonctionnalités typographiques, et le téléchargement de polices avec la page web est prévu. C'est parfait... et cela marche parfaitement pour l'instant, la seule typographie utilisable...

Remarque : la limitation de la taille des pages web ne doit pas être prise à la lettre. Ce qu'il faut éviter à tout prix, c'est que l'internaute reste devant une page vide pendant de longues secondes, à cause d'un fichier lourd qui s'affiche d'un seul coup. Par contre, l'internaute moyen admet très bien que la page continue à se charger, s'il a déjà quelque chose à lire pendant ce temps.

Rentrez-vous bien cette valeur dans la tête : 72 dpi.
C'est à peu près la résolution vous pouvez obtenir sur l'écran de votre moniteur. Nous sommes loin des performances des photocomposeuses, des systèmes d'épreuvage numérique, de l'offset, et des imprimantes "qualité photo". Contrairement à ce pensent certains, cette valeur de 72 dpi n'est qu'un ordre de grandeur, même sur un Mac. Votre ordinateur, qui ne connaît ni la taille exacte de votre moniteur ni la manière dont vous l'avez réglé, ne peut pas vous offrir exactement cette résolution. Vous devez d'abord considérer qu'ici le "d" de "dpi" ne signifie pas "dot", mais "pixel", et ensuite que la valeur 72 est approchée.

Un écran présente en effet une résolution voisine de 72 dpi, très inférieure à celle d'un produit imprimé, mais semblable à celle d'une photocopie. Cette mesure de 72 dpi (dots per inch) ou 72 ppp (points par pouce) correspond à 72 points (ou pixels) par pouce de longueur. Le pixel moyen (ou pica) correspond donc à 1 pouce (soit 2,54 cm) divisé par 72, soit 0,353 mm. La typographie de l'affiché est donc assez différente de celle de l'imprimé.
Une résolution s'exprimera donc en dpi ou ppp, points par pouce.

Une imprimante (ou un scanner) présente déjà une résolution nettement supérieure et sa résolution verticale et horizontale n'est pas toujours la même... on peut en effet avoir une résolution de 1200x600 PPP sur un scanner ; d'où la mesure double :

• les premières imprimantes à aiguilles avait une définition de 72 dpi, voire 144 dpi ;
• les meilleures imprimantes à aiguilles atteignaient les 360 dpi ;
• les meilleures imprimantes jets d'encre offrent une résolution de 1440 dpi (Imprimantes Roland Soljet Pro II et III) ;
  

Attention cependant de lire correctement les publicités : une même "imprimante scanner" (Lexmark X4550) fera état de Résolution d'impression 1200 x 1200 dpi ; Résolution de copie jusqu'à 1200 x 1200 dpi ; Résolution optique jusqu'à 600 x 1200 dpi ; Résolution interpolée jusqu'à 19 200 dpi.

La taille d'un écran se mesure par la longueur de la diagonale, exprimée en pouces. Les tailles standard des écrans sont les suivantes (liste non exhaustive) :

• 7,9 pouces, soit une diagonale de 25 cm environ pour l'iPad 2 ;
• 14 pouces, soit une diagonale de 36 cm environ ;
• 15 pouces, soit une diagonale de 38 cm environ ;
• 17 pouces, soit une diagonale de 43 cm environ ;
• 19 pouces, soit une diagonale de 48 cm environ ;
• 21 pouces. soit une diagonale de 53 cm environ ;
• 32 pouces, soit une diagonale de 81 cm environ ;
• 40 pouces, soit une diagonale de 101 cm environ .

La taille d'un écran de PC en Pouces = diagonale en cm divisée par 2,54 (un pouce = 2,54 cm) ;
à l'inverse taille en cm = diagonale en pouces * 2,54 ;
donc le 15" = 15 * 2,54 = 38 cm.
le 19" = 19 * 2,54 = 48 cm.

Pour ce qui est des formats 4:3 et 16:9, la diagonale reste inchangée, mais on fait varier le rapport entre la largeur et la longueur, à titre d'indication :
    le format 16:9 (écran large) correspond au rapport L / l = 1,77 (soit 4/3)
    le format 4:3 au rapport L / l = 1,33 où L est la longueur et l la largeur (soit 16/9).

À la question : quelles sont les dimensions de mon écran 16:9 de 15,4" ?...
1) diagonale en cm = 15,4 * 2,54 = 39,116 cm
2) Pythagore nous dit : diagonale² = Longueur² + largeur²,
or, L=1,77 l
donc, 39,116² = (1,77 l)² + l², ou 39,116² = 3,1329 l² + l²,
ou 39,116² = 4,1329 l² , ou 1530,061456 = 4,1329 l²,
ou l² = 1530,061456/4,1229 = env. 371,11 ,
soit l = 19,26 cm
et L = 19,26 * 1,77 = 34,10 cm.

Donc, à la question "quelle dimention fait un ecran 15" 4:3; un 19" 4:3; un 19" 16:9 etc..."
15 pouces c'est la diagonale ; il faut multiplier par 2.54 pour avoir les cm
15" ça fait environ 37 cm de diagonale et 19" environ 50 cm.

Maintenant pour connaitre les côtés il faut résoudre les équations suivantes :
x²+y² = Diagonale²
x/y = 4/3 ou x/y = 16/9
donc,

La définition d'un écran, c'est le nombre de points (dans le sens de pixels), en largeur et en hauteur, que l'écran peut afficher, ce nombre de pixels est généralement compris entre 640x480 [devenu très rare] (640 points en longueur, 480 points en largeur [soit 307200 pixels 0,3072 MégaPixels]) et 2048x1536 (2048 points en longueur, 1536 points en largeur [3 145 728 pixels ou 3,145728 MégaPixels]), mais des résolutions supérieures sont techniquement possibles (voir ici les définitions d'écran des visiteurs de notre site CUY). Le tableau ci-dessous donne les définitions conseillées selon la taille de la diagonale :

Vous souhaitez connaître la définition de votre écran sous Windows ? clic-droit sur votre bureau >> Propriétés >> Paramètres

		Voici quatre fois la même image de 37 pixels de large sur 45 pixels de haut. Elle est à des échelles différentes : 1/1 (taille normale), 2/1, 4/1 dans la première colonne et 8/1 dans les colonnes ci-contre. À l'échelle 1/1, ces points sont tellement petits qu'on ne s'en rend pas compte... l'image semble nette. Mais à l'échelle 8/1, chaque pixel de l'image d'origine est affiché sur un carré de 8 pixels sur 8 de l'écran (donc sur 64 pixels). Et ça ce voit !... Et si l'image de gauche n'est pas la même que celle de droite, c'est que vous utilisez un système qui "lisse" déjà les images... Ainsi, au contraire des images vectorielles, on ne peut agrandir les images bitmap sans perte de qualité...

Voici les définitions les plus courantes d'écran :

L'image à l'écran sera d'autant plus grande qu'elle contiendra beaucoup de pixels, que l'écran sera grand et que les pixels de l'écran seront grands ou, autrement dit, qu'il y aura peu de pixels sur l'écran.

Ainsi, la taille apparente d'une photo sera sensiblement la même sur un grand écran de 19 pouces avec 1024 x 768 pixels que sur un petit écran de 15 pouces avec 800 x 600 pixels. Pour preuve, voici une photo du gouvernement Sarkozy, de 512 pixels sur 349 en taille originale :

Sur 4 écrans de même largeur, mais de définitions différentes
écran 4/3	écran 16/9 donc moins haut pour une même largeur
sur un écran de 800 x 600	sur un écran de 1280 x 800
sur un écran de 1600 x 1200	sur un écran de 1920 x 1200

En gros, le pixel mesure toujours 1/3 de millimètre (voir démonstration plus haut). Le moniteur est donc incapable de représenter correctement un empattement, qui est défini au 1/10 de millimètre près. Deux polices qui apparaissent comme très voisines sur l'imprimé deviennent pratiquement indiscernables à l'écran.
Le nombre de polices que l'on peut utiliser pour le web serait donc a priori plus limité que pour l'imprimé. Et cette situation ne serait pas près de changer, parce qu'on ne s'attend pas pour l'instant à une évolution rapide de la résolution des moniteurs.

Nous invitons le lecteur à prendre connaissance du "chapitre 5", où nous abordons avec plus de précision la notion de pixel selon les plate-formes utilisées.

Un tel point de vue est malthusien. Il serait plus correct de dire que les fondeurs de polices destinées au web s'orienteront dans une direction différente de celle suivie jusqu'ici par leurs collègues travaillant pour l'imprimé. Cette tendance, encore timide, est déjà perceptible.
À mon humble avis, le web est un media plus festif et moins guindé que l'imprimé (que les imprimeurs me pardonnent !), et les polices au dessin original, fantaisiste, ou simplement amusant, y connaîtront sans doute un bel avenir.
De plus, les facteurs qui gouvernent la lisibilité d'une police ne sont pas les mêmes pour l'imprimé et pour le web. Aussi n'ai-je pas peur d'être iconoclaste : moins de Garamond, plus de Comic, tel est l'avenir de la typographie du web !
 

Les polices que l'on trouve sur les micro-ordinateurs proviennent de diverses sources : le système d'exploitation, certains pilotes et logiciels d'application, et les recueils de polices que l'on peut se procurer en ligne ou sur CD-ROM. Le système d'exploitation de Windows 98 au Windows 7, par exemple, en fournissait, une cinquantaine pour W98 (on les trouvait dans C:\WINDOWS\FONTS) et près de 400 pour XP (toujours dans C:\WINDOWS\FONTS) et environ 600 pour W7 (toujours dans C:\WINDOWS\FONTS).
Le concepteur de site peut-il spécifier l'une de ces polices dans ses pages web, et être sûr qu'elle sera utilisée par le navigateur de tous les visiteurs ? Hélas non ! Car si les internautes équipés de Windows 3.x ont disparu, ceux qui se servent de Windows 95 ou Windows NT existent encore un petit peu, et ceux qui utilisent Windows XP ou Seven sont légion [cf. Nos visiteurs et leur OS, ici] -- et la liste des polices résidentes est différente dans chaque cas.
Et puis, il y a les utilisateurs de Mac : en moyenne mondiale, il ne représentent plus que 4 % des visiteurs environ, mais rares sont les webmasters qui affectent de les ignorer. Cela tient sans doute à l'importance que le Mac a conservée dans le monde des arts et industries graphiques, dont la conception de sites web fait partie. Une spécialiste (L. Weinman) a même pu écrire que les pages web étaient conçues sur Mac et regardées sur PC... (ce qui n'est pas très logique, et tend à se modifier). L'analyse du trafic de CUY montre que 1,5 % de ses visiteurs utilisent un Mac : on ne peut pas négliger la plate-forme Apple ! Les diverses plates-formes gratuites de Linux, par contre, sont encore trop peu utilisées par les internautes, du moins pour l'instant, quand on pense que le prix d'une licence Windows XP OEM est d'environ 150 €.

En pratique, donc, ne peuvent être considérées comme présentes chez tous les internautes, que les polices que l'on trouve à la fois sur les machines Mac et PC relativement récentes. Cela représente une dizaine de polices communes, et nous verrons au chapitre 3 tout le parti que l'on peut en tirer pour la typographie du web. Un nombre aussi faible est surprenant, car en 1997 Apple et Microsoft avaient enterré la hache de guerre, et depuis les deux firmes auraient pu s'entendre pour que la liste des polices communes soit plus étoffée. La typographie du web ne s'en porterait que mieux.

Ces regrets exprimés, on peut se dire que dix polices, c'est mieux que rien. Malheureusement, beaucoup de concepteurs de sites agissent comme si la typographie du web ne disposait que de deux polices : l'une avec empattements, l'autre sans -- le Times et l'Arial. Ce préjugé tire son origine des faits suivants :

Remarque : vous disposez d'une police de plus que vous ne le pensez... mais elle ne sert pratiquement à rien. En remplaçant la balise <p> par la balise <pre>, vous générez du texte écrit en une police à chasse fixe très voisine de Courrier. Cette police a été conçue pour que l'on puisse simuler du listing informatique tel que le produisaient les imprimantes à aiguilles. C'est une possibilité dont on ne se sert plus guère aujourd'hui.

L'internaute est maître de la fenêtre de son navigateur, et il n'aime pas qu'on lui dispute cette prérogative. Dans les préférences (Mac), ou options (PC), de son navigateur, il peut :

Cependant, peu d'internautes modifient le réglage par défaut de leur navigateur, du moins en ce qui concerne les polices de caractères — à l'exception des personnes handicapées qui ont des problèmes de vision. En général, le texte s'affichera avec la nature et la taille de police que vous préconiserez — si la police en question est disponible localement.

De plus, des études de comportement ont montré que les techniques de lecture d’un internaute (de recherche et de navigation aussi) ne sont pas les mêmes que sur le papier. Sur papier, on lit de manière généralement linéaire, on feuillette, on parcourt. Sur écran, c’est NON linéaire : on explore, on butine, on surfe (et quelquefois, on se perd). Il y a en outre une différence de taille entre les images formées par l’encre qui s’étale sur le papier et les pixels de l’écran de notre ordinateur.

Des recherches effectuées ont démontré que 79 % des visiteurs de pages Web ne lisent pas, mais parcourent (scannent) les textes. Seuls 16 % lisent mot à mot. Une autre étude canadienne a établi que la vitesse de lecture des pages Web est de 28,5 % plus lente que celle de pages imprimées. Lire sur un écran produit, de plus, une pression physiologique et fatigue les yeux. Le scintillement de l’écran (souvent présent sur les écrans CRT non professionnels, donc meilleur marché) réduit la lisibilité d’au moins 30 %.

Même si votre ordinateur galope à 2 GHz, il ne peut pas faire plus que ce que lui permet le logiciel d'application — c'est à dire, en l'occurrence, le navigateur. Ce ne sont pas les spécifications du HTML 4, ou celles des feuilles de style, qui comptent, mais la manière dont les navigateurs les implémentent. Sous cet aspect, la typographie du web n'est pas gâtée.

Par exemple, le HTML pur ne permet de régler ni le crénage (c'est à dire l'accroissement de la distance entre caractères, en sus de ce que prévoit la police), ni l'interlignage (c'est à dire la distance entre les lignes de texte), ni la graisse (c'est à dire l'épaisseur des caractères). Les feuilles de style (cf. chapitre 5) le permettent, mais seules les versions récentes des navigateurs prennent les feuilles de style en charge, et ce de manière fort incomplète. Les feuilles de style sont donc pour l'instant peu utilisables... et sont effectivement utilisées de façon modérée. Pour la typographie du web, nous en sommes presque toujours réduits à ce que le HTML permet. Nous reviendrons sur ce point au chapitre 5.

Enfin, tous le moniteurs ne se valent pas : certains affichent les caractères lissés nettement moins bien que d'autres... quoiqu'en dise la publicité !