Typographie web 101 : pourquoi le texte fait 90 % du design
Réduis presque n'importe quel site à l'essentiel et il ne reste que du texte. Titres, paragraphes, labels, boutons — le web, c'est massivement de la lecture. D'où le vieil adage des designers : le design web, c'est 90 % de typographie. Soigne le texte et une page paraît professionnelle avant même la première image ; rate-le et aucun dégradé ne la sauvera.
Ce qui intimide, c'est que la typographie ressemble à une affaire de goût. Ce n'en est pas une — c'est surtout un petit ensemble de règles qui s'apprennent. Les voici.
Comment associer des polices sans faire n'importe quoi ?
L'association de polices échoue de deux façons opposées : des polices trop proches (deux sans-serif géométriques qu'on prend pour un bug de rendu) ou trop bruyantes ensemble (un slab display à côté d'une script à fioritures). Les règles qui évitent les deux :
- Associe par contraste, pas par ressemblance. La combinaison classique : serif pour les titres + sans-serif pour le texte (ou l'inverse). Les rôles se distinguent au premier coup d'œil — c'est tout l'intérêt d'avoir deux polices.
- Deux familles maximum. Une pour les titres, une pour le texte. Besoin d'une troisième voix ? Utilise une variation de graisse ou de style de ce que tu as déjà. Chaque famille en plus coûte du temps de chargement et de la cohérence.
- Fais correspondre les hauteurs d'x. La hauteur d'x — la hauteur d'un "x" minuscule — détermine la taille perçue d'une police. Associe une sans à grande hauteur d'x avec une serif à petite hauteur d'x et l'une paraîtra toujours fausse à côté de l'autre. Affiche les deux à 16px côte à côte ; si l'une écrase visuellement l'autre, continue de chercher.
- Les superfamilles sont le code de triche. Les familles conçues en set — une serif, une sans et une mono taillées sur le même squelette (Source Serif/Sans/Code, IBM Plex) — s'accordent parfaitement par construction.
Des duos classiques qui marchent toujours
| Titres | Texte | Personnalité |
|---|---|---|
| Playfair Display (serif) | Source Sans 3 | Éditorial, élégant |
| Montserrat (sans géométrique) | Merriweather (serif) | Moderne, chaleureux |
| IBM Plex Sans | IBM Plex Serif | Superfamille technique |
| Space Grotesk | Inter | Startup, UI produit |
| Lora (serif) | Open Sans | Doux, parfait pour un blog |
Plutôt que d'installer quinze polices pour comparer, prévisualise les combinaisons côte à côte dans un outil de Font Pairing — de vrais titres sur du vrai texte, échangés instantanément.
Échelles typographiques : arrête de choisir tes tailles au hasard
Si ton CSS contient font-size: 17px, 19px, 22px et 27px, les tailles ont été choisies au feeling. Une échelle typographique remplace le feeling par un ratio : pars d'une taille de base (généralement 16px) et multiplie par une constante.
| Ratio | Nom | Rendu |
|---|---|---|
| 1.2 | Tierce mineure | Calme, dense — parfait pour apps et dashboards |
| 1.25 | Tierce majeure | Le défaut équilibré pour la plupart des sites |
| 1.333 | Quarte juste | Affirmé — marketing et éditorial |
| 1.5 | Quinte juste | Spectaculaire — landing pages, gros heros |
Avec un ratio de 1.25 et une base de 16px : 16 → 20 → 25 → 31.25 → 39.06. Cinq tailles, toutes liées mathématiquement, toutes visiblement distinctes. Génère la gamme complète — avec aperçu et sortie CSS — grâce à un Générateur d'échelle typographique.
Du texte fluide avec clamp()
Les tailles fixes en pixels imposent un compromis entre mobile et desktop. clamp(min, préférée, max) y met fin : la valeur du milieu suit le viewport, bornée entre deux limites saines.
:root {
/* base : 16px sur mobile → 18px sur desktop */
--step-0: clamp(1rem, 0.93rem + 0.33vw, 1.125rem);
--step-1: clamp(1.25rem, 1.14rem + 0.54vw, 1.45rem);
--step-2: clamp(1.56rem, 1.39rem + 0.85vw, 1.88rem);
--step-3: clamp(1.95rem, 1.69rem + 1.29vw, 2.44rem);
--step-4: clamp(2.44rem, 2.05rem + 1.93vw, 3.16rem);
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
body { font-size: var(--step-0); }
Le titre qui remplissait un écran desktop ne se retrouve plus sur cinq lignes sur téléphone — sans la moindre media query.
Line-height et longueur de ligne : la moitié oubliée
Deux réglages font plus pour la lisibilité que n'importe quel choix de police :
- Line-height : le texte courant demande environ 1.5–1.6 ; les titres, moins (1.1–1.3), car un grand texte avec un interlignage haut se désagrège visuellement. Utilise des valeurs sans unité (
line-height: 1.5), pas des pixels. - Longueur de ligne : la zone confortable est de 45 à 75 caractères par ligne, avec ~66 comme point idéal. Au-delà, l'œil se perd en revenant au bord gauche. Une seule propriété suffit :
.prose {
max-width: 65ch; /* ~65 caractères à la taille de police courante */
line-height: 1.6;
}
L'unité ch suit ta police : la contrainte survit gratuitement aux changements de taille.
Variable fonts : un seul fichier, toutes les graisses
Traditionnellement, utiliser quatre graisses d'une police signifiait charger quatre fichiers. Une variable font embarque tout l'espace de design — chaque graisse, et souvent la chasse et l'inclinaison — dans un seul fichier, et laisse CSS interpoler n'importe où sur chaque axe :
@font-face {
font-family: "Inter Var";
src: url("/fonts/InterVariable.woff2") format("woff2");
font-weight: 100 900; /* toute la plage, un seul fichier */
font-display: swap;
}
.hero-title {
font-variation-settings: "wght" 640, "opsz" 32;
}
Pourquoi ça compte :
- La performance. Un fichier WOFF2 de ~100–300 Ko remplace en général 4 à 6 fichiers statiques — moins de requêtes, moins de transfert total, une seule entrée de cache.
- La précision. La graisse n'est plus limitée à 400/700. Si 600 est trop lourd et 500 trop léger, prends 560. Animer la graisse au survol (
transition: font-variation-settings) est un effet subtil et classe qu'aucune police statique ne sait faire. - Au-delà de la graisse. Beaucoup de variable fonts exposent la taille optique (
opsz), la chasse (wdth) ou des axes personnalisés. La taille optique, en particulier, améliore discrètement le rendu : les lettres optimisées pour le petit texte diffèrent des coupes display.
Explore les axes d'une police en direct — glisse les curseurs, regarde les glyphes réagir, copie le font-variation-settings — avec un Testeur de variable fonts.
Charger les polices sans le flash
Deux règles couvrent l'essentiel de la performance des polices web :
- Ne livre que du WOFF2. Supporté partout où ça compte, et compressé ~30 % mieux que le WOFF. Si ta source est un TTF ou un OTF venu d'une fonderie, convertis-le avec un Convertisseur de polices avant de déployer.
- Mets toujours
font-display: swap. Sans lui, certains navigateurs masquent le texte pendant le chargement (le fameux flash de texte invisible). Avecswap, l'utilisateur lit immédiatement la police de secours, et la police web prend le relais quand elle est prête.
Ajoute <link rel="preload" as="font" type="font/woff2" crossorigin> pour ta police de texte principale, et héberge-la toi-même plutôt que de la hotlinker — c'est plus rapide et plus simple côté RGPD.
Une dernière vérification : le contraste
Typographie et accessibilité se rejoignent sur le contraste : les graisses fines (200–300) en petite taille perdent effectivement du contraste, parce qu'il y a moins d'encre à l'écran, même quand la couleur passe techniquement. Si tu utilises des graisses légères, augmente la taille ou le contraste de couleur pour compenser — et vérifie tes paires texte/fond dans un Vérificateur de contraste WCAG avant de livrer.
Assemble le tout en cinq minutes
Un système typographique qui fonctionne, c'est quatre décisions : un duo de polices, une échelle, une longueur de ligne, une stratégie de chargement. Commence par la première — ouvre l'outil de Font Pairing, trouve un duo titres/texte qui te plaît, puis construis ta gamme dans le Générateur d'échelle typographique. Gratuit, dans le navigateur, sans compte.