Logo Regnat
Best viewed with God
Gratuité évangélique
Jésus
Viewable With Any Browser Campaign
CSS Geek
CSS valide
Valid XHTML 1.0 Transitional

Style Guide

TypographieTypographie

Comme dans le bulletin, nous essayons de respecter les exigences de la typographie française classique, telles qu’elles sont exposées dans l’excellent Abrégé du Code typographique à l’usage de la presse, Paris, Centre de Formation et de Perfectionnement des Journalistes, collection « Les Guides du CFPJ », 1989 (2e édition). Les contributeurs au bulletin et au site voudront bien se reporter à cet ouvrage de référence.

TypographieJustification

Nous n’aurons pas l’audace de justifier l’usage de la justification qui, par nature, est juste (sinon elle n’est que mauvais prétexte), et, par grâce, pur acte de la miséricorde divine. Sur ce point, on pourrait d’ailleurs s’interroger sur la corrélation existant entre la déchristianisation de notre société et l’abandon de la justification que l’on peut constater dans divers imprimés et sur de nombreux sites, mais nous laissons à d’autres le soin de traiter cette question. Bornons-nous ici à considérer la justification typographique, qui est la longueur d’une pleine ligne de texte.

Il est vrai qu’une justification équilibrée, agréable à l’œil du lecteur, implique la possibilité de pratiquer des coupures dans les mots longs. Pour l’heure, ni le HTML ni les CSS2 ne le permettent ; les choses pourraient changer avec les CSS3, mais nous n’y sommes pas encore. Est-on pour autant condamné à subir des cascades de lignes de différentes longueurs, brisant le rythme de lecture et générant une fatigue oculaire précoce ? Nous ne le pensons pas, à condition qu’on veuille bien prendre quelques précautions.

Afin de pallier l’inconvénient susmentionné, il faut déjà éviter une justification étroite : l’absence de coupures se gère plus facilement avec une justification longue. Mais celle-ci ne doit pas non plus être trop longue, de telle sorte que l’œil du lecteur puisse trouver facilement la prochaine ligne de texte. En s’appuyant sur l’expérience typographique acquise maintenant par les web designers, on peut estimer qu’une bonne justification se situe quelque part entre deux à trois alphabets de longueur dans la police utilisée, soit de 52 à 78 caractères (espaces compris). Robert Bringhurst, dont l’ouvrage The Elements of Typographic Style fait autorité dans le monde anglo-saxon, a conçu une méthode de calcul très simple, qui consiste à multiplier la taille de la police par trente : ainsi, une police de 10 pixels appelle une justification de 300 pixels, soit environ 65 caractères par ligne, c’est-à-dire la moyenne entre 52 et 78 caractères.

Afin de rendre plus concrètes ces premières considérations, voici un paragraphe de test, sectionné tous les 26 caractères :

Lorem ipsum dolor sit amet¦, consectetur adipiscing e¦lit. Suspendisse ante orci¦, vehicula eu eleifend ut,¦ facilisis sed diam. In ac¦ purus ut sapien vehicula ¦tristique. Nulla eu mauris¦ leo. Mauris rhoncus tinci¦dunt lorem, sit amet cursu¦s dui rutrum sit amet. Nul¦la tincidunt nibh id mi fe¦ugiat ac imperdiet massa b¦ibendum. Donec elementum p¦ellentesque enim a tempus.¦ Sed ante erat, eleifend a¦t congue ac, adipiscing ac¦ magna. Sed sed arcu id sa¦pien molestie posuere. Int¦eger ac lacus ut nibh temp¦us tempus vel eu massa. Nu¦llam eleifend nulla sed du¦i semper id pulvinar eros ¦rutrum. Etiam odio nunc, s¦uscipit at aliquet quis, i¦nterdum eu metus. Sed tris¦tique erat quis leo vestib¦ulum aliquam. Vestibulum c¦ursus elit non quam tempus¦ varius ut in turpis.

