Pour une typographie qui a du sens
Par Tim Brown
Tout le monde a entendu parler du nombre d’or (le terme de section dorée est aussi parfois employé), qui définit une proportion de 1:1,618 qu’on retrouve un peu partout, de l’architecture de la Grèce antique au rythme de développement des plantes. Cette proportion, et les autres rapports particuliers fournis par la géométrie, la musique, la nature et l’Histoire, peuvent être exprimés en tant qu’échelles modulaires et mis à contribution sur le Web.
Fig. 1 : une échelle modulaire simple : 10@1:1,618
Une échelle modulaire est composée d’une séquence de nombres qui ont entre eux des rapports remarquables. En utilisant le nombre d’or par exemple, on produira les valeurs d’une échelle modulaire en multipliant chaque nombre par 1,618 pour parvenir au nombre supérieur, ou bien en divisant par 1,618 pour parvenir au nombre inférieur.
Grâce à l’emploi de proportions dont les racines culturelles et historiques sont profondes, nous pouvons utiliser dans nos compositions les valeurs tirées de ces échelles et ainsi parvenir à une harmonie visuelle qui manque à ceux dont les mesures sont basées sur des valeurs arbitraires, conventionnelles ou aisément divisibles.
Fig 2 : notre page d’exemple, conçue en utilisant une échelle modulaire
Voyons d’abord en quoi consistent les échelles modulaires, et comment les appliquer au design web. Nous nous intéresserons ensuite à cet exemple afin de faire le point sur les raisons qui m’ont poussé à partir de certains nombres, à choisir certaines proportions, et à appliquer les nombres de mon échelle à certaines mesures CSS particulières. Enfin, nous réfléchirons à la façon dont le design basé sur des échelles modulaires peut s’intégrer à des modes de travail déjà en place aujourd’hui, et comment faire évoluer les choses.
Les échelles modulaires : comment les appliquer au design pour le Web
Une échelle modulaire, tout comme une échelle musicale, est constituée d’un ensemble prédéterminé aux proportions harmonieuses. — Robert Bringhurst.
Il est très facile de créer une échelle modulaire. Vous partez d’une proportion (par exemple 1:1,618) et d’un chiffre (par exemple 10), puis vous multipliez et vous divisez pour obtenir plusieurs nombres correspondants :
- 10,000 * 1,618 = 16,180
- 16,180 * 1.618 = 26,179
- 26,179 * 1.618 = 42,358
- 42,358 * etc.
- 10,000 / 1,618 = 6,180
- 6,180 / 1,618 = 3,819
- 3,819 / 1,618 = 2,360
- 2,360 / etc.
J’ai créé une calculatrice pour nous aider à résoudre cette question mathématique. Elle dispose d’options permettant de créer des échelles modulaires à double niveau, ce qui implique d’avoir au moins deux proportions au départ, ou deux nombres de départ, pour générer deux échelles modulaires distinctes que l’on va associer. Ces échelles à double niveau offrent davantage de possibilités de mesures : elles contiennent plus de nombres, et compensent mutuellement leurs lacunes.
Fig. 3 : Une échelle modulaire à double niveau : 10@1,618 ; 20@1,618
Utiliser une échelle modulaire pour le Web consiste à choisir dans l’échelle des nombres pour les tailles de fonte, les hauteurs de ligne, les longueurs de ligne, les marges, les largeurs de colonnes, etc. Il s’ensuit logiquement que les échelles modulaires sont d’autant plus efficaces que les données initiales (proportions et nombres de départ qui vont déterminer l’ensemble de l’échelle) font
sens par rapport au design et/ou au contenu du projet.
La première façon de s’assurer de cette efficacité consiste à partir du choix des caractères. En choisissant un type de caractères dès le début du projet (avant toute décision portant sur la mise en page ou la composition typographique), on peut trouver la meilleure échelle modulaire du projet en se basant sur la taille du caractère la plus lisible. Par exemple, si l’Adobe Caslon 16px est lisible et offre un bon rendu, on pourra partir du chiffre 16 pour créer notre échelle. Ainsi, l’ensemble du système de mesures harmonieuses peut s’appuyer sur une décision visuelle (la taille du caractère de base), décision que les designers prennent quotidiennement et sans hésiter, et qui imprègnera l’expérience toute entière.
Mais, bien sûr, ce nombre de départ n’est qu’un élément parmi d’autres dans une échelle à bases multiples. Dans le chapitre suivant, j’explique en décortiquant notre exemple non seulement comment choisir une taille de caractères de départ, mais aussi comment déterminer la proportion à utiliser ainsi que le second chiffre‑clé pour construire l’échelle modulaire du projet.
Créer une échelle modulaire pour le design web
Notre exemple est parti d’une tentative d’associer Minion et Myriam Condensed, établissant ainsi un choix de départ pour les caractères. J’avais déjà un texte sous la main (quelques réflexions sur la composition typographique que j’avais l’intention de publier), et j’ai réalisé un petit croquis pour planifier la composition. En bref, j’avais réuni les ingrédients pour une composition adaptée au Web. Passons maintenant à la recette elle‑même.
Minion était mon choix de caractère pour le texte ; j’ai donc regardé de près son rendu sur Web Font Specimen pour trouver une taille qui répondrait aux objectifs de mon design, avec un rendu bien net. Le choix d’une taille de caractère pour le Web est délicat à cause de la limite de résolution à laquelle on est confronté. Un pixel de plus ou de moins pour la fonte peut changer radicalement la façon de percevoir un type de caractère (et le texte tout entier dans la foulée). Mais une fois choisi la taille appropriée, 18px, j’avais un nombre sur lequel baser mon échelle modulaire. Il me fallait ensuite trouver une proportion.
J’ai choisi la proportion du nombre d’or (1:1,618). C’est une belle proportion aux résonances historiques et culturelles qui s’accommodent bien avec les caractères que j’ai choisis et le texte que je compose. Bien qu’il s’agisse d’un design contemporain, Minion s’inspire d’idéaux de la Renaissance, que ce soit dans sa structure humaniste ou dans les façons dont certaines parties des lettres renvoient à une histoire faite de plume et d’encre.
Dans les ouvrages de la Renaissance, les proportions des pages et des blocs de texte se basaient aussi sur le nombre d’or, et comme le sujet de mon texte portait sur l’art de la composition et sur l’intérêt de s’appuyer sur une forme de tradition, il semblait logique d’employer une proportion qui fasse écho à nos racines typographiques.
J’ai ensuite saisi ma taille de texte (18) et ma proportion (1:1,618) dans la calculatrice de modularscale.com. J’ai aussi décidé d’y inclure un second chiffre‑clé, pour pouvoir disposer de la souplesse d’une échelle modulaire à double niveau.
L’expérience m’a montré qu’on dispose de nombreuses options pour déterminer un bon chiffre‑clé. Cela peut être la taille à laquelle un texte offre le meilleur rendu, ou encore un grand chiffre comme la largeur d’un objet (si le projet concerné exige des publicités ou l’insertion de vidéos, par exemple) : en s’appuyant sur ces données, on s’assure qu’il y a quelque chose dans ces éléments qui résonnera avec l’ensemble de la mise en page.
Pour trouver mon chiffre‑clé, j’ai inséré une balise h2 (pour le texte « Typesetting ») puis j’y ai appliqué quelques styles pour correspondre à mon croquis initial. Je voulais que ce titre soit grand et qu’il ait une présence suffisante pour servir de base à la composition, mais sans qu’il ne devienne écrasant. J’ai donc fait quelques tests sur mon texte, et comme je me suis arrêté à la taille de fonte de 190px, j’en ai fait mon second chiffre‑clé. Voici l’échelle sous sa forme finale.
Voyons maintenant les CSS que j’ai écrites pour appliquer la logique de cette échelle aux dimensions concrètes de ma composition.
Appliquer une échelle modulaire à un design web
Une fois mon texte balisé, mon échelle à portée de main, j’ai appliqué mes règles CSS à notre exemple en prélevant à chaque fois que j’en avais besoin un chiffre précis tiré de mon échelle. À travers tout ce processus, j’ai parfois tâtonné, mais toujours une mesure à la fois.
Voyons la CSS. Les déclarations ci‑dessous ont été réorganisées afin qu’on puisse plus facilement comprendre l’arithmétique de l’échelle modulaire ; ces règles apparaissent dans la feuille de styles complète, mais organisées autrement (pour des raisons que j’expliquerai à la fin de ce chapitre).
/*
-----------------------------------------------
Typesetting for ALA
Auteur : Tim Brown
Date : 21 Avril 2011
http://modularscale.com/scale/?px1=18&px2=190&ra1=1.618
18px @ 1:1.618
190px @ 1:1.618
http://alistapart.com/articles/more-meaningful-typography/
----------------------------------------------- */Vous remarquez d’abord un commentaire tout en haut, où j’ai laissé une note concernant mon échelle.
Deux objectifs à cela : d’abord, informer les gens que j’utilise une échelle modulaire ; ensuite, cela laisse une possibilité de recréer l’échelle, de telle façon qu’il soit possible de comprendre mes décisions, de modifier mes mesures et de refaire une construction correctement. Suivez l’URL pour voir l’échelle modulaire exacte que j’ai utilisée pour ce travail.
body {
font-family: "Minion-Pro-1", "Minion-Pro-2";
font-size: 18px; /* L’origine de l’échelle */
}J’ai appliqué ici une taille de fonte de base (correspondant à la taille de texte qui est à l’origine de mon échelle) sur l’élément body.
.main {
float: right;
width: 497.406px;
}
p {
margin: 1em 0;
line-height: 1.54;
}Puis j’ai choisi un nombre sur mon échelle pour avoir la largeur de ma colonne de texte principale. Je considère souvent la largeur comme étant en réalité la justification des paragraphes (c’est ce que disent les typographes pour parler de la longueur de ligne, line-length). Il y a des années, quand les designers envoyaient des instructions écrites aux compositeurs, ils utilisaient des abréviations comme ceci : taille ÷ graisse × justification. Aujourd’hui, le raccourci de la propriété CSS pour la fonte ne reprend plus que les deux tiers de cette notation traditionnelle ; néanmoins, la mesure reste essentielle pour parvenir à un visuel équilibré.
Donc, ayant d’abord déterminé ma taille de fonte, j’ai ensuite testé plusieurs nombres avant d’arrêter mon choix sur une longueur de ligne de 497,406 pixels et une hauteur de 1,54.
Il me faut toujours beaucoup d’essais et d’erreurs avant de parvenir à équilibrer un bloc de texte. Je passe alternativement de l’éditeur CSS au navigateur, pour vérifier ce que donne chaque valeur. Je garde un œil sur la densité globale de ma page (la couleur typographique) et sur la lisibilité d’ensemble du texte. Je suis particulièrement attentif à l’interlignage qui pourrait devenir trop serré ou trop large. Un interlignage serré est très gênant pour le lecteur, en attirant son attention vers les lignes du dessus et du dessous. Un interlignage large fait perdre de la place, c’est laid, et on perd une bonne partie de l’effet des espaces négatifs telles que les marges et pauses visuelles du reste de la composition.
body {
font-family: "Minion-Pro-1", "Minion-Pro-2";
font-size: 18px; /* L’origine de l’échelle */
color: #031634;
}Gardant toujours à l’esprit l’équilibre du bloc de texte, j’ai testé quelques couleurs différentes pour mon texte. Ça semble peut‑être un peu bête, mais la couleur peut avoir un effet sur l’aspect plus ou moins lisse du texte : les pixels sont faits de couleur, donc la couleur peut changer le rendu des caractères. Je me suis arrêté sur un bleu sombre pour maintenir un contraste fort : c’est utile pour rendre justice aux détails de Minion, surtout que le fond n’est pas d’un blanc éclatant.
h1, h2, h3, p.intro {
text-rendering: optimizeLegibility;
}Ensuite, j’ai travaillé sur la titraille. Je commence habituellement mes titres en appliquant text-rendering: optimizeLegibility. Sous Firefox 3, Safari 5+ et Chrome 4+, cette règle indique au navigateur d’appliquer à la lettre les instructions concernant l’approche des caractères, c’est‑à‑dire que les lettres seront espacées les unes des autres exactement comme prévu par le créateur de cette fonte. À utiliser avec prudence : optimizeLegibility peut poser quelques soucis de performance, même si de mon côté je les ai toujours trouvés négligeables. Mais vous avez peut‑être une expérience différente.
h2 {
margin-left: 20px; /* Alignement visuel de la hampe du T avec le bord gauche de l’élément ".side" */
font-family: "Myriad-Pro-Condensed-1", "Myriad-Pro-Condensed-2";
font-size: 190px; /* Scale origin */
line-height: 1;
font-weight: 600;
text-transform: uppercase;
letter-spacing: -2px;
color: #033649;
}Vous devez vous souvenir que la taille de police de mon titre h2 (190px) était l’une des valeurs de départ sur lesquelles j’ai basé mon échelle modulaire. En mettant tout le texte en capitales, la composition s’en trouve renforcée et plus facile à situer ; celui‑si est si grand que j’ai réduit l’espacement avec le letter-spacing (NB : ceci est différent de « l’approche », puisqu’on resserre ou qu’on écarte toutes les lettres d’un coup et d’une même distance). La marge de gauche a été ajoutée par la suite, pour aligner la hampe du « T » avec le bord gauche de ma barre latérale ; cette valeur ne provient pas de mon échelle modulaire, mais s’est imposée au fur et à mesure que je travaillais sur mon lettrage. On peut se permettre d’improviser, comme nous verrons plus tard.
Le titre « Typesetting » utilise la version semi‑grasse de Myriad Pro Condensed (font-weight: 600). J’ai essayé d’autres formules, mais celle‑ci me convenait le mieux. J’ai choisi un bleu sombre pour la couleur, puis j’ai décidé d’employer différentes couleurs pour chacune des lettres avec Lettering.js.
h1 {
margin: 44.856px 0 0 307.420px;
font-size: 29.124px;
line-height: 1;
font-weight: 300;
font-style: italic;
}Le titre h1, « Markup & Style », a reçu sa taille et son espacement en prenant des nombres de mon échelle.
Là aussi, j’ai testé différents nombres avant de tomber sur le bon. Bien que j’ai commencé par centrer ce titre avec text-align, j’ai finalement trouvé qu’un décalage vers la droite rendait encore mieux.
.group {
width: 845.479px;
margin: 0 auto 18px;
}
.side {
float: right;
width: 274px; /* Les images horizontales de cette colonne font 190px de haut, non retaillées */
margin: 27.723px 29.124px 0 0;
}Avant d’entrer dans les détails de la barre latérale, j’ai travaillé sur mon conteneur, les éléments flottants et le clearfix.
J’ai cherché dans l’échelle un nombre adapté à la largeur de mon conteneur, .group, en m’assurant qu’il serait assez grand pour que mon titre h2 y tienne, puis j’ai choisi une largeur pour ma barre latérale. Après quelques essais avec des chiffres de mon échelle, je n’étais toujours pas content du résultat obtenu. 199,603px était trop étroit, et 307,420 trop large.
Donc j’ai contourné le problème : j’ai modifié la largeur de l’image du cahier et du crayon, en cherchant différentes hauteurs en prenant des nombres de l’échelle. À 190px de haut (le chiffre d’origine de mon échelle) et 274px de large, cet élément visuel essentiel de ma barre latérale semblait rendre très bien dans la composition. De plus, cette taille me donnait une largeur de colonne (274px) qui était parfaite.
.side p {
font-family: "Minion-Pro-Caption-1", "Minion-Pro-Caption-2";
font-size: 15px; /* Un peu d’improvisation ! On a le droit ! */
line-height: 1.54;
}Je voulais que la taille des caractères dans ma barre latérale soit inférieure à celle du texte principal, pour deux raisons : je voulais que ce texte soit plus discret visuellement parce qu’il est moins important que le texte principal, et je voulais aussi m’assurer que j’aurais la place d’y placer des lignes d’une longueur confortable. Comme j’avais prédéfini une largeur assez réduite en me basant sur la taille de mon image, il fallait que la taille des caractères (font-size) soit un peu plus réduite pour pouvoir placer plus de caractères par ligne. Mais la grande question était de savoir jusqu’où aller dans la réduction.
Après avoir essayé quelques nombres de mon échelle pour la taille des caractères de la barre latérale, et sans être satisfait, je me suis souvenu que Minion Pro a une version optique qui est conçue pour des tailles plus réduites et qui s’appelle Caption. Minion Pro Caption est un peu plus épaisse que la fonte Minion pro normale, donc ça me convenait très bien. J’ai cherché en vain une taille de texte qui me convienne, pour finir par improviser. Le chiffre 15 ne fait pas partie de mon échelle modulaire, mais je trouve que Minion Pro Caption 15px rend vraiment bien à côté de Minion Pro 18px.
Eh oui, j’ai improvisé.
Les échelles modulaires sont un outil, pas une baguette magique. Elles ne vont pas résoudre absolument toutes les questions de mesures, et c’est très bien comme ça. Les maths ne remplaceront jamais l’œil d’un designer aguerri, mais cela peut fournir à la fois des idées et des contraintes pour aider à la décision. Dites‑vous que les nombres de l’échelle peuvent guider vos tâtonnements. Arrondissez‑les si vous le souhaitez (22,162 peut devenir 22). Associez‑les (3,56 + 16 = 19,56). Ou bien, comme vous venez de me voir faire, libérez‑vous complètement de l’échelle.
/* Intro
----------------------------------------------- */
/*p.intro {
margin: 0.809em 0;
font-size: 22.250px;
line-height: 1.309;
}*/
p.intro {
margin: 0.952em 1.54em 0.952em 0;
font-size: 21.178px; /* 27.723 - 6.545 */
line-height: 1.394; /* 1.54 - 0.146 */
}Les décisions que j’ai prises dans la mise en place des deux paragraphes p.intro constituent un autre exemple d’improvisation, et s’approchent aussi de ce que j’appelle les « commentaires mathématiques », qui me semblent importants pour partager notre travail avec clarté et efficacité.
J’avais ici tout un ensemble de mesures qui me plaisaient bien (ce sont celles qui sont placées entre les marques de commentaire). Mais parvenu à un certain point, je me suis aperçu que je ne voyais pas du tout d’où elles provenaient. Ce ne sont pas des nombres issus de mon échelle. J’imagine que j’ai dû, en travaillant tard le soir, saisir les mauvais chiffres dans ma calculatrice et continuer sur cette base (avant que la calculatrice de l’échelle modulaire ne sache produire des URL mémorisables). Mais ça rendait bien ! Dans un esprit d’improvisation, j’aurais pu continuer avec ces chiffres comme ils étaient. Mais je voulais expliquer une autre technique que j’emploie.
Pour obtenir des nombres proches de ceux que j’avais déjà trouvés, tout en utilisant l’échelle correcte, j’ai combiné des nombres de l’échelle. La taille de caractère de ces paragraphes d’intro (21,178) n’est pas issue de mon échelle ; en revanche, c’est le résultat de la combinaison de deux nombres qui en font bien partie. À chaque fois que j’additionne ou que je soustrais pour parvenir à approcher des valeurs qui ne faisaient pas partie de mon échelle, j’indique l’opération mathématique utilisée en commentaire. Ça m’aide à m’en souvenir, et ça aide d’autres personnes à comprendre comment j’ai fait.
Dernier point : comme j’ai basé ma mise en page sur une échelle modulaire qui dérive en partie de la taille précise d’une fonte précise, mes mesures ne font sens que si cette fonte est effectivement utilisée. Donc quand mes fontes idéales ne sont pas présentes, ce qui peut arriver pour diverses raisons (une connexion trop lente ; un navigateur ou un OS trop ancien ; un utilisateur qui désactivent les polices web dans ses préférences ; etc.), ce sont des polices génériques (et des mesures génériques) qui prennent le relais. En fait, dans un esprit d’amélioration progressive, je précise les polices de base et les mesures génériques dès le départ, pour ensuite aller vers mes polices préférées et les mesures idéales basées sur l’échelle modulaire. Voyez la feuille de styles de notre exemple pour saisir les détails. Vous pouvez en lire davantage sur cette technique dans cette série d’articles signés par Sean McBride. (NB : je suis parvenu à définir ces polices de base grâce à l’aide de Ffffallback de Josh Brewer).
Comment intégrer cela dans ma pratique ?
Par certains aspects, c’est une approche différente de celles que nous connaissons déjà, mais elle semble plus naturelle. Construire à partir du contenu plutôt que de le faire rentrer dans un canevas prédéfini, pour paraphraser Mark Boulton, est une méthode de design plus naturelle au Web. Des gens comme M. Boulton, Andy Clarke et Luke Wroblewski se font depuis des années les prophètes d’une inversion de la façon dont on appréhende le design pour le Web, et il est temps de l’appliquer.
Il peut être troublant de définir une mise en page à partir du choix d’une fonte et d’une échelle modulaire si, comme moi, vous aviez l’habitude de concevoir des sites web en dessinant des boîtes avant de les remplir de contenu. Les choix dimensionnels arbitraires que je faisais autrefois n’avaient aucun rapport avec le sens sous‑jacent que j’entendais donner à mes designs. Au mieux, je déterminais des mesures au jugé avec les CSS, j’ouvrais le résultat dans mon navigateur et je jugeais le résultat à l’œil. Si ce que j’obtenais me semblait correct et que la page fonctionnait, ça me suffisait.
Voir la typographie comme l’atome indivisible du design web nous offre l’opportunité de prendre de meilleures décisions qui résonneront en amont et en aval. Mais cela nous contraint aussi à nous éloigner de solutions toutes faites, comme l’emploi de structures pré‑fabriquées et de modèles réutilisables, et à accepter un nouvel équilibre dans nos charges de travail : il s’agit de consacrer davantage d’investissement et d’effort dans cette quête d’une typographie qui soit davantage porteuse de sens.
Il est utile de connaître les principales dimensions des écrans, mais déverser du texte dans une composition dont les mesures ne découlent que de ces dimensions est loin d’être idéal. Les nombres facilement divisibles ont certes pour qualité d’être faciles à manipuler (ce qui est très bien pour faire des croquis rapides), mais en tant que professionnels nous devons viser plus haut. Il vaut mieux que nous choisissions des nombres parce qu’ils sont justes, parce que leur rendu est bon, et parce qu’ils servent les besoins du design.
Les reset.css tels qu’on peut trouver dans HTML5 Boilerplate sont très utiles quand on crée un design avec des échelles modulaires. Il faut s’assurer que les décisions mathématiques que l’on prend sont correctement rendues dans le navigateur, et de façon aussi cohérente que possible entre les différents navigateurs.
En fait, beaucoup de pratiques déjà très répandues sont parfaitement compatibles avec les mesures basées sur les échelles modulaires. Créer un design de cette manière n’empêche pas qu’il soit basé sur une grille ni qu’il s’adapte à différentes tailles d’écran. On peut prendre de petits nombres sur l’échelle pour trouver la largeur de colonne d’une grille ; ou alors on peut prendre un grand nombre et le diviser en colonne (dans ce cas il est plus simple d’arrondir le chiffre de départ). Si on construit tout autour d’un point de référence pour un design adaptatif ou responsive (sur la base d’une mise en page soigneusement ajustée pour un environnement particulier), on peut employer les nombres d’une échelle modulaire, puis les convertir en pourcentages comme il est d’usage.
Conclusion
Créer un design à partir d’échelles modulaires est un moyen d’effectuer des choix plus conscients, plus porteurs de sens pour les mesures adaptées au Web. Les échelles modulaires fonctionnent avec (et non pas contre) les designs adaptatifs et les grilles, elles offrent une solution raisonnable aux limites liées aux tailles d’écran qui évoluent constamment, et elles nous aident à parvenir à une harmonie visuelle qu’on ne trouvera pas dans des compositions qui utilisent des nombres arbitraires, conventionnels, ou facilement divisibles.
Mais comme nous l’avons vu à travers cet article, les échelles modulaires sont des outils, pas des dogmes. L’important pour nos lecteurs, pour notre art et notre culture est que nous prenions des décisions de design assumées. Car c’est ainsi que nous pourrons progresser.
Lectures
- The Elements of Typographic Style : Je ne saurais trop recommander The Elements of Typographic Style de Robert Bringhurst, surtout la partie qui s’appelle Shaping the Page (Mettre la page en forme). C’est là que j’ai découvert la puissance des échelles modulaires, comment les construire, en quoi elles diffèrent des grilles, et en quoi leur souplesse peut nous aider à trouver un point d’équilibre naturel entre l’exactitude typographique et l’improvisation cadrée.
- More Perfect Typography : partir des caractères et utiliser les échelles modulaires, voilà le sujet d’une intervention d’une demi‑heure que j’ai faite à Build en novembre 2010. Vous pouvez la regarder en ligne si vous voulez. C’est un bon complément à cet article, mais relevant davantage de l’inspiration que de l’information. J’y parle d’Aldus Manutius, j’explique ma méthode pour évaluer la casse pour le corps de texte, et je partage une autre mise en page similaire à l’exemple présenté dans cet article.
http://www.alistapart.com/articles/more-meaningful-typography/