Composition - Grille.

Proportions de page

La proportion d'une page - le rapport hauteur/largeur - détermine l'espace dans lequel tout le reste s'inscrit. C'est la première décision de toute mise en page. Quatre ratios dominent historiquement.

2:3 - proportion harmonique simple (ratio 1.5). La majorité des manuscrits médiévaux et des incunables ; Tschichold la considère comme la base la plus stable.

1:√2 (≈ 1.414) - norme allemande DIN 476 (1922), devenue la norme internationale ISO 216 (A4, A3…) en 1975. Propriété unique : couper la feuille en deux selon le côté long produit deux feuilles de même proportion. A0 mesure 1 m² par construction (841 × 1 189 mm).

1:φ (≈ 1.618) - le nombre d'or. Utilisé en architecture et en art depuis l'Antiquité ; Tschichold rapporte son usage en typographie entre 1550 et 1770.

Letter US (8.5 × 11 po, ≈ 1:1.294) - standard nord-américain (ANSI A), plus carré que l'A4 ou le 2:3.

Document standard mondial → A4 ou ratio √2. Marché US → Letter. Livre, magazine, esthétique classique → 2:3 ou nombre d'or. Format carré ou panoramique → choix conscient, à justifier.

Marges - le canon de Van de Graaf

Le canon de Van de Graaf est une construction géométrique précise pour positionner la zone de texte sur une page. Décrit par J.A. van de Graaf en 1946, popularisé par Tschichold, qui rapporte que les meilleurs incunables le suivaient - il l'appelle « le canon d'or de la construction de page ».

Pour une page de proportion 2:3 : marge intérieure 1/9 de la largeur, marge extérieure 2/9 ; marge haute 1/9 de la hauteur, marge basse 2/9 - soit un ratio de marges 2:3:4:6 (intérieur : haut : extérieur : bas). La hauteur de la zone de texte égale la largeur de la page, et la zone de texte garde la proportion de la page.

Pourquoi cette construction tient : la marge basse plus large ancre le texte sur la page ; la marge extérieure plus large laisse place à la prise en main et à l'aération ; la zone de texte se centre sur la « moelle » optique de la page, pas sur son centre géométrique. L'Argentin Raúl Rosarivo a montré que la même construction s'obtient en divisant la page en neuvièmes - technique qu'il a retrouvée dans la Bible de Gutenberg.

Colonnes et grilles modulaires

Josef Müller-Brockmann (1914-1996), figure centrale du Style International Suisse, formalise le système modulaire dans Grid Systems in Graphic Design (1981) : « Le travail du designer doit avoir la qualité clairement intelligible, objective, fonctionnelle et esthétique de la pensée mathématique. »

Grille manuscrite - une seule colonne. Livres, e-books, PDF longs ; équivalente à la zone de texte de Van de Graaf.

Grille en colonnes - deux à six colonnes séparées par des gouttières. Magazines, journaux, web.

Grille modulaire - colonnes + rangées formant une matrice de modules. Livres complexes, dashboards ; Müller-Brockmann détaille des grilles de 8 à 32 modules.

Grille de baseline - lignes horizontales équidistantes calées sur l'interlignage. Les lignes de texte s'alignent à travers les colonnes : rythmique verticale propre.

Grille hiérarchique - irrégulière, elle suit la hiérarchie de l'information plutôt qu'une géométrie stricte. Surtout sur le web.

