Générateur de Paires de Polices

Un contraste évident et un squelette commun. Les duos fonctionnent quand les deux polices diffèrent nettement sur un point - une serif en titre face à une sans en texte, ou une display condensée face à une police de labeur neutre - tout en s'accordant sur les proportions comme la hauteur d'x et le contraste des pleins et déliés. Toutes les associations de ce générateur sont construites ainsi.

Un outil qui montre deux polices ensemble plutôt qu'une à la fois. Cette page contient 24 duos Google Fonts sélectionnés à la main, affiche chacun sous forme de titre et de paragraphe dans lesquels vous pouvez écrire, permet de régler taille et interligne, et exporte le duo sous forme de bloc CSS avec l'@import Google Fonts correspondant.

Partez du rôle de chaque police : une pour les titres, une pour le texte courant. Confiez la tâche la plus simple à la police de texte - une police de labeur comme Inter, Lato, Open Sans ou Source Sans 3 - et laissez le titre porter la personnalité. Vérifiez ensuite les deux ensemble à taille réelle : c'est exactement ce que fait l'aperçu ici, et le bloc Copier le CSS fournit les deux familles dans un seul @import.

Tirés de ce générateur : Playfair Display avec Source Sans 3 pour des pages éditoriales, Montserrat avec Open Sans pour un site produit, Merriweather avec Lato pour la lecture longue, Oswald avec Lato quand le titre doit frapper, et Space Grotesk avec Space Mono pour de la documentation technique. La rangée de catégories montre les autres regroupés par style.

Trois qui résistent à la pratique. Utilisez deux familles, pas trois, sauf si l'une est une monospace pour le code. Rendez la différence indiscutable, car un écart trop faible passe pour une erreur. Gardez la police de texte sobre et laissez le titre avoir du caractère. Une quatrième, très concrète : vérifiez le duo à votre plus petite taille de texte avant de trancher, avec le curseur prévu ici.

Tapez le nom de la marque directement dans le titre modifiable et poussez le curseur de titre jusqu'à 96 pixels : un logotype se lit en grand et l'approche des lettres compte plus que la lisibilité. Parcourez une catégorie avec les flèches en surveillant les paires de lettres maladroites. Attention, la licence qui compte pour un logo est celle de la famille sur Google Fonts, pas celle de cette page.

Jugez d'abord la police de texte, car c'est là que les visiteurs passent leur temps. Réglez le curseur de texte sur la taille réellement utilisée par le site, montez l'interligne vers 1,6 ou 1,8 et lisez le paragraphe. Passez ensuite au titre. Quand cela fonctionne, Copier le CSS vous donne un @import et deux règles qui ciblent déjà h1-h6 et body, p, li et span.

Les duos ne sont que des noms : vous pouvez chercher les deux familles dans le sélecteur de polices de Canva et les appliquer à la main. Ce qui ne se transpose pas, c'est le bloc CSS, prévu pour une feuille de style. Canva propose beaucoup de familles Google Fonts mais pas toutes : vérifiez les deux noms dans son sélecteur avant de bâtir un modèle entier sur un duo.

L'aperçu modifiable en est un. Collez-y votre vrai titre et un vrai paragraphe, réglez les tailles sur celles de votre maquette et vous testez votre contenu et non un échantillon. Ce qu'aucun vérificateur automatique ne peut faire, c'est décider si le duo convient à votre public : ce jugement vous revient, d'où un aperçu modifiable plutôt qu'une note.

Elles viennent de la collection Google Fonts, dont le README du projet indique que la plupart des familles utilisent la SIL Open Font License v1.1, que certaines utilisent la licence Apache 2 et que les polices Ubuntu utilisent la Ubuntu Font License v1.0. Ce sont des licences ouvertes, mais les conditions appartiennent à chaque famille : ouvrez sa page sur Google Fonts et lisez la licence avant de livrer un produit payant.