Grilles & feuilles de stylepour l’imprimé et le Web

Graham Davis

500X_GRID_001-005_FR.indd Sec1:3X_GRID_001-005_FR.indd Sec1:3 30/10/07 16:47:2930/10/07 16:47:29

Text BlackText Black

© Groupe Eyrolles, 2008, pour la présente éditionISBN 978-2-212-12267-1

Comment choisir la bonne grille et la bonne feuille de style

Le secret d’un design efficace et professionnel réside dans le choix de la bonne grille et de la bonne feuille de style. Cet ouvrage vous aidera à identifier et à utiliser le modèle le plus adapté à ce que vous recherchez, que vous travailliez sur une brochure, un magazine, un prospectus ou une page Web. Vous trouverez sur le CD-Rom d’accompagnement 500 modèles dans les formats de fichiers les plus communément utilisés en graphisme Web et papier – Adobe InDesign et QuarkXPress – ainsi que des pages HTML et des feuilles de style CSS utilisables aussi bien avec Dreamweaver qu’avec n’importe quel autre logiciel de création Web ou éditeur de texte. Tous ces modèles sont prêts à l’emploi ou peuvent être adaptés à un usage plus particulier.

La section Vignettes (pages 97 à 149) regroupe tous les modèles présents sur le CD-Rom d’accompagnement. Les gabarits destinés à l’impression ont été créés spécialement à cette fin, mais vous pourrez, bien sûr, les personnaliser pour les adapter à d’autres supports. Quant aux modèles Web, ils sont basés sur des feuilles de style CSS et peuvent donc être réutilisés facilement.

Que vous soyez un graphiste novice ou expérimenté, vous trouverez dans cet ouvrage toutes les indications nécessaires pour exploiter au mieux les modèles, ainsi que de précieux con-seils pour vous aider à comprendre les problématiques des mises en pages, que ce soit sur le Web ou sur le papier.

SECTION 1 INTRODUCTION

8

COMMENT CHOISIR LA BONNE GRILLE ET LA BONNE FEUILLE DE STYLE

9

C’est le designer qui détermine la quantité d’informations que contiennent la grille et la feuille de style. Quelle que soit la grille, le principal objectif est la lisibilité du texte : si la justi-fication est trop large ou trop resserrée, il sera difficile à lire. Malheureusement, il n’existe pas de règle pour décider de la largeur des colonnes. Un livre de poche arbore invariablement une seule colonne de texte assez large, mais avec suffisamment d’espace entre les lignes pour permettre une lecture confortable. À l’inverse, un journal comporte généralement six colonnes assez fines, aux limites de la lisibilité, mais offrant au metteur en pages et au service publicité une plus grande flexibilité.

Avant la généralisation de la PAO (Publication Assistée par Ordinateur), la grille était imprimée sur de grandes feuilles sur lesquelles venaient se coller les différents éléments de la mise en pages après avoir été découpés, puis assemblés à la main. C’était l’époque de la « photocomposition ». Auparavant encore, la mise en pages était dessinée à la main sur de minces feuilles de papier et il fallait calculer avec précision le nombre de lignes qu’un paragraphe pouvait occuper, afin que le compositeur puisse ren-trer un à un tous les caractères du texte et fournir ainsi la mise

Une grille sert à apporter consistance et harmonie visuelle dans un document multipage ou multi-écran ; c’est la structure invisible qui soutient le design. Pour les documents imprimés, elle est en principe enregistrée en tant que page type (ou page de maquette ou encore gabarit). La feuille de style pour sa part est un élément qui rassemble toutes les instructions servant à la mise en forme du texte ou d’autres éléments graphiques. Quand on y apporte des modifications, tous les éléments concernés sont automatiquement modifiés en conséquence.

Pour le Web et les documents électroniques, le principe est le même, mais le procédé est différent. Traditionnellement, la maquette d’un document destiné à l’écran est basée sur une structure constituée de cellules, de lignes et de colonnes. Ainsi, une maquette composée de 4 colonnes et de 4 lignes va conte-nir 16 cellules, cellules qui vont recevoir le contenu de la page. Cette méthode est progressivement remplacée par l’usage des CSS (Cascading Style Sheets ou feuilles de style en cascade) qui con-tiennent toutes les informations de mise en forme nécessaires à la création d’une page. Elles comportent de nombreux avantages qui seront présentés dans la suite de l’ouvrage.

Lettre

