La typographie d’un site web représente 90 à 95 % de ce que voit le visiteur, et pourtant elle reste le pilier de design le plus souvent négligé par les PME qui lancent leur site. Une seule police mal choisie ou deux polices qui jurent suffisent à faire passer un site soigné pour un projet amateur. La bonne nouvelle, c’est que Google Fonts propose plus de 1 500 familles libres de droits, calibrées pour le web, performantes en chargement et accessibles gratuitement. La moins bonne, c’est que face à ce catalogue, la majorité des dirigeants PME ne savent pas quel duo retenir ni comment l’appliquer cohéremment sur l’ensemble du site. La règle d’or tient pourtant en deux mots : deux polices maximum, l’une pour les titres et l’autre pour le corps, choisies pour leur complémentarité visuelle et leur lisibilité. Chez Propuls’Lead, nous accompagnons les marchands et les éditeurs dans la sélection typographique de leur site, et nous intégrons un copilot design IA qui propose des duos cohérents en quelques secondes.
Comprendre les bases de la typographie web
La typographie web repose sur quatre familles de caractères que tout dirigeant peut distinguer en deux minutes d’observation. Famille une : les serif, polices à empattements qui évoquent le sérieux, la tradition, l’imprimé, et qui conviennent aux secteurs juridique, immobilier haut de gamme, édition (exemples Playfair Display, Merriweather, Lora). Famille deux : les sans-serif, polices sans empattements qui évoquent la modernité, la technicité, l’efficacité, et qui dominent le web (exemples Inter, Roboto, Open Sans). Famille trois : les slab serif, polices à empattements épais qui équilibrent caractère et lisibilité (exemples Roboto Slab, Bitter). Famille quatre : les display ou décoratives, polices à fort caractère réservées aux gros titres et logos, jamais au corps de texte (exemples Bebas Neue, Pacifico).
La règle de combinaison repose sur un principe simple : créer un contraste lisible tout en restant cohérent. Trois stratégies dominent. Stratégie une : combiner un serif pour les titres avec un sans-serif pour le corps, contraste fort qui dynamise. Stratégie deux : combiner deux sans-serif d’épaisseurs très différentes (titre en gras épais, corps en régulier fin), contraste subtil qui modernise. Stratégie trois : utiliser une même famille avec ses variantes (Roboto pour les titres en Black et Roboto pour le corps en Regular), sécurité maximale qui privilégie la cohérence. Notre article sur les principes de design web à connaître avant de lancer son site revient sur la place de la typographie dans l’ensemble des fondamentaux.
Mettre en œuvre son duo typographique étape par étape
La sélection et l’intégration d’un duo Google Fonts s’organisent en cinq étapes accessibles à toute PME sans graphiste interne. Étape une : définition de la personnalité de marque. On qualifie en trois adjectifs ce que la marque doit dégager (sobre, technique, chaleureux par exemple), et on se réfère à des combinaisons éprouvées sur le secteur. Étape deux : présélection de cinq à dix duos candidats. On utilise les ressources comme Fontpair.co, Google Fonts Beta avec onglet « Pairings », ou Typewolf pour identifier des associations qui fonctionnent visuellement.
Étape trois : test grandeur nature dans un prototype. On charge le duo dans une maquette Figma reprenant les vraies pages du site (page d’accueil, page produit, article de blog) avec les vrais contenus. On lit, on scrolle, on revient. Une typographie qui semblait élégante en isolation peut fatiguer au bout de cinq minutes de lecture. Étape quatre : vérification des poids et des langues supportées. On s’assure que la police corps couvre bien les caractères français (accents, ligatures, ponctuation française), et que les poids nécessaires sont disponibles (Regular 400, Medium 500, SemiBold 600, Bold 700 au minimum). Étape cinq : intégration optimisée côté performance. On charge les polices en local (host self) ou via Google Fonts avec preconnect, on limite à deux familles et trois à quatre poids maximum, on précise le font-display: swap pour éviter l’invisible text pendant le chargement. Notre article sur WordPress fontes web, charger Google Fonts localement pour la vitesse revient sur l’optimisation technique du chargement.
Et avec un agent IA ?
La sélection typographique est l’un des sujets de design où un copilot design IA fait gagner le plus de temps, parce qu’il explore en quelques secondes un volume de combinaisons qu’un humain mettrait des heures à passer en revue. Le copilot design prend en charge trois activités. Activité une : génération de duos candidats à partir d’un brief court. On décrit en une phrase la personnalité de marque et le secteur, et le copilot propose dix à vingt duos Google Fonts cohérents, classés par registre (sobre, dynamique, premium, accessible). Activité deux : prévisualisation contextuelle automatique. Le copilot applique chaque duo candidat à une maquette de page d’accueil avec des contenus types, et présente côte à côte les rendus pour comparaison rapide. Activité trois : test de performance et d’accessibilité. Le copilot vérifie le poids des polices candidates, le nombre de langues supportées, la lisibilité aux petites tailles, et alerte sur les duos qui pourraient ralentir le site ou dégrader l’accessibilité.
Le copilot design en pratique s’appuie sur un modèle Claude Sonnet pour le raisonnement et la rédaction des recommandations, sur l’API Google Fonts pour la métadata des polices, et sur des outils comme Fontjoy (générateur de duos par IA) ou Wordmark.it pour la prévisualisation rapide. Le prompt système cadre le copilot : « Tu es un copilot design typographique. Tu proposes systématiquement deux ou trois duos contrastés en registre, tu privilégies les polices déjà optimisées pour le web, tu refuses les duos qui mettent une display en corps de texte. » L’orchestration se fait via les plugins Figma natifs ou via un workflow n8n qui assemble les étapes. Chez Propuls’Lead, nous concevons et déployons les copilots design qui produisent les duos typographiques à la place de nos clients, dans le cadre de la méthodologie PROPULSE. Le gain mesurable observé tourne entre 70 et 85 % de temps économisé sur la phase de sélection typo.
Quand l’humain reprend la main
Le copilot design propose mais ne tranche pas, et trois moments restent du ressort humain absolu. Moment un : choix final du duo retenu parmi les propositions. La typographie d’un site engage la perception de la marque sur plusieurs années, et le choix se prend en confrontant chaque duo au logo existant, aux supports de communication imprimés, à la culture de l’entreprise. Aucun copilot ne capte ces dimensions de manière fiable.
Moment deux : test de lecture sur le vrai contenu et avec la vraie cible. Une typographie peut séduire en maquette et fatiguer en lecture réelle, surtout pour une cible senior qui demande des tailles et des contrastes différents d’une cible jeune et digitalement à l’aise. Ce test se mène avec quelques visiteurs représentatifs et un œil humain qui observe le comportement réel. Moment trois : adaptation aux contraintes techniques héritées. Si le site existant utilise déjà une police propriétaire payée, si le thème WordPress ou Shopify impose certaines familles, si la marque est multimarchés avec des alphabets non-latins à gérer (cyrillique, arabe, asiatique), l’arbitrage technique se fait par un humain qui connaît la chaîne complète. Notre article sur Shopify fonts, réduire le nombre de polices pour accélérer le rendu revient sur la discipline de sobriété typographique pour les boutiques.
Stack recommandée par Propuls’Lead
Pour sélectionner et intégrer un duo Google Fonts avec un copilot design en renfort, nous recommandons une stack accessible. Côté exploration : Fontpair.co pour les duos éprouvés, Fontjoy pour la génération IA, et Typewolf pour la veille tendances. Côté prévisualisation : Wordmark.it pour tester une police sur du texte, et Figma avec ses plugins Google Fonts pour le prototypage. Côté audit : Google Fonts Analytics pour le poids et les langues, et le plugin WhatFont pour analyser une typo sur un site concurrent. Côté intégration : auto-hébergement local des fontes pour la performance et la conformité RGPD, ou Google Fonts API avec preconnect et font-display swap. Côté CMS : WordPress avec le plugin OMGF pour le self-hosting automatique, Shopify avec l’éditeur de thème et un fichier liquid custom. Sur les projets pilotés avec cette stack, la phase typo passe de deux à trois jours à deux à quatre heures.