Design system
Typographie
IBM Plex Sans pour le texte et les titres, DM Mono pour les étiquettes et l'interface ; Poppins et Caveat Brush pour les planches.
IBM Plex Sans · Bold 700
Rendre lisible ce qui relie
Light 300 : le texte courant, pour lire longtemps sans fatigue. Medium 500 pour le gras et les intertitres.
DM Mono · Regular 400
Entre-temps · 8 min de lecture
Capitales espacées pour les étiquettes, les dates, les menus et les filtres.
Deux familles sur le site, servies par le site lui-même (aucun appel à un service tiers), et deux autres pour les planches et infographies.
Familles
| Famille | Rôle | Graisses |
|---|---|---|
| IBM Plex Sans | Texte courant, intertitres, titres | Light 300 (texte), Medium 500 (intertitres, gras), Bold 700 (titres de page) |
| DM Mono | Étiquettes, surtitres, dates, menus, filtres | Regular 400, en capitales, approche .06em |
| Poppins | Planches et infographies (Qui est « je » ?, séries LinkedIn) | 300 à 700 |
| Caveat Brush | Devises écrites à la main, sur les planches | 400 |
Échelle
| Jeton | Valeur | Usage |
|---|---|---|
--t-label | 12px | Étiquettes, surtitres, menus (DM Mono) |
--t-meta | 14px | Métadonnées, légendes |
| corps | 16px, interligne 1,65 | Texte courant |
--t-intro | clamp(21px, 2.1vw, 28px) | Chapô, entrées du menu mobile |
| h3 | 1.12rem | Intertitres de niveau 3 |
| h2 | 1.45rem | Intertitres |
| h1 | clamp(1.9rem, 4.5vw, 2.8rem) | Titre de page |
--t-titre | clamp(30px, 3vw, 40px) | Titres de section |
--t-une | clamp(42px, 6.4vw, 96px) | Grands titres (pied de page) |
Titres en interlignage serré (1,12) et approche légèrement négative (-0,025em).
À faire : une colonne de lecture de 42rem au plus (65 à 75 signes par ligne) ; le surlignage jaune pour une phrase clé.
À éviter : le gras pour des paragraphes entiers, l’italique pour mettre en avant (réservé aux titres d’œuvres et aux mots étrangers), plus de deux graisses dans un même bloc.