Les formats Lettre et A4 sont les plus utilisés dans la production de documents imprimés et représentent le format standard des communications par courrier aux États-Unis, en Europe et dans le reste du monde. Tous les modèles proposés sur le CD sont disponibles dans les deux formats.

SECTION 1 INTRODUCTION

10

8.5" / 216 mm

11"

/ 26

0 m

m

L’ancienne grille imprimée devait proposer de nombreuses combinaisons pour l’arrangement des en-têtes, pieds de pages et colonnes sur une seule feuille imprimée.

en pages demandée. La PAO a amorcé une nouvelle ère : il est aujourd’hui possible d’imprimer avec un minimum d’équipement informatique et tout le monde peut s’improviser maquettiste !

Cette nouvelle technologie a également révolutionné les habitudes de travail un peu archaïques. Aujourd’hui, grâce à des applications comme InDesign, QuarkXPress ou Dreamweaver, le graphiste peut s’essayer sans crainte à des réalisations complexes, avec l’avantage de pouvoir, à tout moment, revenir en arrière. Les changements de marges et de largeur de colonnes peuvent très rapidement modifier l’aspect d’une production, d’autant que les pages de maquettes, les feuilles de style ou encore les CSS (pour le Web) simplifient grandement le processus.

Vous trouverez systématiquement deux versions des modèles du CD : l’une correspond au système métrique, largement utilisé en Europe et dans le reste du monde, l’autre au système de mesure américain. Les formats de documents les plus populaires sont le format « A4 » et son homologue américain « Lettre ». Les propor-tions de ces deux formats sont différentes, comme vous pouvez le constater sur les vignettes ci-dessous. Le format lettre est moins haut et plus large que le format A4, qui est plus élancé.

Les bouts de texte étaient ensuite collés à la main sur cette grille. Elle était imprimée en bleu, de façon à ce qu’elle ne soit pas visible lors du clichage des films.

A4

11

11.6

7" /

297

mm

8.27" / 210 mm

COMMENT CHOISIR LA BONNE GRILLE ET LA BONNE FEUILLE DE STYLE

Les logiciels de mise en pages permettent de créer plusieurs grilles au sein d’un même document, grâce aux pages types ou gabarits. Ces pages sont plus que de simples grilles, car elles peuvent aussi contenir des éléments graphiques ou du texte qui apparaissent alors automatiquement sur les pages y faisant référence.Ici, quatre gabarits ont été créés :• A pour la première de couverture ;• B pour le texte courant ;• C pour une double page avec image ;• D pour la quatrième de couverture.

SECTION 1 INTRODUCTION

12

Anatomie de la grille et des feuilles de style pour l’imprimé

La grille définie dans une page type devient vraiment pertinente lorsqu’elle est utilisée dans un document multipage, ce qui oblige le compositeur à réfléchir à une diffusion sur des doubles pages plutôt qu’en une seule. Si au moment de créer un document dans InDesign ou QuarkXPress, vous choisissez un document avec des pages en vis-à-vis, les marges de gauche/droite deviennent celles d’intérieur et d’extérieur (ou encore petit fond et grand fond). La marge intérieure dépend en grande partie de l’épaisseur du docu-ment et du type de reliure choisi. Sur un 96 pages, format A4, broché sans couture, une partie conséquente de la marge inté-rieure est sacrifiée lors du brochage, ce qui n’est pas le cas avec un 12 pages piqué à cheval. Ainsi, n’oubliez jamais que la marge intérieure paraît toujours plus réduite une fois le livre broché, par rapport à ce que vous voyez à l’écran.

La taille des autres marges est en fait souvent déterminée par des soucis esthétiques. D’une manière générale, de grandes mar-ges donnent plus d’espace blanc dans une mise en pages, ce qui confère un aspect plus accessible au document. Outre les réglages

de marges et le choix du nombre de colonnes, vous pouvez aussi vous servir de guides verticaux et horizontaux pour vous aider dans l’alignement du texte et des images.

Entre les marges, la zone de texte est divisée en colonnes dont la taille est fonction de la taille de la page et du corps des carac tères. Les modèles fournis sur le CD ont été conçus pour des usages particuliers et ont été créés dans de nombreux formats de pages types.

