Typographie web : polices, association et lisibilité
La typographie est la plus grande partie de la plupart des interfaces — presque tout ce qu’un produit dit, il le dit en caractères — et l’artisanat se divise en deux moitiés : bien choisir et combiner les polices, et les composer pour qu’elles se lisent sans effort. Les mathématiques du dimensionnement vivent dans notre guide de l’échelle typographique ; ce hub est l’autre moitié — l’artisanat. Le chemin le plus rapide, c’est de voir une association classique dans un vrai texte.
Choisir, c’est un casting
Le choix d’une police est une décision de casting : la police prononcera chaque ligne que le produit dira, dans un registre que les lecteurs perçoivent avant même de lire un mot. Les guides ici couvrent les choix — associer des polices qui contrastent sans jurer, la question du serif telle qu’elle se pose réellement sur les écrans modernes, des polices d’affichage qui ne sacrifient pas la lisibilité, et ce que les formes des lettres signalent d’une marque. La métaphore du casting fait un vrai travail : les lecteurs enregistrent le ton d’une police avant de lire un mot du contenu, comme une voix s’enregistre avant la phrase, et aucune réécriture ne défait cette première impression.
Lire est une mécanique
L’autre moitié est mécanique et mesurable : une longueur de ligne qui garde fiable le trajet de retour de l’œil, la différence entre la lisibilité de décodage — puis-je le déchiffrer ? — et la lisibilité de lecture — est-ce que ça coule ?, la typographie dans les formulaires, là où les erreurs coûtent le plus, et les petits ajustements optiques dont le texte a besoin aux petites tailles. Rien de tout cela n’est affaire de goût — l’essentiel a été étudié pendant un siècle, et les guides rapportent ce qui tient. Si les chiffres tiennent, c’est pour une raison physiologique plutôt qu’esthétique : la lecture se fait par sauts et par balayages de retour, et presque chaque mesure de ces guides existe pour que ces sauts atterrissent là où l’œil l’attend.
La couche pratique
Entre l’artisanat et la théorie se trouve la couche opérationnelle que chaque projet rencontre : quelles Google Fonts tiennent vraiment la route, quand une pile de polices système vaut mieux que de charger quoi que ce soit, comment les polices arrivent sur la page sans la bloquer, et ce que changent les polices variables. Concret, actuel, et couvert ici — et La checklist de la typographie web condense tout le hub en un seul passage avant la mise en production.
Où vit la moitié consacrée au dimensionnement
Ce hub s’arrête délibérément là où commence la mesure. Les mathématiques de la taille — ratios d’échelle, hiérarchies de titres, combien de tailles un système nécessite — appartiennent au guide de l’échelle typographique, et la façon dont ces tailles se comportent entre un téléphone et un ordinateur de bureau est traitée dans la typographie fluide. La distinction compte en pratique : une typographie qui se lit mal échoue généralement d’un seul côté, et savoir si vous déboguez un problème de casting ou un problème de dimensionnement épargne du travail à refaire. Scale Composer réunit les deux moitiés au même endroit — un ensemble organisé de familles pour les décisions d’artisanat, piloté par la même échelle qui dimensionne la typographie, l’espacement et la grille — de sorte qu’une association choisie ici arrive déjà dimensionnée par le système.
Guides de ce hub
- Bases de la performance de chargement des polices
La performance de chargement des polices repose sur trois leviers : moins de fichiers de police, des fichiers plus petits (WOFF2) et font-display: swap — et pourquoi un système typographique épuré l'emporte le plus souvent.
- Choisir une police d'affichage sans ruiner la lisibilité
Les polices d'affichage sont dessinées pour les grandes tailles — fort contraste, espacement serré, personnalité. Où elles se placent sur l'échelle typographique, et pourquoi elles échouent en texte courant.
- Formes des lettres et voix de marque : ce qu'une police signale
La personnalité d'une police est un registre, pas un message : ce que signalent les polices géométriques, humanistes, grotesques et à empattements — et la mécanique des formes de lettres qui la produit.
- La checklist de typographie web
Une checklist de typographie web : 20 vérifications en une ligne — échelle, confort de lecture, polices, détails, livraison — chacune avec le chiffre concret à vérifier.
- Les meilleures polices Google pour l'interface en 2026
Les meilleures polices Google pour l'interface satisfont cinq critères — lisibilité en petite taille, vraie plage de graisses, hauteur d'x pour l'écran, couverture, maintenance — une douzaine de familles.
- Les règles d'association de polices qui fonctionnent vraiment
Une association de polices qui fonctionne repose sur un seul principe : contraster les classes, harmoniser les proportions. Pourquoi des polices quasi identiques échouent, et quelles associations classiques tiennent la route.
- Lisibilité vs confort de lecture : la différence
Lisibilité vs confort de lecture : la lisibilité demande si les caractères se déchiffrent, le confort de lecture si la lecture soutenue est fluide. La différence oriente la correction.
- Longueur de ligne : la règle des 45–75 caractères
La longueur de ligne optimale pour le texte courant est de 45 à 75 caractères par ligne, 66 étant le point idéal classique. Pourquoi les lignes trop longues épuisent l'œil, et la correction CSS en une ligne.
- Piles de polices système : quand ne pas charger une police
Une pile de polices système affiche la police native de chaque plateforme : zéro requête de police, zéro décalage de mise en page dû aux polices. Ce que vous gagnez, ce que vous perdez, et quand l'utiliser.
- Que sont les polices variables ?
Les polices variables réunissent une plage de graisse continue dans un seul fichier. Comment fonctionnent les axes, quand un fichier vaut mieux que quatre coupes statiques, et pourquoi font-weight: 457 fonctionne.
- Serif ou sans serif pour le texte courant à l'écran
Serif ou sans serif pour le texte courant : pourquoi la vieille règle des écrans a expiré, ce que la recherche montre vraiment, et pourquoi la taille et l'interligne comptent plus que le choix.
- Tailles optiques : pourquoi les petits textes ont besoin de formes différentes
Typographie et tailles optiques : pourquoi un seul tracé ne peut pas servir à la fois 12px et 72px, ce qu'ajuste l'axe opsz, et comment compenser quand une police ne le porte pas.
- Typographie des formulaires et champs de saisie
Règles de typographie pour les formulaires, avec leurs raisons : champs à 16px, étiquettes au-dessus des champs, planchers pour le texte d'aide, monospace pour les codes — réglée pour la vérification, là où les erreurs coûtent de l'argent.
Jugez les associations de vos propres yeux
Les conseils d’association ne deviennent une conviction que devant un vrai texte : échangez les polices du titre et du corps dans un spécimen interactif — le sélecteur de polices organisé de Scale Composer contient environ 50 familles qui survivent à un usage d’interface, et regarder une association fonctionner (ou jurer) dans un texte courant enseigne plus vite que n’importe quelle liste de règles.