# Association de polices : des règles simples qui marchent [Canonical HTML page](https://gradiently.design/fr/guide/font-pairing) Deux polices belles seules peuvent se battre quand elles partagent une page. Quelques règles et une poignée de paires éprouvées suppriment le tâtonnement. ## The short version - L’association de polices fonctionne le mieux quand chaque police a un rôle clair, en général une pour les titres et une pour le texte courant. - Une bonne paire contraste nettement d’une seule façon, comme empattements contre sans empattement ou gras contre léger, tout en partageant proportions et ambiance. - Utiliser une seule famille en plusieurs graisses, ou une superfamille avec des versions à empattements et sans empattement assorties, est la façon la plus sûre d’associer des polices. - Deux polices semblables mais pas identiques, comme deux sans empattement neutres, ressemblent en général à une erreur plutôt qu’à une association. - Deux polices suffisent à presque toute marque, tout post ou tout site ; une troisième doit avoir un rôle étroit, comme le code ou les étiquettes. Une bonne **association de polices** tient en trois règles : donner à chaque police un rôle distinct, les faire contraster nettement d’une seule façon, et les faire s’accorder sur tout le reste, comme les proportions et l’ambiance. Un titre à empattements sur un texte sans empattement en est l’exemple classique. Dans le doute, utilisez une seule famille en deux graisses : elle ne peut pas se heurter à elle-même. ## Partez des rôles, pas des polices Avant de choisir une police, décidez des tâches que doit accomplir la typographie. La plupart des designs en ont deux : des titres qui donnent le ton et un texte courant qui doit se lire confortablement. Certains y ajoutent un troisième petit rôle, comme les étiquettes ou le code. Choisissez d’abord la police du texte courant, car elle porte la plupart des mots, puis cherchez une police de titre qui la complète. | Rôle | Sa tâche | Ce qui compte le plus | | --- | --- | --- | | Titre | Donner le ton, être vu en premier | Caractère, graisse, allure en grand | | Texte courant | Se lire confortablement sur la durée | Lisibilité, texture régulière, un bon romain et un bon italique | | Étiquettes et petit texte | Se lire vite en petite taille | Formes claires, espacement ouvert, graisses robustes | | Code ou chiffres | S’aligner et rester sans ambiguïté | Chasse fixe ou chiffres tabulaires | Les rôles typographiques. Deux polices peuvent couvrir les quatre ; la police du texte courant gère souvent aussi les étiquettes. Un post éditorial avec un grand titre, une petite étiquette et une ligne de soutien dans un style plus discret Les rôles rendus visibles : un grand titre de caractère, une petite étiquette au-dessus et une ligne de soutien discrète dessous. Le contraste est d’abord dans la taille et le rôle avant d’être dans la police. ## Contrastez d’une seule façon, accordez-vous sur le reste Une association demande une différence visible, sinon la deuxième police ressemble à un accident. Mais si les deux diffèrent de toutes les façons à la fois, elles semblent venir de projets différents. Choisissez un seul axe de contraste et gardez le reste proche. - **Classification :** une police à empattements avec une sans empattement. Le contraste le plus fiable. [Empattements ou sans empattement](https://gradiently.design/fr/guide/serif-vs-sans-serif) explique ce que chacune apporte. - **Graisse :** une coupe display grasse avec une coupe de texte normale, même de la même famille. - **Largeur :** une police de titre condensée avec un texte courant de largeur normale. - **Accord des proportions :** des hauteurs d’x semblables, la hauteur des lettres minuscules, font que les deux se posent confortablement sur une même ligne. - **Accord d’ambiance :** un empattement doux et chaleureux s’associe à une sans empattement humaniste et chaleureuse ; une sans empattement géométrique et tranchante s’associe à un empattement net et très contrasté. ## Une famille ou deux L’association la plus simple est de ne pas associer : une seule famille en deux ou trois graisses. Elle est cohérente par conception et difficile à rater. Les superfamilles vont plus loin, avec un empattement et une sans empattement dessinés ensemble pour partager les proportions : vous obtenez le contraste de deux classifications avec l’harmonie d’un seul dessin. ### Une famille - Contraste par la graisse et la taille seulement - Harmonie garantie - Voix plus discrète, plus uniforme - Exemple : titres en Archivo Black, texte en Archivo ### Deux familles - Contraste par la classification ou le caractère - Demande des proportions et une ambiance assorties - Plus expressif, plus de personnalité - Exemple : titres en Fraunces, texte en Inter ## Des associations éprouvées avec Google Fonts Ces paires utilisent des polices gratuites sur [Google Fonts](https://fonts.google.com/) et très répandues, ce qui les rend faciles à tester. Prenez-les comme points de départ : composez vos propres mots avec elles et jugez le résultat. | Titre | Texte courant | Contraste | Impression | | --- | --- | --- | --- | | Playfair Display | Source Sans 3 | Empattement très contrasté avec une sans empattement nette | Éditorial, classique | | Fraunces | Inter | Empattement doux et de caractère avec une sans empattement neutre | Chaleureux, contemporain | | DM Serif Display | DM Sans | Empattement display avec sa sans empattement compagne | Convivial, soigné | | Instrument Serif | Inter | Empattement condensé avec une sans empattement neutre | Mode, éditorial | | IBM Plex Serif | IBM Plex Sans | L’empattement et la sans empattement d’une superfamille | Précis, technique | | Space Grotesk | Inter | Une grotesque originale avec une grotesque simple | Tech, produit | | Archivo Black | Archivo | La graisse au sein d’une même famille | Fort, direct | Sept associations Google Fonts. Chacune contraste nettement d’une seule façon et s’accorde en proportions. ```html ``` Charger et appliquer une association : Fraunces pour les titres, Inter pour le texte courant, chacune avec un repli raisonnable. Seules les graisses utilisées sont demandées. ## Les associations à éviter ### À éviter - Deux sans empattement neutres qui ne diffèrent que légèrement - Deux polices display qui se disputent l’attention - Une troisième et une quatrième police pour varier - Des polices aux hauteurs d’x très différentes sur une même ligne ### À la place - Une sans empattement en deux graisses, ou une à empattements avec elle - Une police display, une police de texte discrète - Deux polices, avec des graisses et des tailles pour varier - Des polices aux proportions semblables Les polices display sont les plus tentantes à surutiliser. Elles sont faites pour de grandes tailles et des lignes courtes ; un texte courant composé avec l’une d’elles fatigue vite l’œil. [Les polices display](https://gradiently.design/fr/guide/display-fonts) montrent où elles brillent. ## Comment tester une association de polices en dix minutes 1. **Utilisez de vrais mots** Composez un vrai titre et un vrai paragraphe tirés de votre travail, pas du faux texte. 2. **Utilisez de vraies tailles** Le titre en grand, le texte courant à la taille de lecture, sur le format que vous utiliserez vraiment. 3. **Regardez la texture** Prenez du recul. Le texte courant doit ressembler à un gris régulier ; le titre doit s’en détacher nettement. 4. **Essayez sur un téléphone** Beaucoup d’associations élégantes sur un moniteur s’effondrent à la taille d’un téléphone. [Les polices pour les réseaux sociaux](https://gradiently.design/fr/guide/fonts-for-social-media) montrent ce qui tient. 5. **Vérifiez les détails** Chiffres, ponctuation, italiques et chaque langue dans laquelle vous publiez. Une fois votre choix fait, notez-le avec les graisses et les tailles pour que chacun l’utilise de la même façon ; [les polices de marque](https://gradiently.design/fr/guide/brand-fonts) traitent des licences et des langues, et [les bases de la typographie](https://gradiently.design/fr/guide/typography-basics) de l’échelle. Dans Gradiently, les polices vivent dans votre kit de marque et s’appliquent à chaque nouveau design. ## FAQ ### Qu’est-ce que l’association de polices ? L’association de polices consiste à choisir deux polices, en général une pour les titres et une pour le texte courant, qui contrastent nettement d’une seule façon et s’accordent en proportions et en ambiance. ### Combien de polices utiliser ? Deux suffisent à presque tout. Une troisième doit avoir un rôle étroit, comme le code ou les petites étiquettes. ### Est-ce acceptable de n’utiliser qu’une seule police ? Oui. Une seule famille en deux ou trois graisses est l’association la plus sûre qui soit, et beaucoup de marques fortes font exactement cela. ### Quelle est une bonne association Google Fonts ? Des points de départ fiables : Fraunces avec Inter, Playfair Display avec Source Sans 3, et IBM Plex Serif avec IBM Plex Sans. ### Pourquoi mes deux polices vont-elles mal ensemble ? En général, elles sont trop semblables et la différence ressemble à une erreur, ou elles diffèrent de toutes les façons à la fois. Gardez un seul contraste net et accordez les proportions.