La grille de ligne de base est un outil précieux qui permet de contrôler la régularité de l’alignement. Lorsque l’option d’alignement sur la grille est cochée, la ligne de base d’un bloc de texte s’aligne automatiquement sur la ligne horizontale de grille la plus proche. Dans un document comportant beaucoup de texte, il est judicieux d’harmoniser l’incrément de la ligne de base sur l’interlignage du texte. Si le texte est composé en en plusieurs corps différents dans le document, deux options s’offrent à vous. La première consiste à trouver un dénomina-teur commun, par exemple du texte courant en corps 12, des

La grille de ligne de base est utilisée pour maintenir le bon alignement du texte au sein d’une page. Chaque élément du texte est contenu dans un bloc de texte. Quand le Décalage (Offset) est réglé sur Interligne (Leading), chaque ligne du texte vient s’appuyer sur les lignes de la grille de ligne de base.

Text Frame Options

General Baseline Options

First Baseline

Off set:

AscentCap HeightLeadingx HeightFixed

Leading

Baseline Grid

Use Custo

Relative To:

Increment Every:

Colour:

Min:

Top Inset

4.233 mn

(Layer Colour)

Anatomie de la grille d’impression pour une double page

InDesign et QuarkXPress permettent tous deux de disposer de plusieurs pages de gabarit avec une grille différente pour chacune d’entre elles.

Zone de rognage Colonnes Marges

Fond perdu Grille de la ligne de base

Gouttière

Pour les modèles Web, voir page 16.

Repères

Zone de rognageFormat de la page une fois rognée

ColonnesEspace occupé par le texte

GouttièreEspace entre les colonnes

MargesEspace autour de la zone de texte

RepèresGuides mobiles d’alignement

Grille de la ligne de baseReprésente l’interlignage du texte

Fond perduEspace additionnel pour les éléments graphiques placés en débord et qui sera supprimé au massicotage

13

ANATOMIE DE LA GRILLE ET DES FEUILLES DE STYLE POUR L’IMPRIMÉ

Décalage de la ligne de base

Bien que la possibilité de verrouiller le texte sur la grille soit très utile, cela peut occasionner des espacements irréguliers. On peut éviter ce problème en utilisant le décalage de la ligne de base pour déplacer un élément vers le haut ou vers le bas. L’interlignage ci-dessous est basé sur une grille dont le pas est réglé à 7 pt.

16/21 pt

33/35 pt4 pt de décalage sur la ligne de base

12/14 pt

Lettre

Colonnes 3Gouttière 0,25" 6,3 mm

MargesHaut 0,88" 22,3 mmBas 0,90" 22,8 mmGauche 0,80" 20,3 mmDroite 0,80" 20,3 mm

Ligne de base 7 pt

Styles de caractèreTexte 12 pt Bembo RomanTitre 35 pt Franklin Gothic CondLettrine 12 pt Franklin Gothic Cond échelle verticale 95 %

Styles de paragrapheTexte au fer 0,07" 2 mm 14 pt d’interlignageTexte lettrine sur 3 lignes Titre 35 pt d’interlignage

Proportions de documentÀ la différence des formats métriques ISO en « A », dont chacun est la moitié de son format supérieur avec un rapport constant de 1:1,41, le standard américain n’a pas de taux constant. Le format lettre a un rapport de 1:1,30 alors que celui de la demi-lettre est de 1:1,55, ce qui rend difficile l’adaptation d’un document à un nouveau format puisque le format demi-lettre est plus en hauteur, imposant ainsi la réduction des largeurs de colonnes.Cet exemple de document Lettre montre un texte réglé à 12/14 pt*, alors que la demi-lettre est à 10/12 pt. Si le texte avait été réduit de façon homothétique (1:1,30), on aurait un corps de texte de 9/11 pt.

SECTION 1 INTRODUCTION

14

sous-titres en corps 18 et des grands titres en corps 24. Tous ces niveaux pourront s’aligner sur une grille divisée en écarts de 6 pt. Si cela n’est pas possible, vous pouvez régler la ligne de base sur le texte où l’alignement est indispensable et vous assurer que les autres éléments du texte n’ont pas l’option d’alignement sur la grille cochée.

Chaque modèle est accompagné de feuilles de style de carac-tère et de paragraphe appliquées à du faux-texte ; ces derniers ont été créés à l’aide de polices qui ne sont pas nécessairement installées sur votre système. Quand vous ouvrez un modèle, une liste des polices manquantes s’affiche et vous propose de les remplacer par celles de votre choix. Vous trouverez page 29 une liste des police utilisées dans l’ensemble des modèles.