Suivant la résolution et la taille de l’écran utilisé par l’internaute (et la taille de la fenêtre du navigateur), ce paragraphe entre ou non dans les limites définies plus haut. Idéalement, il ne devrait donc pas y avoir plus de deux marqueurs ¦ par ligne. Sur notre écran 1280×800 habituel, avec un navigateur affichant un panneau latéral (pour les favoris, par exemple), on atteint la limite haute de 78 caractères. Par contre, en mode « plein écran », on approche les quatre marqueurs par ligne ! Pour autant, la lecture reste aisée, et on est encore très loin des justifications sans mesure qu’on peut voir sur de nombreux sites ; pour ne prendre qu’un exemple, mais particulièrement savoureux, il suffit de lire (et avec les deux yeux) le court article « Justification (typographie) » de Wikipedia, frisant les deux cents caractères…

Nous touchons là une spécificité de la typographie pour le web. Le typographe d’imprimerie travaille sur un format fixe, inaltérable par le lecteur. Le typographe du web, lui, travaille dans le flou : il ignore le format utilisé par les internautes, et ces derniers ont en plus le pouvoir de modifier la taille du texte et les dimensions de la page ! Pour illustrer de façon très concrète le problème, l’image ci-dessous montre la diversité et la répartition des résolutions d’écran chez les internautes ayant visité ce site depuis le début de l’année.

Résolutions d’écranIl n’y a malheureusement pas de solution pour assurer une justification parfaite sur des supports aussi différents, d’autant que la tendance est à l’augmentation de la résolution et de la taille des écrans (qui, pour ne rien arranger, sont de plus en plus souvent au format « paysage », c’est-à-dire plus larges que hauts). Richard Rutter, grand spécialiste anglais de la typographie du web, conseille par exemple de fixer, d’une manière ou d’une autre, une largeur de colonne telle que les limites déterminées plus haut soient toujours respectées. Ainsi, en assignant 400 pixels de large à une colonne de texte, on a des lignes d’environ 66 caractères dans une police de 12 pixels ; si l’internaute zoome sur la page et incrémente la taille de la police jusqu’à 16 pixels, la justification se réduit à environ 50 caractères, la limite basse. Certes, mais une fois ôtés 400 pixels (ou quelqu’autre unité de mesure) de texte, plus quelques dizaines d’autres pour les marges, que fait-on du reste d’un écran 1280×800 ou 1680×1050 ? La plupart du temps, rien, ou presque rien. Cela donne ce qu’on peut voir sur l’un des sites de Richard Rutter, extrêmement intéressant par ailleurs, The Elements of Typographic Style Applied to the Web : un écran à moitié vide et une lecture qui ne devient confortable qu’après avoir zoomé le texte…

À défaut d’obtenir la perfection, on peut toutefois essayer de déterminer et maintenir un équilibre satisfaisant de la page en adoptant une grille de référence qui donnera le rythme à l’ensemble de la composition. Quels que soient le corps de la police, l’interlignage ou la justification, un rythme typographique cohérent conserve les proportions des différents éléments de la page et permet au lecteur de suivre facilement le flux du texte. Ce rythme doit être suffisamment souple pour intégrer les syncopes et les variations générées par les citations, illustrations, notes de bas de page, titres, etc., mais il doit pouvoir être retrouvé dès que possible. Il repose essentiellement sur trois facteurs : la taille de la police, la hauteur de ligne et les marges. Ces facteurs sont spécifiés par les propriétés CSS font-size, line-height et margin.

font-sizefont-size

La grille de référence est déterminée par la taille de la police de caractères, spécifiée par la propriété font-size. Pour un texte destiné à être imprimé, font-size devrait être spécifié en points typographiques, mais pour l’affichage sur un écran, l’em [1] est l’unité la plus appropriée. Recommandée par le W3C, cette unité typographique relative permet d’ajuster le corps typographique de façon proportionnelle.

16 pixels Par défaut, les navigateurs affichent le corps de texte de l’élément parent de plus haut niveau (<body>) dans une taille très lisible (généralement 16 pixels), ce qui convient parfaitement à notre propos. C’est sur cette base que la taille des autres éléments est étalonné, avec un pas de 0.125 em.

On a cependant spécifié une taille en pixels pour le menu vertical, centré sur une image – le petit logo Regnat – de dimension fixe.

line-heightline-height

