Associations de polices par secteur : pourquoi le classement par catégorie est un piège

Lisez quatre guides « polices pour X » dans quatre secteurs sans lien entre eux et le chevauchement est frappant. Une sans-serif géométrique pour tout ce qui touche à la technologie. Une serif transitionnelle pour tout ce qui veut paraître établi. Une serif display à fort contraste pour le luxe. Une sans-serif arrondie pour tout ce qui se veut convivial.

Cette convergence se produit parce que le secteur est une variable proxy. Ce que l'auteur entend par « fintech », c'est *doit signaler une confiance institutionnelle*, et ce qu'il entend par « agence créative », c'est *doit signaler la distinction plutôt que la lisibilité*. Ce sont là les véritables paramètres. Une fois que vous les nommez directement, l'étiquette du secteur n'apporte plus d'information — et elle cesse de vous orienter vers les trois mêmes polices que tous vos concurrents.

Le troisième axe est celui que les designers ignorent et que les ingénieurs découvrent. Une police magnifique dans un titre de 48px peut être inutilisable dans une étiquette de tableau de 12px, et la majeure partie du travail d'interface se situe dans les petites tailles. Testez à 12px avant de tomber amoureux à 48px.

Voici des choix par défaut défendables, avec le raisonnement exposé pour que vous puissiez le remettre en question, et une alternative différenciante pour chacun, car le choix par défaut est celui que vos concurrents utilisent déjà.

Chaque secteur ci-dessous présente un spécimen interactif plutôt qu'une capture d'écran : la police de titre, la police de corps et la police mono rendues à chaque étape d'une échelle réelle, dans le navigateur que vous utilisez. Une association présentée sous forme d'image ne vous dit rien sur son rendu en taille légende, et c'est précisément en taille légende que les associations échouent.

Pour une analyse plus approfondie du cas SaaS spécifiquement, incluant une police mono pour les données et le nombre de graisses réellement nécessaires, voir l'association de polices SaaS.

Un duo qui semble correct sur le papier mais échoue dans le navigateur reste un mauvais choix. Quatre décisions d'implémentation qui modifient ce que votre lecteur voit réellement.

La ligne sur les métriques de repli est la plus précieuse et la moins connue. Un saut de mise en page (layout shift) à chaque première visite est un signal de qualité négatif pour les utilisateurs et pour les métriques d'expérience page, et cela se corrige avec quelques descripteurs CSS plutôt qu'en changeant de police.

/* A metric-matched fallback: same footprint, no reflow on load. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body { font-family: "Inter", "Inter Fallback", sans-serif; }

Les pourcentages exacts varient selon la police et gagnent à être mesurés plutôt que copiés. Plusieurs frameworks les génèrent désormais automatiquement lorsque les polices sont déclarées via leur API de polices, ce qui est le moyen le plus simple de réussir l'implémentation.

Avant de valider un duo, effectuez cinq tests. Chacun détecte un type d'échec différent et tous sont plus rapides que de découvrir le problème lors du build.

1. 1

   Utilisez vos vrais titres, pas de texte de remplissage

   Le Lorem ipsum n'a pas de majuscules placées maladroitement, pas de chiffres, ni de mots composés longs. Le nom réel de votre produit et votre proposition de valeur auront les trois.

2. 2

   Saisissez Il1 O0 et un nombre long

   I majuscule, l minuscule, chiffre 1 ; O majuscule, chiffre 0. Puis un numéro de commande ou un montant monétaire réaliste. Si un couple est ambigu, la police est inadaptée à tout usage transactionnel.

3. 3

   Affichez le corps de texte en 14px et lisez un paragraphe complet

   Pas une ligne. Un paragraphe. Les problèmes de fatigue et de rythme n'apparaissent que sur la distance, et le corps de texte est l'endroit où les lecteurs passent leur temps.

4. 4

   Vérifiez les graisses dont vous disposez réellement

   Un duo dépendant d'une graisse non livrée par la webfont sera synthétisé silencieusement, et un gras synthétisé est visiblement moins qualitatif. Confirmez que chaque graisse de votre échelle existe en tant que coupe réelle.

5. 5

   Comparez le rendu avec deux concurrents

   C'est ainsi qu'on utilise correctement la vérification des conventions sectorielles : non pas pour trouver votre police, mais pour confirmer que vous n'avez pas adopté la leur.

Choisir le duo représente la moitié du travail. L'autre moitié consiste à l'enregistrer avec assez de précision pour qu'il soit reproduit fidèlement — par un nouvel ingénieur, ou par un agent de code écrivant des écrans que vous ne relirez jamais ligne par ligne.

Nous avons analysé 299 fichiers DESIGN.md publiés pour être lus par des agents d'IA. 83 % mentionnent la typographie, et 44 % ne contiennent aucune valeur de taille concrète. Ils nomment une police et s'arrêtent là, laissant chaque décision de taille, de graisse et d'approche au modèle — lequel résout la question selon ses données d'entraînement, soit de la même manière que tout le monde.

## Typography

Display: Playfair Display — headings 32px and above only.
UI and body: Inter (variable) — everything else.

Scale: 12 / 14 / 16 / 20 / 24 / 32 / 48.
Weights: 400 and 600 only. Never above 600.
Tracking: -0.02em at 32px+, 0 from 14-24px, +0.02em on 12px caps.

Never set Playfair below 32px.
Never use Playfair for UI labels, buttons or table content.
Numerals are always Inter, always tabular in tables.

Notez que la moitié de ces instructions sont des interdictions. Un duo enregistré comme deux simples noms de polices autorise tout mauvais usage ; ce sont les contraintes qui font tenir le duo. En savoir plus sur la rédaction de directives suivies par un agent.