Les feuilles de style sont très pratiques quand un docu-ment doit être converti dans un autre format. Ainsi, changer le corps du texte dans une feuille de style a un effet global sur l’ensemble du texte basé sur cette feuille de style. Mais des éléments sortent malgré tout de l’espace de contrôle de la feuille de style ; c’est notamment le cas de la grille de ligne de base. Bien qu’il soit possible de spécifier l’endroit de départ le la grille de ligne de base, il est, la plupart du temps, préférable

* 12 correspond au corps et 14 à l’interlignage.

Demi-lettre

Colonnes 3Gouttière 0,18" 4,5 mm

MargesHaut 0,50" 12,7 mmBas 0,585" 14,8 mmGauche 0,50" 12,7 mmDroite 0,50" 12,7 mm

Ligne de base 6 pt

Styles de caractèreTexte 10 pt Bembo RomanTitre 24 pt Franklin Gothic CondLettrine 10 pt Franklin Gothic Cond échelle verticale 95 %

Styles de paragrapheTexte au fer 0,07" 2 mm 12 pt d’interlignageTexte lettrine sur 3 lignes Titre 24 pt d’interlignage

Mise à l’échelle d’un documentLa mise à l’échelle d’un document requiert plus qu’une simple réduction. Les marges qui semblent confortables sur un document A4 ne sont pas forcément les mêmes

pour un A5. De plus, compte tenu de la concentration du texte dans la version plus petite, il est préférable de réduire les marges. L’image de droite montre le document mis à l’échelle sans correction.

Styles imbriqués

Les styles imbriqués sont des styles de paragraphe agrémentés de styles de caractère qui interviennent successivement et dans un ordre précis. Chaque style de caractère s’active dès qu’il rencontre dans un paragraphe, un caractère spécifique comme une puce, un tiret, ou comme ici, une phrase. Cette modification des caractères a eu lieu automatiquement lors de l’application du style de paragraphe.

Style : TitreSur une phrase

Style : TexteSur une phrase

Style : PrixSur une phrase

15

de faire démarrer la grille au bord du haut de page, comme c’est le cas pour les exemples du CD. En effet, comme l’unité de mesure de la grille est le point (pt), cela ne coïncide jamais exactement avec les marges de tête et de pied, habituellement réglées en millimètres : il faudra donc un peu tâtonner. Bien que ces paramètres soient réglés lors de la création du document, des modifications ultérieures peuvent être apportées dans les gabarits. Par défaut, les valeurs de la lettrine sont définies dans les styles de paragraphe, mais vous pouvez aussi, comme dans l’exemple ci-dessous, créer un style de caractère spécifique et l’appliquer après le style de paragraphe. Ce caractère seul a dû être réduit à 95 % pour rester aligné avec le paragraphe (le plus petit des deux documents ci-dessous fait approximativement 70 % la taille du plus grand).

Enfin, la grille du document, sorte de papier millimétré numérique, peut être utilisée indépendamment de la grille de ligne de base. Il peut être assez déroutant d’utiliser ces deux outils de repère en même temps ; c’est pourquoi la grille du document n’a pas été utilisée dans les modèles. Notez que vous pouvez changer les couleurs de tous les guides et grilles si vous le souhaitez.

ANATOMIE DE LA GRILLE ET DES FEUILLES DE STYLE POUR L’IMPRIMÉ

Lorem Ipsum DolorEt consed dunt iureet ercing et velismo dignisl in veros dunt acip ent vullupt ationsecte facidunt nulputat facil exerit dolesequisi bla con henisse niamcon sequamet in henim.

00,00 €

Voici la liste des polices disponibles par défaut sur un ordinateur. L’Arial est l’équivalent PC de l’Helvetica, qui est un standard Mac. Si vous voulez utiliser une autre police, la seule solution consiste à convertir le texte concerné en image, comme dans l’exemple de la page ci-contre. En revanche, le texte n’étant plus modifiable, il restera invisible aux moteurs de recherche et sera difficile à décliner sur d’autres supports.

SECTION 1 INTRODUCTION

16

Anatomie d’une feuille de style CSS pour le Web et l’écran

