Pédagogie · Cours

Composition - Typographie.

La typographie n'est pas une sélection de polices : c'est une discipline harmonique, avec son anatomie, ses classifications, ses échelles empruntées à la musique, ses mesures et ses règles de mise en bloc.

La lettre

Les quatre lignes

Toute typographie repose sur quatre lignes invisibles. La ligne de pied (baseline) est la ligne sur laquelle reposent les lettres. La hauteur d'x (x-height) est la hauteur des minuscules sans hampe ni jambage ; la hauteur de capitale mesure les majuscules ; la ligne des hampes (ascendantes) et celle des jambages (descendantes) bornent les extensions.

Les lignes sont mesurées en direct sur l'encre de la police. Changez de police, tapez votre mot.

Votre mot

Les familles

AaTypographieABCDEFGHIJ abcdefghij 0123456789

Classiques

Modernes

Calligraphiques

Ajout ATypI

La classification Vox-ATypI

Neuf classes définies par Maximilien Vox en 1954, en trois groupes : les classiques, les modernes, les calligraphiques. Adoptée par l'ATypI en 1962, qui y a ajouté les Fractures et les Non latines (puis les Gaéliques en 2010) ; en France, norme NF Q60-007 (1977).

L'ATypI l'a officiellement désadoptée le 27 avril 2021 (trop centrée sur l'écriture latine), sans remplaçant qui fasse consensus : elle reste la référence enseignée pour les écritures latines.

Didones

XVIIIᵉ-XIXᵉ, contraste extrême. Composé en Bodoni Moda.

L'échelle et la hiérarchie

Aa54 pxH1

Aa36 pxH2

Aa24 pxH3 · chapeau

Aa16 pxtexte

Aa10,7 pxlégende

Les intervalles

Bringhurst (The Elements of Typographic Style, 1992) : « Une échelle modulaire, comme une échelle musicale, est un ensemble pré-arrangé de proportions harmonieuses. » Le ratio définit le caractère : faible (1,125 à 1,2), hiérarchie subtile ; élevé (1,5 à 1,618), sauts marqués.

Les ratios traditionnels sont empruntés à la musique. Choisissez un intervalle : vous l'entendez, et l'échelle se compose en vrai texte sur une base de 16 px.

Quinte · 3:2 · 1,500

Le bloc de texte

La typographie est l'architecture invisible du texte : elle règle la taille, l'espace et le rythme avant même que le sens n'arrive au lecteur. Une page bien composée ne se remarque pas, elle se lit. Chaque choix de corps, d'interligne et de mesure déplace la couleur grise du paragraphe, la vitesse de l'œil et la fatigue de la lecture. C'est une discipline d'écoute autant que de dessin : on règle le texte comme on accorde un instrument, par petits intervalles, jusqu'à ce que rien ne dépasse.

Le paragraphe

La lisibilité combine des paramètres dont aucun ne suffit seul : taille (16 px web, 10-12 pt print), mesure 60-70 caractères par ligne, interlignage 1,4-1,5, contraste WCAG 4,5:1 minimum (7:1 idéal). Réglez le paragraphe : chaque valeur se juge selon le cours.

Plus la ligne est longue, plus l'interlignage doit être grand : 30-50 caractères → 1,3-1,4 ; 50-65 → 1,4-1,5 ; 65-80 → 1,5-1,6. Serif ou sans : la recherche ne trouve pas de différence significative de lisibilité, le choix se fait par le registre.

Corps16 pxInterlignage1,20Mesure95Tracking0

Corps: 16 px16 px : le corps web du cours
Caractères / ligne: 95au-delà de 80, trop long (WCAG)
Interlignage: 16/19,2 · 1,20pour cette mesure : 1,5 à 1,6
Tracking: 00 sur le texte courant
Alignement: Gauchele standard du web et du technique
Contraste: 4,0:1sous le minimum de 4,5:1

Glossaire

Ligne de pied (baseline): La ligne sur laquelle reposent les lettres. L'interlignage se mesure d'une ligne de pied à la suivante.
Hauteur d'x (x-height): La hauteur des minuscules sans hampe ni jambage. Probablement le paramètre le plus déterminant de la perception d'une police : grande, elle donne robustesse et lisibilité à petite taille ; petite, élégance et raffinement.
Hauteur de capitale: La hauteur des majuscules.
Hampes et jambages: Les extensions des minuscules : les hampes (ascendantes) montent au-dessus de la hauteur d'x (b, d, l), les jambages (descendantes) descendent sous la ligne de pied (g, p, q).
Fût (stem): Le trait vertical porteur de la lettre.
Panse (bowl): La courbe enclose de la lettre, comme dans b, d ou R.
Contrepoinçon (counter): Le blanc intérieur de la lettre.
Ouverture (aperture): Le passage entre le blanc intérieur et l'extérieur, comme dans e ou c. Large, elle améliore la lisibilité à petite taille.
Traverse, bras: La traverse (cross-bar) est le trait horizontal qui traverse la lettre (e, A, H) ; le bras (arm), un trait libre à une extrémité, comme en haut du T.
Empattement, terminaison: L'empattement (serif) est le petit trait qui termine un fût ; la terminaison (terminal), l'extrémité d'un trait sans empattement, comme en haut du a.

Point: L'unité de corps : Didot 0,376 mm (vers 1783), pica 0,3514 mm, PostScript exactement 1/72 de pouce (0,3528 mm), le standard mondial. Le pica vaut 12 points ; le cicéro, 12 points Didot.
Em: Une unité relative, égale au corps du caractère en cours : celle des mesures qui s'adaptent au texte.
Interlignage (leading): Mesuré de ligne de pied à ligne de pied, noté « 12/14 » (texte 12 pt, interligne 14 pt). De 1,2 à 1,5 × le corps ; 1,4-1,5 sur le texte courant, plus grand quand la ligne s'allonge.
Tracking: L'espacement uniforme des lettres : 0 sur le texte courant, légèrement positif sur les capitales et les très petits corps, légèrement négatif sur les grands titres.
Kerning: L'ajustement de paires précises (AV, To) : automatique dans les bonnes polices, manuel seulement pour les titres et les logos.
Mesure: La longueur de ligne, le paramètre le plus déterminant du confort : 66 caractères selon Bringhurst, plage utile 45-75, maximum 80 (WCAG). En CSS : max-width: 65ch.
Justifié, aligné à gauche: Le justifié, standard des livres et journaux, demande plus de 50 caractères par ligne et une césure ; l'aligné à gauche (drapeau), standard du web et du technique, se lit mieux en colonnes étroites. Centré et aligné à droite : jamais en paragraphe.
Rivière: Un canal blanc vertical qui traverse un paragraphe justifié, né des espaces excessifs.
Césure: La coupure d'un mot en fin de ligne : au moins 2 caractères avant le tiret, au moins 3 après, jamais plus de 2 lignes consécutives coupées, jamais la dernière ligne d'un paragraphe.
Veuve, orpheline: La veuve est la dernière ligne d'un paragraphe seule en haut de colonne ; l'orpheline, la première ligne seule en bas. À proscrire : au moins 2 lignes ensemble.
Espace fine insécable: En typographie française, l'espace qui précède ; ! ? ; devant les deux-points, l'usage le plus répandu met une insécable normale.
Contraste WCAG: Le rapport de luminance entre le texte et le fond : 4,5:1 minimum pour le texte courant, 7:1 idéal, 3:1 pour les grands titres.

Des polices libres et gratuites

Où trouver des caractères qui ne coûtent rien et qui valent quelque chose. Un réflexe : gratuit n'est pas libre, vérifiez toujours la licence (OFL, usage commercial) avant de livrer.

Bibliothèques

Google Fonts la bibliothèque de référence - énorme, open source, servie partout.
Fontshare les familles gratuites de l'Indian Type Foundry - qualité de fonderie (Satoshi, General Sans…).
Velvetyne la fonderie libre française - radicale, expérimentale, précieuse.
Uncut.wtf curation pointue de caractères contemporains sous licence libre.
The League of Moveable Type la première fonderie open source - les classiques du web indépendant.
Open Foundry plateforme de curation open source, spécimens soignés.
Atipo Foundry familles élégantes en prix libre - payez ce que vous voulez.
Font Squirrel l'agrégateur historique - uniquement des licences commerciales vérifiées.
Collletttivo collectif italien open source, dessins pleins de caractère.
Bunny Fonts miroir de Google Fonts sans tracking - conforme RGPD, pratique en production.

Fonderies indépendantes

Packs gratuits, versions personnelles ou fontes d'essai : c'est là qu'on trouve une voix que personne d'autre n'utilise.

Ulysses Design Co un pack gratuit généreux pour découvrir la fonderie.
Pangram Pangram quasi tout le catalogue gratuit en usage personnel (Neue Montreal, Editorial New…).
Fontfabric des graisses gratuites de leurs familles phares (Nexa, Uni Sans…).
Lost Type Co-op le pionnier du prix libre, catalogue au caractère américain.
The Designers Foundry des freebies réguliers au milieu du catalogue payant.
Blaze Type fonderie lyonnaise, essais gratuits et beaux spécimens.
Omnibus-Type entièrement open source - c'est la fonderie d'Archivo, la typo de ce site.
Displaay fonderie pragoise, fontes d'essai gratuites sur tout le catalogue.
Tokotype fonderie indonésienne - les auteurs de Plus Jakarta Sans.

Anatomie des caractères

Toute typographie repose sur quatre lignes invisibles. La ligne de pied (baseline) est la ligne sur laquelle reposent les lettres. La hauteur d'x (x-height), hauteur des minuscules sans hampe ni jambage, est probablement le paramètre le plus déterminant de la perception d'une police : grande, elle donne robustesse et lisibilité à petite taille ; petite, élégance et raffinement. La hauteur de capitale mesure les majuscules ; la ligne des hampes (ascendantes) et celle des jambages (descendantes) bornent les extensions.

À l'intérieur du glyphe, les éléments structurels sont nommés : le fût (stem, trait vertical porteur), la panse (bowl, courbe enclose), le contrepoinçon (counter, blanc intérieur), l'ouverture (aperture - large, elle améliore la lisibilité à petite taille), la traverse (cross-bar), le bras (arm), l'empattement (serif) et la terminaison (terminal).

Classification des polices

La classification d'usage reste Vox-ATypI : neuf classes définies par Maximilien Vox en 1954 (Humanes, Garaldes, Réales, Didones, Mécanes ou slab, Linéales ou sans-serif, Incises, Scriptes, Manuaires), adoptées par l'ATypI en 1962, qui y a ajouté les Fractures (gothiques) et les Non latines, puis les Gaéliques en 2010 ; en France, norme NF Q60-007 (1977). Hors classification, on appelle Display les polices conçues pour les grandes tailles, qui sacrifient la lisibilité à l'expression. À noter : l'ATypI a officiellement désadopté ce système le 27 avril 2021 (trop centré sur l'écriture latine), sans qu'aucun remplaçant ne fasse encore consensus - il reste donc la référence enseignée pour les écritures latines.

Chaque classe porte un registre reconnaissable : document juridique → Old Style ou Transitional (Garamond, Caslon, Baskerville) ; scientifique → Transitional ou Humanist Sans ; mode et luxe → Didone (Bodoni, Didot) ; corporate moderne → néo-grotesque (Helvetica, Univers) ou Humanist Sans (Frutiger) ; tech / digital → Geometric Sans (Futura, Avenir) ou sans humaniste d'interface (Inter, Roboto) ; industriel → Slab (Rockwell, Clarendon) ; festif / personnel → Script ou Display.

Échelles modulaires - la musique des tailles

Bringhurst (The Elements of Typographic Style, 1992) : « Une échelle modulaire, comme une échelle musicale, est un ensemble pré-arrangé de proportions harmonieuses. » Une échelle modulaire est une suite de tailles construite sur un ratio constant - le ratio définit le caractère harmonique : faible (1.125-1.2), hiérarchie subtile ; élevé (1.5-1.618), sauts marqués.

Les ratios traditionnels sont empruntés à la musique : seconde majeure 9:8 (1.125), tierce mineure 6:5 (1.2), tierce majeure 5:4 (1.25), quarte 4:3 (1.333), quinte 3:2 (1.5), nombre d'or (1.618), octave 2:1. Spencer Mortensen a montré que l'échelle classique des typographes - 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72, encore proposée par défaut, à quelques tailles près, dans beaucoup de logiciels - correspond, à quelques arrondis près, à une gamme pentatonique tempérée : fondamentale 12 pt, octave de ratio 2 en cinq pas, soit un pas de ⁵√2 ≈ 1.149.

Choix du ratio selon le document : livre de prose 1.125-1.2 ; article éditorial 1.25-1.333 ; magazine grand format ou poster 1.5-1.618 ; documentation technique 1.2-1.333 ; interface à 5+ niveaux 1.125-1.2 ; interface simple φ ou octave ; slides 1.333-1.5 ; poster minimal 2.0+. Construire l'échelle : base (16 px web, 10-12 pt print), ratio, pas vers le haut (titres) et vers le bas (captions) - toutes les tailles restent en relation harmonique entre elles.

Mesures - points, ems, leading, tracking

Le point a plusieurs définitions historiques - Didot 0.376 mm (vers 1783), pica 0.3514 mm, PostScript exactement 1/72 de pouce (0.3528 mm), devenu le standard mondial. Le pica vaut 12 points ; le cicéro, 12 points Didot. L'em est relatif : il vaut la taille du caractère en cours - c'est l'unité des mesures qui s'adaptent au texte. La typographie française place une espace insécable avant les ponctuations doubles : une fine devant ; ! ?, une normale devant les deux-points dans l'usage le plus répandu.

Le leading (interlignage) se mesure de baseline à baseline, noté « 12/14 » (texte 12 pt, interligne 14 pt). Règle de base : 1.2 à 1.5 × la taille - 1.2 dense, 1.4 standard, 1.5 généreux (critère WCAG 1.4.8, niveau AAA). Modulations : plus la x-height ou la ligne est grande, plus le leading doit l'être ; les titres en grande taille descendent à 1.0-1.1. Le tracking (espacement uniforme) reste à 0 sur le body, légèrement positif sur les capitales (+50 à +100 millièmes d'em) et les très petits corps, légèrement négatif sur les grands titres. Le kerning ajuste des paires précises (AV, To) - automatique dans les bonnes polices, manuel seulement pour titres et logos.

Choisir un système d'unités et s'y tenir ; leading 1.4-1.5 sur le body ; tracking 0 sur le body, ajusté sur capitales et display ; kerning automatique activé ; espaces typographiques françaises respectées.

Hiérarchie typographique

Les niveaux standards : H1 (un seul par document), H2, H3, body, lead, caption, small. La hiérarchie ne se fait pas que par la taille - huit outils : taille (sur l'échelle modulaire), graisse (un Bold modeste peut dominer), casse (majuscules pour titres courts seulement), style (italique pour l'emphase, jamais en bloc long), couleur (avec parcimonie), espacement (une grande marge haute = rupture forte), tracking, famille.

Quatre règles d'or : trois niveaux suffisent dans la majorité des cas (H1, H2, body) ; la différence entre niveaux doit être visible immédiatement ; la cohérence prime (tous les H2 identiques) ; le blanc est un outil de hiérarchie autant que la taille.

Mise en bloc - alignement, césure, mesure

Justifié : standard des livres et journaux ; demande plus de 50 caractères par ligne. Aligné à gauche (drapeau) : standard du web et des documents techniques, plus lisible en colonnes étroites. Aligné à droite et centré : usages ponctuels (légendes, titres courts), jamais en paragraphes. La justification expose aux rivières (canaux blancs verticaux) et aux espaces excessifs - remède : la césure (hyphenation) avec règles strictes : ≥ 2 caractères avant le tiret, ≥ 3 après, jamais plus de 2 lignes consécutives coupées, jamais la dernière ligne d'un paragraphe.

Veuves (dernière ligne seule en haut de colonne) et orphelines (première ligne seule en bas) sont à proscrire - minimum 2 lignes ensemble. La mesure (longueur de ligne) est le paramètre le plus déterminant du confort : le point idéal académiquement reconnu est 66 caractères par ligne (Bringhurst, qui donne une plage utile de 45 à 75) ; Baymard recommande 50 à 75 caractères, et le critère WCAG 1.4.8 fixe un maximum de 80. En CSS : max-width: 65ch.

Justifié par défaut pour livres et documents formels ; aligné à gauche pour le web et le technique ; césure activée systématiquement en justifié ; cible 60-70 caractères par ligne ; anti-veuves/orphelines configuré.

Pairing - combiner deux polices

Principe central : contraster sans entrer en conflit. Deux polices trop semblables (deux sans géométriques de même époque) produisent une différence perceptible mais non voulue - effet amateur ; deux polices trop différentes se battent pour l'attention. Trois stratégies éprouvées : Serif + Sans (la plus versatile - Playfair + Source Sans, Lora + Inter, Garamond + Frutiger) ; la superfamille (la plus sûre - IBM Plex, Source, Noto, PT, Roboto : métriques identiques par construction) ; Display + Text (la plus expressive - Abril Fatface + Lato, Bebas + Source Sans).

Règles techniques : comparer les x-heights (très différentes = déséquilibre) ; comparer les proportions (condensé contre étendu cohabite mal) ; vérifier le registre commun ; trois familles maximum (body, display, éventuellement mono) ; tester en contexte réel, pas en specimen.

Deux polices maximum par défaut (display + body) ; superfamille comme choix sûr par défaut ; vérification des métriques (rapport de x-heights, proportions) ; registre typographique cohérent avec le registre chromatique du document.

Lisibilité et confort de lecture

La lisibilité combine des paramètres dont aucun ne suffit seul : taille (16 px web, 10-12 pt print ; sous 14 px / 8 pt la lisibilité chute), mesure 60-70 CPL, leading 1.4-1.5, contraste WCAG 4.5:1 minimum en body (7:1 idéal, 3:1 pour les grands titres), couleur (texte foncé sur fond clair pour la lecture longue ; le mode sombre exige plus de contraste), police dessinée pour le body (aperture suffisante).

La controverse serif vs sans-serif est close : la recherche contemporaine (2010-2025) ne trouve pas de différence significative de lisibilité à police bien dessinée et taille adéquate. L'affirmation « les serifs guident l'œil » n'est pas validée empiriquement. Le choix se fait par le registre et le contexte - print et longue lecture penchent serif, écran et texte court penchent sans, les lecteurs dyslexiques préfèrent souvent un sans simple. Règle robuste liant mesure et interligne : plus la ligne est longue, plus le leading doit être grand (30-50 CPL → 1.3-1.4 ; 50-65 → 1.4-1.5 ; 65-80 → 1.5-1.6).

Body 16 px / 11 pt ; leading 1.5 ajusté selon la mesure ; contraste ≥ 4.5:1, viser 7:1 ; 60-70 CPL ; jamais de body en italique, en majuscules ou en display sur de longs blocs ; texte agrandissable à 200 % ; pas de texte en image (WCAG).

Synthèse - dix règles

1. Choisir une échelle modulaire dès le départ. 2. Deux polices maximum (ou une superfamille). 3. Body 16 px / 11 pt, leading 1.5. 4. 60-70 caractères par ligne. 5. Contraste WCAG 4.5:1 minimum. 6. Césure activée en justifié. 7. Anti-veuves/orphelines. 8. Trois niveaux de hiérarchie sauf nécessité. 9. Cohérence de tous les H2. 10. Tester en contexte réel.

Séquence de décision : type de document → ratio modulaire ; registre → classe typographique ; support → taille de base et mesure ; profondeur hiérarchique → nombre de pas ; pairing → stratégie ; vérifications finales (contraste, accessibilité, cohérence). La typographie articule directement la grille (les colonnes bornent la mesure) et la perception (Gestalt, contraste - pilier 3).

Sources : Bringhurst, The Elements of Typographic Style (4e éd. 2012) · Lupton, Thinking with Type (3e éd. 2024) · Ruder, Typographie (1967) · Vox 1954 / ATypI 1962 · Tim Brown, modularscale.com · Mortensen, The Typographic Scale (2017) · Baymard Institute (2022) · WCAG 2.1 · Smashing Magazine · Adobe Design

Dix questions sur l'anatomie, les familles, les échelles, la hiérarchie et le bloc de texte.