Coffee & Learn — Les Architectures

La Typographie

Lire, construire, habiter les lettres

≈ 30 min · ↓ pour commencer

La typographie, c'est de l'architecture

  • On construit avec des modules (les lettres), sur une trame (la grille).
  • Ce qui compte, c'est autant le plein que le vide — le blanc structure la lecture.
  • Le matériau change tout : papier, métal découpé, néon, écran.
  • Bien faite, elle est invisible : on lit le sens, pas la forme.

Objectif du jour : repartir avec les grands principes, le bon vocabulaire… et l'envie de creuser.

Au programme

  1. 01 Quelques moments clés
  2. 02 Reconnaître & nommer ce qu'on voit
  3. 03 Trois terrains : print, bâtiment, web
  4. 04 Quiz typo & conclusion
01

Quelques
moments clés

~1450, Mayence

Gutenberg invente
le caractère mobile

Des lettres en métal, gravées, fondues, réutilisables. Le texte devient industrie — et la lettre, un objet qu'on dessine et qu'on standardise.

Casse de caractères mobiles en plomb
Caractères mobiles en plomb
Caractères de plomb assemblés en lignes de texte
Assemblés en lignes, prêts à imprimer

XVIᵉ siècle

Lyon, capitale
de l'imprimerie

Au XVIᵉ siècle, Lyon est l'un des grands centres de l'imprimerie en Europe — deuxième ville du livre en France après Paris, rivale de Venise. Des centaines d'ateliers, les foires du livre, les graveurs de poinçons.

Façade du Musée de l'imprimerie de Lyon
Musée de l'imprimerie, Lyon 2ᵉ

La référence française

Claude Garamond

Vers 1540, ses caractères deviennent le standard de l'élégance. Cinq siècles plus tard, on compose encore des livres en Garamond.

Ce texte est composé en EB Garamond — une renaissance numérique de ses dessins.

1957 · le tournant moderne

Helvetica

Au sortir de la guerre, la Suisse rêve d'une typographie neutre — sans époque, sans opinion. Naît Helvetica (« suisse » en latin) : pas de fioritures, juste l'information.

Un basculement : de l'ornement vers la fonction. Les entreprises s'en emparent — elle devient la voix du XXᵉ siècle, du métro de New York aux logos du monde entier.

02

Reconnaître
& nommer

Anatomie d'une lettre

  • Empattement serif — le petit pied au bout du trait.
  • Hauteur d'x x-height — la hauteur des minuscules sans hampe ni jambage (comme le x).
  • Ligne de base baseline — la ligne sur laquelle « posent » les lettres.
  • Descendante descender — ce qui plonge sous la ligne de base.
  • Contrepoinçon counter — le vide enfermé dans la lettre.

Six réglages, six mots

Graisse weight Aa Aa light → bold
Chasse width Type Type condensed → extended
Crénage kerning AV AV corriger une seule paire
Approche tracking MOT MOT espacer tout un mot
Interligne leading deux
lignes deux
lignes entre les lignes
Ligature ligature fi fl fi fl deux signes en un

Piège classique : une police = le dessin (Helvetica) ; une fonte = une déclinaison précise (Helvetica Bold 12 pt).

À empattements · serif
Aa

À l'œil : de petits pieds aux extrémités, un contraste plein/délié, l'héritage du ciseau et de la plume.

On les aime pour : le texte long imprimé — livres, presse, rapports. Sérieux, tradition, luxe.

Garamond · Times · Playfair

Sans empattements · sans-serif
Aa

À l'œil : des traits nets, aucun pied. Nées au XIXᵉ, reines du XXᵉ et du design suisse.

On les aime pour : l'écran, la signalétique, le contemporain. Lisibles en petit comme en grand.

Helvetica · Futura · Inter

Empattements carrés · slab
Aa

À l'œil : des empattements épais, carrés, presque mécaniques. L'ère industrielle et les affiches du Far West.

On les aime pour : les titres qui cognent, le ton robuste, « artisanal » ou « technique ».

Roboto Slab · Rockwell

Manuscrites · script
Aa

À l'œil : elles imitent la main, les lettres se lient. Du faire-part à l'enseigne de bistrot.

On les aime pour : l'émotion, l'événementiel, une touche chaleureuse — jamais en bloc de texte.

Dancing Script · Brush Script

Titrage · display
Aa

À l'œil : une forte personnalité, dessinée pour les gros corps. Tout l'inverse de la neutralité.

On les aime pour : une affiche, un logo, un titre choc — peu lisibles en petit, à manier avec parcimonie.

Archivo · BEBAS NEUE

Brisées · blackletter
Aa

À l'œil : les premières imprimées (la bible de Gutenberg !), héritées des manuscrits médiévaux. Plusieurs sous-styles : Textura, Fraktur, Rotunda.

On les aime pour : un cachet historique — bandeaux de journaux, brasseries, diplômes, métal.

Textura

Marier deux polices

Les Halles Une serif de caractère pour le titre, une sans neutre pour le texte courant.
  • Contraste, pas conflit — une serif + une sans qui se complètent.
  • Limitez-vous — deux familles suffisent presque toujours.
  • Hiérarchie — jouez taille, graisse et espace avant d'empiler des polices.

Lisibilité & accessibilité

Vos livrables doivent rester lisibles par tout le monde.

Contraste fort21:1
Contraste faible1,4:1

Viser ≥ 4,5:1 texte/fond (norme WCAG AA).

  • Corps assez grand — un texte trop petit fatigue et exclut des lecteurs.
  • Grande hauteur d'x — plus « ouvert » = plus lisible en petit.
  • Pas de tout-capitales en bloc — on lit la silhouette des mots.
  • Interligne aéré (~1,5×) et longueur de ligne raisonnable.
  • Jamais la couleur seule pour une info — pensez daltonisme.