Dreamweaver est devenu le leader des logiciels éditeur de sites Web. De nombreux graphistes utilisent ses fonctions « Calque » dans le traitement des images, ce qui permet à une maquette réalisée dans un éditeur d’images comme Photoshop d’être utili-sée en arrière-plan lors de la construction de la page web. Mais il ne s’agit que d’une aide temporaire, et l’image est supprimée du document final. Cette technique était destinée à être utili-sée dans les mises en pages en tableaux, mais elle fonctionne aussi dans les organisations en CSS. Bien que la plupart des modèles présentés dans ce livre utilisent les CSS, les images ci-contre illustrent la grille de mise en pages basique derrière chaque design.

La maquette d’une page Web a beaucoup de points communs avec celle d’un document imprimé. En principe, elle s’organise en colonnes avec des en-têtes et certains éléments typographiques qui vont guider le lecteur dans sa quête d’informations ; et de la même manière que l’on tourne la page dans un livre, il suffit de cliquer pour se rendre à la page Web suivante. Ce qui fait la différence, c’est que la page Web ne peut avoir de taille fixe, même si cette dernière est contrainte par une certaine largeur en pixel s. Elle est en effet tributaire de la taille et de la résolution de l’écran de l’utilisateur. Les mouvements de texte

d’une colonne à l’autre est aussi problématique. Ces limitations s’expliquent par le fait qu’Internet a été initialement conçu pour échanger de simples documents texte, avec recours à des balises HTML pour régler les différentes tailles du texte et créer les hyperliens. Avec le développement phénoménal d’Internet et d’autres technologies, comme la voix sur réseau IP et la vidéo en streaming, le HTML commence à montrer ses limites.

Bien qu’elle offre une grande maîtrise de la typographie, comme la mise au format d’un texte à une certaine taille, la nouvelle technologie des CSS ne constitue pas la solution au problème. Malgré tout, les CSS restent bien utiles dans d’autres domaines, notamment avec la prolifération des périphériques qui peuvent qui peuvent afficher des pages Web. Contrairement au HTML, les CSS séparent le contenu (ou données) des infor-mations de mise en forme d’une page, ce qui permet une décli-naison bien plus facile de l’information sur plusieurs supports, grâce à la simple application d’une autre feuille de style CSS.

Un autre avantage des CSS est de pouvoir reconnaître la réso-lution de l’écran sur lequel s’affiche la page et d’avoir recours, le cas échéant, à la feuille de style ayant été conçue spéci-fiquement afin de préserver la mise en pages dans une résolu-tion particulière. Du point de vue du graphiste, la plus grande

Helvetica abcdefghijklmnopqrstuvwxyz

Times abcdefghijklmnopqrstuvwxyz

Courier abcdefghijklmnopqrstuvwxyz

Georgia abcdefghijklmnopqrstuvwxyz

Verdana abcdefghijklmnopqrstuvwxyz

Geneva abcdefghijklmnopqrstuvwxyz

Polices par défautArial, Helvetica, Sans-serifTimes New Roman, Times, serifCourier New, Courier, monoGeorgia, Times New Roman, Times, serifVerdana, Arial, Helvetica, sans-serifGeneva, Arial, Helvetica, sans-serif---------------------------------Modifi ez la liste...

17

Afin de contourner les nombreuses différences d’affichage entre les écrans des internautes, de nombreux sites Web adoptent une maquette qui place le contenu principal de la page dans un bloc de taille fixe, plutôt que d’autoriser les colonnes de texte de s’étendre à la largeur maximale permise par le navigateur avec des résultats plus ou moins heureux. Pour cela, on avait traditionnellement pris l’habitude de faire appel à des tableaux, mais aujourd’hui on a de plus en plus recours aux CSS pour assurer cette mise en forme.

Dreamweaver propose un mode d’affichage très utile, qui indique la largeur d’une cellule lorsque celle-ci est sélectionnée. Dans cet exemple, le texte est défini par des CSS, mais la mise en pages repose sur des tableaux. Les largeurs de 66 pixels en haut à droite et à gauche ne sont pas fixes : elles s’étirent ou se raccourcissent en fonction de la fenêtre du navigateur.

La mise en pages se compose de 3 colonnes, 260/250/260 pixels, avec une colonne de texte de 220 pixels insérée dans le bloc central.

Ici, la page est toujours centrée dans la fenêtre du navigateur. Les sept images du menu sont des fichiers PNG avec transparence, qui se déplacent indépendamment de l’image de la bannière en en-tête qui se répète si nécessaire.

ANATOMIE D’UNE FEUILLE DE STYLE CSS POUR LE WEB ET L’ÉCRAN