Vocabulaire technique : module (unité de base), gouttière (espace entre colonnes ou rangées), flowline (ligne horizontale qui structure la lecture), hangline (flowline supérieure où s'accrochent les éléments), baseline, spatial zone (groupe de modules adjacents), marker, folio, running header / footer.

La grille 12 colonnes est le standard du web depuis Bootstrap : 12 se divise en 2, 3, 4 et 6, donc tous les ratios courants tiennent dans la même grille.

Texte courant (livre, rapport) → grille manuscrite, 1 colonne, calée sur baseline grid. Document mixte (magazine, brochure) → grille modulaire 2-3 colonnes. Document complexe (catalogue, dashboard imprimable) → 4-6 colonnes. Web ou PDF interactif → 12 colonnes, gouttières en multiples de 8 ou 4. Gouttières : 16 px mobile, 24 px desktop, 1.5 em pour le texte.

Hiérarchie visuelle et points focaux

La règle des tiers : diviser l'image en neuf parties égales ; les quatre intersections sont les positions privilégiées des éléments importants. Trois explications convergentes : un point focal décentré crée plus de tension dynamique qu'un point centré ; on avance aussi que l'œil y revient plus volontiers, ce que les études ne confirment qu'en partie ; enfin 1/3 ≈ 0.333 est une approximation simple de la section d'or (0.382, soit 1 - 1/φ). Une convention utile, pas une loi.

Créer un point focal : par contraste (taille, couleur, forme), par isolement (un élément seul dans une zone vide attire plus que dans une zone dense), par convergence (des lignes qui pointent vers un endroit y mènent l'œil).

Balance symétrique - distribution en miroir autour d'un axe : calme, formel, statique (certificats, documents officiels). Balance asymétrique - distribution non-miroir mais à poids visuel équilibré : dynamique, moderne (magazines, posters, web). Balance radiale - éléments rayonnant depuis un centre : focus, harmonie circulaire (logos, dashboards centrés).

Équilibrer le poids visuel en asymétrique - cinq leviers : la taille (un grand élément balancé par un petit bien placé), la couleur (une zone saturée balancée par une zone neutre plus large), la texture (motif complexe contre zone simple plus large), la position (un élément haut pèse plus que le même élément bas, selon Arnheim : le bas d'une composition équilibrée doit être plus chargé), la direction (un élément qui pointe vers une zone vide la « remplit » perceptivement).

Les six principes de Gestalt (proximité, similarité, continuité, fermeture, figure/fond, destin commun) gouvernent le regroupement perceptif - pour grouper, appliquer la proximité avant la similarité. Ils sont traités en profondeur dans le pilier Perception.

Document corporate formel → balance symétrique, focal central. Document éditorial → balance asymétrique, focal sur une intersection des tiers. Infographie, dashboard → balance radiale ou modulaire, focal central.

Symétrie, asymétrie et style suisse

Tschichold a publié deux livres qui s'opposent : Die neue Typographie (1928), manifeste de l'asymétrie moderne - grille, sans-serif, fer à gauche - puis dès les années 1930, le retour aux principes classiques, réunis dans The Form of the Book (recueil de 1975) - canon Van de Graaf, marges harmoniques, serif, justification. Cette tension est l'axe central du débat du XXe siècle. Sa résolution par Tschichold lui-même : l'asymétrie convient aux supports courts (affiches, brochures), la symétrie aux supports longs (livres).

Le Style Suisse (Zurich, Bâle, années 1940-50 - Müller-Brockmann, Hofmann) : typographie sans-serif (Helvetica, Akzidenz, Univers), alignement asymétrique fer à gauche, grille rigoureuse comme structure invisible, photographie noir et blanc intégrée à la grille, aucune ornementation, hiérarchie par taille et graisse plutôt que par décoration.

« Document classique formel » → symétrie, justification, serif. « Document moderne dynamique » → asymétrie fer à gauche, sans-serif, grille modulaire visible. « Magazine éditorial » → asymétrie avec image qui sort de la grille, titre sur plusieurs colonnes. « Document corporate » → asymétrie modérée, structure visible sans être militante.

Le Modulor

Échelle anthropométrique de proportions développée par Le Corbusier (Le Modulor, 1948 ; Modulor II, 1955) pour unifier architecture, mobilier et design à partir du corps humain et du nombre d'or. Deux mesures de départ - homme debout 1.83 m, bras levé 2.26 m - engendrent deux séries géométriques par φ : la série rouge (… 0.43 → 0.70 → 1.13 → 1.83 → 2.96 …) et la série bleue (… 0.53 → 0.86 → 1.40 → 2.26 → 3.66 …).

Le Modulor vise l'architecture, mais sa logique est généralisable au document : choisir une dimension de base, multiplier et diviser par un ratio constant, et faire suivre toutes les dimensions (tailles de texte, espacements, hauteurs) à cette échelle géométrique. C'est exactement la logique des échelles modulaires typographiques modernes.

Deux critiques documentées : un biais culturel (la stature de référence privilégie un homme occidental de 1.83 m ; les designers contemporains croisent φ avec des données anthropométriques plus larges) et une application discutable (Le Corbusier a parfois appliqué le système rétrospectivement). Cela n'invalide pas le principe d'échelle géométrique harmonique - mais invite à ne pas en faire un dogme.

Construire une échelle modulaire : choisir une taille de base (16 pt web, 11 pt print), choisir un ratio (φ 1.618, √2 1.414, octave 2), générer l'échelle. Base 16, ratio φ : 6.1 → 9.9 → 16 → 25.9 → 41.9 → 67.8. Base 16, ratio 1.5 : 7.1 → 10.7 → 16 → 24 → 36 → 54. L'échelle structure titres, espaces verticaux, hauteurs d'éléments.

Éléments structurels

Un document long contient des éléments récurrents : folio (numéro de page), running header (titre courant en haut), running footer, marker (indicateur de section en marge), page break, caption (légende), sidebar (encart), pull quote (citation mise en valeur).

Deux lignes structurent la rythmique verticale (Müller-Brockmann) : la hangline, ligne haute d'un module où s'accrochent les éléments, et la baseline, sur laquelle s'aligne le bas des lettres. Conventions de folio : en bas côté extérieur (livres classiques), en bas centré (magazines), en haut côté extérieur (ouvrages techniques). Convention Tschichold : le folio vit dans la marge basse - la plus large - hors de la zone de texte, pour préserver l'intégrité du bloc.

Document de référence formel : folio en marge basse côté extérieur, 9-10 pt, police du corps de texte ; running header en marge haute côté extérieur, 9-10 pt, italique ou petites capitales ; saut de page systématique en début de chapitre ; légende sous l'image, 9 pt, italique ; encart aligné sur la grille, séparé par une gouttière ou un filet.

Adaptations modernes - 8pt, tokens, responsive

Le système 8pt est le standard de fait des interfaces numériques : toutes les dimensions et tous les espacements sont des multiples de 8 (8, 16, 24, 32, 40, 48…). Cinq raisons documentées : compatibilité des tailles d'écran (pas de demi-pixels), scalabilité retina (×2, ×3 restent entiers), cohérence visuelle (un nombre fini de valeurs réduit l'arbitraire), communication design-développement, et recommandation de Google (Material Design).

Variantes : système 4pt (granularité fine), 8pt linéaire (ajout constant), 8pt modulaire (8, 13, 21, 34, 55 - multiplication par φ), hybride 4pt baseline + 8pt spacing. Les design tokens (Salesforce, vers 2014-2015) nomment symboliquement les valeurs - spacing-md = 16 px, font-size-h2 = 24 px - pour garantir la cohérence et la modification en cascade.

La grille 12 colonnes s'adapte aux breakpoints : desktop large (1440 px+) 12 colonnes, marges 60, gouttières 24 ; desktop standard 12 colonnes, marges 40 ; tablette (768-1024) 8 colonnes, marges 32, gouttières 16 ; mobile (320-768) 4 colonnes, marges 16. Enfin, hard grid (éléments verrouillés sur les lignes) contre soft grid (multiples de l'unité de base sans verrouillage) : les design systems modernes préfèrent le soft grid, plus flexible.

PDF moderne destiné à l'écran : unité de base 8 pt ; espacements verticaux en multiples de 8 ; gouttières 16 ou 24 pt ; tailles de texte sur l'échelle modulaire avec interlignage en multiples de 4 ou 8 ; éléments interactifs : au moins 44 pt (Apple) ou 48 dp (Material).