Licences & droits d'usage

Une police est une œuvre protégée : on n'achète pas la police, mais le droit de s'en servir.

  • Libres / open source — licence SIL OFL : Google Fonts, usage commercial inclus (Inter, EB Garamond…).
  • Système — livrées avec votre OS (Arial, Times, SF…) : utilisables sans surcoût.
  • Commerciales — achetées chez une fonderie (Monotype…), par poste ou par usage.
  • Sur abonnement — bibliothèques cloud (Adobe Fonts…) : tant que l'abonnement court.

Réflexe agence : « gratuit pour usage perso » ≠ usage commercial. Avant de livrer un logo ou une charte, vérifiez la licence — et que le client a le droit de l'utiliser.

03

Trois terrains
de jeu

Print · Bâtiment · Web

Le print

Le territoire historique : haute résolution, lecture longue, objet qu'on tient en main. Trois réglages qui font tout :

Une ligne trop large fatigue l'œil, qui peine à retrouver le début de la ligne suivante et décroche.

45–75 signes
par ligne :
le confort.

Longueur de ligne — ni trop large, ni trop étroit.
Le Titre Le corps de texte, calme et régulier, porte l'essentiel du propos. Légende — 8 pt
Hiérarchie — titre, corps, légende guident l'œil.

…et l'on évite la ligne
solitaire en haut de colonne,
appelée veuve.

Le détail — pas de ligne ni de mot esseulés.

On y mesure en points (1 pt ≈ 0,35 mm) — et le papier (texture, blancheur) fait partie de la composition.

Les bâtiments

La lettre devient matière, volume et échelle.

  • Lecture à distance — formes simples, fortes approches, grande échelle.
  • Matière & relief — lettres découpées, métal, néon, ombres portées.
  • Signalétique — un vrai projet typo : Frutiger fut commandée en 1968 pour l'aéroport de Roissy (elle s'appelait d'abord « Roissy ») avant de devenir un standard mondial.
Le bâtiment du Bauhaus à Dessau de nuit, avec le lettrage vertical BAUHAUS sur la façade
Bauhaus, Dessau (1926) — le lettrage fait corps avec l'architecture

Le web

Support vivant : taille d'écran inconnue, lumière émise, on scrolle plus qu'on ne lit.

  • Responsive — le texte se recompose selon l'écran. On raisonne en relatif (em, rem), pas en mm.
  • Webfonts — la police se télécharge : elle a un poids et un coût de performance.
  • Polices variables — un seul fichier, toutes les graisses : léger et fluide.
  • Lisibilité écran — sans-serif & grande hauteur d'x rendent mieux en petit.
  • Accessibilité — contraste suffisant, taille minimale, jamais de texte en image.
  • Police de secours — toujours prévoir un repli si la principale échoue.

Devinez
la police

Les Architectures
Quelle police ?
Times New Roman 1932, commandée par le journal The Times de Londres. Pensée pour l'économie : colonnes étroites, moins d'encre, lisibilité. Devenue le réglage par défaut de tout l'écrit du XXᵉ.
Les Architectures
Quelle police ?
Arial 1982 : un sosie d'Helvetica fabriqué pour ne pas payer la licence, puis livré gratuitement avec Windows. Les puristes la méprisent comme « la copie ». Vous l'avez sûrement sous les yeux dix fois par jour.
Les Architectures
Quelle police ?
Comic Sans MS 1994, inspirée des bulles de BD pour un assistant Microsoft (un chien !). La police la plus détestée au monde — un mouvement « Ban Comic Sans » existe. Ironie : la British Dyslexia Association la recommande pour les lecteurs dyslexiques (même si la science ne tranche pas).
Les Architectures
Quelle police ?
Courier New Monospace : chaque lettre occupe la même largeur, héritage de la machine à écrire. Toujours imposée pour les scénarios de cinéma — 1 page en Courier 12 pt ≈ 1 minute à l'écran.
Les Architectures
Quelle police ?
Futura 1927, géométrique née dans l'esprit du Bauhaus (cercles & lignes pures). Première police sur la Lune : gravée sur la plaque d'Apollo 11 en 1969.
Les Architectures
Quelle police ?
San Francisco (SF) La police système d'Apple depuis 2015 (avant : Helvetica Neue). Dessinée pour l'écran, elle change subtilement de forme selon la taille d'affichage.
Les Architectures
Quelle police ?
Papyrus Dessinée en 1982 en six mois par un jeune de 23 ans. Choisie pour le logo du film Avatar — d'où le sketch culte du Saturday Night Live où Ryan Gosling en perd le sommeil.
Les Architectures
Quelle police ?
Marianne La police officielle de l'État français depuis 2020. Réservée à l'État : son usage est interdit partout ailleurs. On la lit sur les sites en .gouv.fr et, peu à peu, sur tous les documents publics.
Les Architectures
Quelle police ?
Voltaire Une linéale humaniste, ouverte et chaleureuse — comme nous !
04

À retenir

Cinq principes universels

  1. Lisibilité d'abord — la forme sert le message, pas l'inverse.
  2. Le contexte commande — print, façade et écran n'appellent pas les mêmes choix.
  3. Le blanc est un matériau — interligne, marges, approche font 80 % du résultat.
  4. Hiérarchie > décoration — guidez l'œil par la taille et l'espace.
  5. Restez sobre — deux familles bien réglées valent mieux que dix.

Merci.