Typographie et mise en page

Typographie et mise en page

La typographie : un langage à part entière

Définitions clés

• Typographie : art d'assembler et de dessiner des caractères.
• Fonte / police : jeu complet de caractères d'un même style.
• Famille typographique : ensemble des variantes (regular, italic, bold, condensed…).

Anatomie d'une lettre

Hampes, jambages, œil, panse, empattement (serif), fût, contre-forme, ligne de base, hauteur d'x, ligne d'ascendantes/descendantes.

Classification Vox-Atypi (simplifiée)

Famille	Caractéristique	Exemples
Humanes	Inspirées manuscrits Renaissance	Centaur, Jenson
Garaldes	Empattements fins, contraste modéré	Garamond, Bembo
Réales	Axe vertical, empattements horizontaux	Times, Baskerville
Didones	Fort contraste, empattements filiformes	Bodoni, Didot
Mécanes / Egyptiennes	Empattements rectangulaires	Rockwell, Clarendon
Linéales / Sans-serif	Sans empattement	Helvetica, Futura, Univers
Incises	Empattements triangulaires	Optima, Trajan
Scriptes	Imitent l'écriture manuscrite	Zapfino, Pinyon
Manuaires	Effet dessin à la main	Comic Sans

Choix typographique : critères

• Lisibilité vs expressivité : sans-serif pour l'écran, serif pour longs textes imprimés.
• Cohérence avec la marque et le message.
• Nombre limité : maximum 2-3 familles par projet.
• Hiérarchie : contraste de graisses, de tailles, de styles.

Grands typographes

• Claude Garamond (XVIᵉ) : caractères qui structurent l'imprimerie française.
• Giambattista Bodoni (XVIIIᵉ) : Didone, contraste extrême.
• Adrian Frutiger : Univers (1957), Frutiger (1976).
• Max Miedinger : Neue Haas Grotesk → Helvetica (1957).
• Erik Spiekermann : Meta, FF DIN, culture des specimens numériques.

Mise en page : principes

La grille

Structure invisible qui organise l'espace. Colonnes, gouttières, marges, ligne de base commune. Popularisée par la Swiss Typography (Emil Ruder, Josef Müller-Brockmann).

Le nombre d'or et proportions harmoniques

Rapport 1:1,618 utilisé depuis l'Antiquité. Alternatives : proportion racine de 2 (format ISO A4), suite de Fibonacci.

Hiérarchie visuelle

1. Titre principal (accroche)
2. Sous-titres (structure)
3. Corps de texte (contenu)
4. Légendes / notes (contexte)

Outils : contraste de taille, graisse, couleur, position, blanc environnant.

Les six principes clés

• Alignement : rien n'est placé au hasard.
• Proximité : les éléments liés sont regroupés.
• Contraste : hiérarchise et attire l'œil.
• Répétition : crée la cohérence visuelle.
• Blanc : espace de respiration.
• Équilibre : symétrique (formel) ou asymétrique (dynamique).

Formats et espaces

• ISO A (A0 = 1 m², chaque format = moitié du précédent).
• Formats à l'américaine : Letter (8,5 × 11 pouces).
• Web : responsive, mobile first.

Grands mouvements graphiques

• Constructivisme russe (Rodchenko, El Lissitzky) : géométrie, rouge/noir, typographie brute.
• Style suisse (années 50) : grille, sans-serif, image + texte alignés.
• Push Pin Studios (Milton Glaser, années 60) : couleur, humour, lettrages.
• New Wave (Wolfgang Weingart, années 80) : rupture avec la grille, superpositions.
• Design éditorial contemporain : magazines Apartamento, The Gentlewoman, Migrant Journal.

À retenir

La typographie n'est jamais neutre : elle véhicule un ton, une époque, une valeur. Une mise en page réussie combine grille rigoureuse et expressivité maîtrisée.