# Laboratoire d'Association de Polices Web Prévisualisez une association Google Fonts (titre + corps) avec contrôles de graisse et d'interligne, et copiez un snippet CSS @import + variables prêt à coller. Registre curatoriel de 22 polices et 7 presets. > Page canonique: https://elysiatools.com/fr/tools/webfont-pairing-lab - **Catégorie:** Design - **Mots-clés:** association de polices, google fonts, typographie, polices web, police titre corps, css import, @import, combinaison de polices, fonte, webfont ## Présentation Prévisualisez une association **titre + corps** de Google Fonts côte à côte, réglez graisse et interligne, et copiez un snippet CSS prêt à coller. **Comment utiliser** 1. Choisissez une **police de titre** et une **police de corps** dans le registre curatoriel de 22 polices. 2. Réglez la **graisse du titre** et la **graisse du corps** ; chaque police s'aligne sur la graisse disponible la plus proche. 3. Ajustez la **taille du corps** (px) et l'**interligne** ; la prévisualisation se met à jour. 4. Personnalisez facultativement les textes d'**exemple titre** et **exemple corps**. 5. Copiez le CSS généré — il contient un seul `@import` chargeant uniquement les deux graisses choisies, plus des variables CSS et des règles pour `h1, h2, h3` et `body, p`. **Associations curatorielles** — le panneau latéral suggère 7 combinaisons éprouvées (éditorial, SaaS, actualité, tech, fait main, affiche, dev-tool). ## Entrées - **Police de titre** (select): The display / heading typeface. - **Graisse du titre** (number): Snaps to the nearest available weight for the chosen font. - **Police de corps** (select): The body / paragraph typeface. - **Graisse du corps** (number): Snaps to the nearest available weight for the chosen font. - **Taille du corps (px)** (number): Body paragraph font-size in pixels. - **Interligne** (number): Unitless line-height for body text. 1.4–1.7 is the readable range. - **Texte d'exemple du titre** (text): Optional custom heading text. Defaults to a neutral sample. - **Texte d'exemple du corps** (textarea): Optional custom body paragraph(s). Defaults to a neutral sample. ## Quand l'utiliser - Lors de la phase de conception d'une interface web pour tester l'harmonie visuelle entre un titre et un paragraphe. - Pour optimiser le temps de chargement en générant un import CSS ciblé contenant uniquement les graisses de polices nécessaires. - Pour créer rapidement une charte typographique cohérente à l'aide de presets éprouvés comme le style SaaS ou éditorial. ## Fonctionnement - Sélectionnez une police de titre et une police de corps parmi les 22 polices sélectionnées du registre. - Ajustez la graisse de chaque police, la taille du texte en pixels et l'interligne pour affiner la lisibilité. - Personnalisez éventuellement les textes d'exemple pour visualiser le rendu réel de vos futurs contenus. - Copiez le snippet CSS généré contenant l'import Google Fonts et les variables CSS prêtes à l'intégration. ## Cas d'usage - Création d'une feuille de style CSS de base pour un nouveau site web ou une landing page. - Test rapide de lisibilité et de contraste typographique entre des polices Serif et Sans-serif. - Export de variables CSS standardisées pour un système de design. ## Questions fréquentes ### Quelles polices sont disponibles dans cet outil ? L'outil intègre un registre sélectionné de 22 polices populaires de Google Fonts, incluant Inter, Roboto, Playfair Display et JetBrains Mono. ### Comment le code CSS généré est-il optimisé ? Le snippet génère un seul @import qui charge uniquement les graisses spécifiques que vous avez sélectionnées pour limiter le poids de la page. ### Puis-je utiliser mes propres textes pour la prévisualisation ? Oui, vous pouvez modifier les champs de texte d'exemple pour le titre et le corps afin de tester vos propres contenus. ### Qu'est-ce que les presets d'association ? Ce sont 7 combinaisons typographiques prédéfinies et adaptées à différents styles de projets comme le SaaS, l'éditorial ou la tech. ### Comment les graisses de police sont-elles gérées ? L'outil adapte automatiquement la valeur saisie à la graisse disponible la plus proche pour la police Google Fonts sélectionnée. ## Outils associés - [Extracteur de tokens de thème ECharts](https://elysiatools.com/fr/tools/echarts-theme-token-extractor): Extrait des design tokens — couleurs, nombres, tailles de police et chaînes — d'un JSON de thème ECharts et les exporte directement dans votre design system. Collez un objet thème (celui enregistré et passé à echarts.init(dom, themeName)) et l'outil parcourt chaque feuille, étiquetant chaque couleur (avec normalisation optionnelle nommé/rgb → hex), nombre d'espacement, taille de police et chaîne, puis émet des variables CSS propres, un thème.extend Tailwind, un tokens.json Style Dictionary ou des variables SCSS. Pont entre un thème de visualisation ECharts et les tokens de design Figma/CSS/Tailwind sans recopier chaque valeur à la main. - [Inspecteur de fichiers de police (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/fr/tools/font-file-inspector): Téléversez une police TTF, OTF, WOFF ou WOFF2 (WOFF2 décompressée automatiquement) et inspectez toutes les métadonnées : famille/sous-famille/designer/copyright/version, nombre de glyphes, unitsPerEm, graisse et largeur, angle italique, drapeaux de style et boîte englobante ; carte thermique de couverture par blocs Unicode ; aperçu SVG des glyphes (texte personnalisable, échantillonnage auto pour les fontes d'icônes) ; ligatures liga et fonctionnalités OpenType ; axes fvar et instances nommées des fontes variables. - [Constructeur d’axes et d’instances de polices variables et de CSS font-variation-settings](https://elysiatools.com/fr/tools/variable-font-axis-instance-and-css-font-variation-settings-builder): Téléversez une police variable (TTF/OTF/WOFF/WOFF2) pour inspecter ses axes fvar et instances nommées, prévisualiser l’interpolation en direct dans le navigateur et générer un CSS font-variation-settings prêt à coller, les propriétés de haut niveau équivalentes et un bloc @font-face variable. - [Calculateur clamp de typographie fluide CSS](https://elysiatools.com/fr/tools/css-fluid-typography-clamp-calc): Saisit les bornes de viewport et de taille pour obtenir clamp(), du CSS copiable et des donnees d apercu - [Testeur regex C# (.NET)](https://elysiatools.com/fr/tools/csharp-regex-tester): Testez en ligne les expressions régulières .NET/C# : groupes nommés ((?…)), options IgnoreCase/Multiline/Singleline, surlignage, tableau des groupes et code C# prêt à coller. - [Générateur de fichier de zone DNS](https://elysiatools.com/fr/tools/dns-zone-file-record-builder): Génère des enregistrements SOA / NS / A / AAAA / CNAME / MX / TXT (SPF/DKIM/DMARC) / SRV / CAA / TLSA / NAPTR / DS au format fichier de zone RFC 1035, avec un résumé lisible. Supporte TTL et plusieurs enregistrements. - [Tableau de bord statistiques texte avancé](https://elysiatools.com/fr/tools/enhanced-text-statistics-dashboard): Un tableau unifié : comptes mots/caractères/phrases, TTR (diversité lexicale), densité lexicale, syllabes estimées et temps séparés de lecture (238 mpm) et parole (150 mpm). - [Stéganographie d'image : incorporation et détection](https://elysiatools.com/fr/tools/image-steganography-embed-detect): Cache du texte dans les bits de poids faible d'un PNG, l'extrait en retour et lance la stéganalyse chi-carré de Westfeld–Pfitzmann avec courbe p glissante et aperçu du plan LSB. ## Exemples - [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format - [Exemples de Traitement d'Images Web Rust](https://elysiatools.com/fr/samples/web-image-processing-rust): Exemples de traitement d'images Web Rust incluant lecture/écriture, redimensionnement et conversion de format - [Exemples de Traitement d'Images Web TypeScript](https://elysiatools.com/fr/samples/web-image-processing-typescript): Exemples de traitement d'images Web TypeScript incluant lecture/sauvegarde, redimensionnement et conversion de format - [Exemples d'Opérations sur Fichiers Web Go](https://elysiatools.com/fr/samples/web-file-operations-go): Exemples d'opérations sur fichiers Web Go incluant lecture/écriture de fichiers texte, copier/déplacer, parcours de répertoires et validation de fichiers