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 :

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� !