La typographie est un élément essentiel du design. Les designers du domaine de l'imprimé passent des années à apprendre les différences entre les polices de caractères et à maîtriser cet art qu'est la typographie. Sur le web, le choix de polices de caractères étant passablement réduit, il est encore plus difficile de réaliser un design des textes efficace.
Les plate-formes Windows, UNIX et Macintosh viennent toutes chacune avec des polices de base différentes, ainsi qu'un rendu différent (de la pixellisation de Mac OS 9 à l'aliasing de Mac OS X). En plus de cela, les méthodes pour régler la grosseur des caractères par CSS produisent malheureusement des résultats fort différents sur chacune des plateformes, malgré les efforts des fabricants de navigateurs pour établir des polices et des grosseurs standards.
Parallèlement à ces problèmes, le web diffère de l'imprimé car le lecteur est supposé avoir un certain contrôle sur ce qu'il voit. Ainsi, les navigateurs modernes permettent à leurs utilisateurs de modifier la grosseur des caractères par défaut afin de rendre la lecture plus confortable. Il devient donc assez ardu pour un designer d'y voir clair et de produire des designs qui paraissent bien sur toutes les plate-formes et dans tous les navigateurs.
Certains designers, lassés de cet état de fait, ont commencé à produire tous leurs textes dans Flash ; chaque lettre y devient un vecteur, et non du vrai texte, donc impossible à lire par un moteur de recherche, impossible à copier coller.
La méthode moderne et efficace de déterminer l'apparence du texte sur le web est d'utiliser les CSS. Tous s'entendent à recommander cette méthode au lieu de la balise dépréciée <font>, car les CSS sont plus flexibles, plus faciles à manier et économisent la bande passante. Oublions donc jusqu'à l'existence de la balise <font> et concentrons-nous sur un usage efficace des CSS pour créer une page web lisible.
Il existe plusieurs valeurs possibles pour déterminer la grosseur des caractères par CSS, en pixel, en point, en em et ex, en pourcentage, et avec d'autres valeurs qu'on peut regrouper sous deux catégories : absolues et relatives. Les valeurs absolues comprennent les mots-clés [ xx-small | x-small | small | medium | large | x-large | xx-large ]. Les valeurs relatives dépendent de la grosseur de l'élément parent. Les valeurs possibles sont : [ larger | smaller ].
Malgré un avis presque général qu'il convient mieux de fixer les grosseurs de caractères avec une unité relative comme em (1em équivaut à la grosseur par défaut du navigateur), Jeffrey Zeldman, dans son livre Designing with web standards, affirme pour sa part que le em est loin de donner des résultats identiques dans tous les navigateurs. À son avis, le pixel est l'unité de mesure par excellence, 10px sera 10px sur Windows comme sur Macintosh, dans IE comme dans Opera, même dans les navigateurs plus anciens.
Le problème avec les pixels, c'est qu'avec IE/Windows, il est impossible de redimensionner le texte en pixel. Si votre texte est trop petit (9px et moins), il sera impossible à lire pour plus d'un. Les utilisateurs d'autres navigateurs peuvent cependant utiliser la fonction Text Zoom et grossir les caractères.
Si vous ne spécifiez aucune grosseur absolue pour vos caractères, vos textes apparaîtront dans la grosseur choisie par l'utilisateur, ce qui peut être une bonne chose. Si votre page est structurellement bien construite et n'insiste pas sur une construction visuelle trop rigide, cette méthode peut très bien vous convenir.
Déterminez dans l'élément body la valeur par défaut. Réglez ensuite pour chaque élément une grosseur relative à celle-ci, en utilisant préférablement les mots-clés [ xx-small | x-small | small | medium | large | x-large | xx-large ].
body {
font-size: 100%; // ou small ou 1em
}
h1 {
font-size: 150%; // ou large ou 1.5em
}
p.copyright {
font-size: 80%; // ou x-small ou 0.8em
}
L'avantage des mots-clés sur les ems est que, dans les navigateurs modernes, le mot-clé xx-small ne descendra jamais sous 9px. Le texte, même le plus petit, sera encore lisible pour la plupart. évidemment, on perdrait la différence entre x-small et xx-small, mais on ne perdrait pas le lecteur.
Les mots-clés ont eux aussi leurs problèmes, particulièrement dans les navigateurs anciens. Comme ce n'est pas notre intention de couvrir en détail ces problèmes, lisez la méthode de Todd Fahrner pour pallier les défauts d'implémentation des mots-clés sur http://www.alistapart.com/stories/sizematters/ et sur http://www.hapycog.com/thinking/colophon.html.
Ne spécifiez jamais la propriété font-size en point (pt). Cette valeur absolue correspond davantage au monde de l'imprimé et est rendue de façon inconsistante de plate-forme en plate-forme.
Afin d'être certain que votre texte soit bien rendu sur toutes les plate-formes, spécifiez la propriété font-family en choisissant des polices de caractères disponibles sur toutes les plate-formes.
Vous pouvez compter sur ces valeurs sûres : Times, "Times New Roman", Helvetica, Courier, Arial, Verdana. Certaines autres polices sont fréquemment disponibles : Georgia, "Lucida Grande", Lucida, "Trebuchet MS".
Notez que les noms de polices comprenant plus d'un mot doivent toujours être compris entre guillemets.
Évitez toutes autres polices non répandus et, en tous les cas, spécifiez plusieurs polices dans la propriété font-family. Ainsi, si la première n'est pas disponible, le navigateur ira chercher la suivante, et ainsi de suite.
Terminez en déterminant une famille générique comme serif, sans-serif ou monospace, selon vos goûts. Le navigateur choisira une police disponible dans cette famille. Prenez soin de choisir au moins 3 polices de caractères afin d'éviter le plus possible que le navigateur choisisse lui-même la police d'affichage des textes.
/*
font-family: verdana, arial, helvetica, sans-serif;
font-family: 'times new roman', times, veronica, serif;
font-family: courier, typewriter, matrix, monospace;
*/
body {
font-family: "Lucida Grande", verdana, lucida,
helvetica, sans-serif;
font-size: 1em;
}
L'espacement entre les lignes peut-être réglé par la propriété line-height. Un espacement idéal se situe entre 120% et 150%. De cette façon, il y a suffisamment d'espacement pour détacher les lignes les unes des autres. Évitez d'aller au delà ou en deçà de ces valeurs.
body {
font-family: "Lucida Grande", verdana, lucida,
helvetica, sans-serif;
font-size: 1em;
line-height: 1.5em;
}
La propriété font-strech permet de choisir une police normale ou condensé pour une famille donnée. On doit utiliser les mots-clés suivants : [ normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ]. Un texte trop condensé peut être difficile à lire, trop étiré également. Utilisez cette propriété avec parcimonie.
Afin d'avoir un texte lisible à l'écran, un autre facteur important à considérer est la longueur de la ligne.
Une ligne de texte devrait avoir idéalement une longueur entre 40 et 70 caractères. Plus courte, ça interrompt la lecture, plus longue, on ne trouve plus la prochaine ligne. Un bloc de texte devrait ainsi avoir environ 400 pixels de large pour une grosseur de caractères à 100%. Évitez d'avoir des blocs de texte qui s'étirent d'un bout à l'autre de l'écran car le texte devient ainsi difficile à suivre et est beaucoup moins élégant.
Un texte noir sur un fond très pâle est l'idéal pour la lecture à l'écran. Évitez de confondre l'utilisateur en mettant de la couleur sur vos textes. Gardez cela pour les hyperliens. Les fonds de couleur ne devraient pas être utilisés pour vos blocs de texte car ils rendent la lecture très ardue.
body {
font-family: "Lucida Grande", verdana, lucida,
helvetica, sans-serif;
font-size: 1em;
line-height: 1.5em;
color: #000;
background: #fff;
}
Le W3C recommande l'utilisation des éléments <em> et <strong> au lieu de <b> et <i> pour afficher du texte en caractès gras ou italique. Les éléments <em> et <strong> ont une valeur structurelle qui fait défaut aux deux autres balises : ils indiquent un emphase (ou une emphase prononcée) sur un mot. Même si ces éléments vont par défaut mettre le texte en italique et en gras, il est préférable de s'appuyer sur les CSS pour s'assurer du rendu de ces éléments. Ainsi, on dégage complètement la structure du document et sa présentation, et les éléments qu'on emploie donnent du sens au contenu.
em {
font-style: italic;
}
strong {
font-weigth: bold;
}
Même si le dicton dit une image vaut mille mots, ne remplacez pas le texte par des images. Cela est vrai pour le corps du texte comme pour les menus de navigation. Les images textuelles n'aident en rien à l'accessibilité des contenus.
En terminant, insistons encore sur la nécessité de tester sa page web dans différents navigateurs et sur différentes plate-formes, à différentes résolutions. En insistant sur la lisibilité plutôt que sur les effets visuels, vous produirez des sites web dont les contenus textuels sont clairs, compréhensibles et accessibles, sans pour autant sacrifier le design. Comprendre et accepter les différences entre le web et l'imprimé nous apparaît comme une clé majeure dans la compréhension du médium et dans son utilisation efficace.