La hauteur de ligne, et par conséquent l’espace entre les lignes, d’un texte contribue beaucoup à sa lisibilité, notamment parce qu’elle influe sur la couleur typographique, c’est-à-dire l’aspect plus ou moins foncé d’un bloc typographique. Idéalement, elle devrait être déterminée en fonction de plusieurs facteurs : casse, espaces interlettre et intermot, graisse, justification, police, taille, etc. Une justification longue, par exemple, requiert un interligne plus important qu’une justification courte. Mais le plus important est d’ajuster line-height à font-size, de telle sorte que la hauteur de ligne soit et reste proportionnelle à la taille de l’ensemble du texte, y compris pour les notes de bas de page et les titres.

L’usage est d’ajouter 2 à 5 points à la taille de la fonte. Une fonte de 12 points, par exemple, se place bien dans une ligne de 15 ou 16 points. Pour un texte imprimé, l’interlignage équivaut généralement à 120 % d’un cadratin (soit 1.2 em) ; sur une page web, un texte tire toujours bénéfice d’un grand interligne, supérieur à 1.3 em. On a opté ici pour 1.5 em, qui constitue donc l’indice de la grille de référence : quelle que soit la taille de la police, il suffit de la multiplier par 1.5 pour trouver la hauteur de ligne correspondante.

Il faut normalement éviter de spécifier line-height avec des unités absolues (pixels ou points), afin de ne pas affecter un éventuel redimensionnement du texte dans un navigateur. On a cependant spécifié une hauteur en pixels pour les titres <h1> à <h4>, qui peuvent être illustrés d’une icone de 32 px – comme c’est le cas sur cette page.

marginmargin

Par défaut, les navigateurs insèrent une marge (généralement 1 em) entre tous les éléments de bloc (citations, listes, paragraphes, titres). Or, pour conserver le rythme de la page, l’espacement entre les différents éléments du texte doit aussi s’aligner sur la grille de référence en étant relatif à line-height. Les marges doivent donc toujours être spécifiées par le web designer, qui peut même avoir intérêt à réinitialiser toutes les valeurs dès le début de la feuille de style (ce que fait, par exemple, la Yahoo! UI Reset style sheet).

La valeur de line-height devrait être donnée et à margin-bottom et à margin-top. On peut toutefois spécifier des marges asymétriques (pour les titres, par exemple), mais toujours avec des multiples de line-height. Dans tous les cas, il faut tenir compte de l’effondrement des marges entre éléments successifs.

Idéalement, il faudrait également prendre en considération les bordures, horizontales notamment, qui peuvent elles aussi interrompre le rythme de la page, et les intégrer dans la détermination des marges. Le webmestre de Regnat n’est pas assez idéaliste pour partir à la chasse aux pixels surnuméraires.

PolicePolices

Afin de garantir la cohérence et la lisibilité de ce site, on a essayé de le présenter d’une façon simple et sobre. L’usage d’une pléthore de polices de caractères crée inévitablement des tensions dans un texte ; certaines sont légitimes et souhaitables, mais elles ne doivent pas mettre en péril l’unité de l’ensemble. D’une manière générale, et quelle que soit sa nature (imprimé ou page web), un document ne nécessite guère plus de deux polices : une pour le corps du texte (body type, caractère de labeur) et une pour les titres (display type, caractère de titrage).

Le bulletin utilise Times New Roman pour le corps du texte et Arial pour les titres. Cette dernière a été conservée, avec le même emploi ; pour le corps de texte, on a préféré une police sans empattement, plus facile à lire sur un écran : Verdana, un grand classique qu’on est pratiquement assuré de trouver sur tous les ordinateurs. Il est aussi fait usage d’une police monospace pour l’affichage de portions de code informatique.

1. Ainsi nommé parce qu’il est censé correspondre à peu près à la taille de la lettre M, l’em (traduction anglaise du cadratin) est une représentation proportionnelle du corps courant. 1 em, c’est tout simplement 100 % de la taille du corps (10 points pour un corps de 10 points, 12 points pour un corps de 12 points, etc.). De ce fait, en spécifiant un espacement horizontal ou vertical de 0.5 em, par exemple, on est assuré d’obtenir un espacement égal à 50 % de la taille du corps courant, quel qu’il soit (5 points pour un corps de 10 points, 6 points pour un corps de 12 points, etc.).