Association de polices – aperçu titre et texte

Q: Quels caractères sont inclus ?

L’aperçu charge le sous ensemble latin français, anglais et la plupart des langues d’Europe de l’Ouest, avec les accents, le œ, les guillemets « » et le symbole euro et, si la police les possède et que votre texte en a besoin, les sous ensembles latin ext lettres d’Europe centrale comme č, ł, ő, ț , cyrillique et grec. Sans ce sous ensemble, ces lettres s’affichent dans la police de secours : Lato, Work Sans ou Space Grotesk n’ont pas le cyrillique, et seules Inter, Roboto, Open Sans, Source Serif 4 et Fira Code ont le grec. Aucune des 20 polices n’a de lettres arabes.

Aperçu d'associations de polices

Testez des associations de polices pour vos titres et votre texte avec 20 polices libres, réglez taille et interligne, et copiez le code CSS font-family.

Associations suggérées

Police des titres Police du texte

Taille des titres Taille du texte Interligne Graisse des titres Fond sombre

Texte du titre Texte courant

Aperçu

Code CSS

Auto-hébergement avec Fontsource

Installez les paquets npm et n’importez que les graisses utilisées. Les polices sont alors servies par votre propre site, sans CDN de polices.

Comment tester une association de polices

Partez d’une des Associations suggérées (Éditorial, Blog moderne, Page d’accueil, Actualités, Élégant, Magazine tech, Livre, Classique, Documentation, Ludique). Chaque bouton indique la police des titres et celle du texte qu’il applique.
Ou choisissez vous-même la Police des titres et la Police du texte. Les listes sont classées en polices sans empattement, avec empattement, de titrage, à chasse fixe et manuscrites. Inverser les polices échange les deux.
Réglez la Taille des titres, la Taille du texte et l’Interligne, puis la Graisse des titres (Gras (700) ou Normal (400)). Cochez Fond sombre pour vérifier le duo en mode sombre.
Remplacez le Texte du titre et le Texte courant par vos propres mots : un vrai titre et un vrai paragraphe en disent bien plus qu’un pangramme. Laissez une ligne vide entre deux paragraphes.
Copiez le Code CSS, puis suivez Auto-hébergement avec Fontsource pour ajouter les polices à votre projet.

Les polices se chargent la première fois que vous les choisissez (environ 12 à 50 Ko par graisse). Elles sont servies par ce site, jamais par un CDN de polices.

Les règles d’une bonne association

Du contraste, pas du conflit. La recette classique : une police à empattements pour un rôle et une sans empattement pour l’autre, comme Playfair Display au-dessus de Lato, ou Montserrat au-dessus de Merriweather. Deux polices proches sans être identiques (deux linéales géométriques, par exemple) donnent souvent l’impression d’une erreur.
Un texte courant reposant. C’est là que le lecteur passe son temps. Choisissez une police aux formes ouvertes et à la hauteur d’x généreuse (Inter, Lato, Open Sans, Source Serif 4, Merriweather) et réservez les polices de titrage comme Playfair Display, DM Serif Display, Oswald ou Caveat aux titres courts.
Des proportions compatibles. Des polices aux hauteurs d’x voisines cohabitent bien sur une même ligne et dans une même colonne.
Deux polices suffisent. Créez la hiérarchie avec la taille, la graisse et les espacements plutôt qu’avec une troisième police.

Pour un texte confortable, visez 16 à 20 px avec un interligne entre 1,4 et 1,7, et environ 60 à 75 caractères par ligne. Les titres demandent un interligne plus serré (1,1 à 1,3), que le code CSS règle pour vous.

Le code CSS

Le code déclare deux propriétés personnalisées, --font-heading et --font-body, chacune avec une pile de secours : tant que la police web n’est pas chargée, le navigateur affiche une police système proche (Georgia pour les polices à empattements, la police de l’interface pour les autres). Les tailles sont en rem (16 px = 1rem) et suivent donc le réglage de taille de police du navigateur du lecteur.

Auto-hébergement et licences

Les 20 polices viennent de Fontsource, qui distribue des polices libres sous forme de paquets npm. L’encadré d’installation donne la commande npm install et les lignes import du sous-ensemble latin, pour les seules graisses utilisées ; votre bundler copie ensuite les fichiers woff2 dans votre build. Servir les polices depuis votre propre domaine est plus rapide (pas de connexion supplémentaire), fonctionne hors ligne et évite de transmettre l’adresse IP de vos visiteurs à un service de polices tiers, un problème RGPD bien connu en Europe.

Selon les métadonnées de leurs paquets, toutes ces polices sont sous SIL Open Font License 1.1 : vous pouvez les utiliser sur un site, dans une application ou à l’impression, dans un cadre commercial ou non, et les intégrer à vos fichiers. Vous ne pouvez pas vendre les fichiers de police seuls. Une police modifiée doit rester sous OFL et ne pas reprendre le nom réservé d’origine. Le fichier de licence est inclus dans chaque paquet.

Questions fréquentes

Cet outil utilise-t-il Google Fonts ?

Non. Beaucoup de ces familles existent aussi sur Google Fonts, mais ici les fichiers proviennent des paquets npm Fontsource et sont servis par ce site. Aucune requête ne part vers Google ni vers un autre CDN de polices.

Pourquoi certains titres ne passent-ils pas en gras ?

DM Serif Display n’existe qu’en graisse normale. L’outil l’affiche alors en 400, le signale sous les réglages, et le code CSS utilise 400.

Peut-on associer deux polices à empattements, ou deux sans empattement ?

Oui, si leurs rôles et leurs graisses se distinguent nettement, par exemple un titre étroit et gras avec un texte léger et ouvert. L’outil affiche une remarque quand les deux polices ont le même style, car le contraste empattement / sans empattement est plus facile à réussir.

Quels caractères sont inclus ?

L’aperçu charge le sous-ensemble latin (français, anglais et la plupart des langues d’Europe de l’Ouest, avec les accents, le œ, les guillemets « » et le symbole euro) et, si la police les possède et que votre texte en a besoin, les sous-ensembles latin-ext (lettres d’Europe centrale comme č, ł, ő, ț), cyrillique et grec. Sans ce sous-ensemble, ces lettres s’affichent dans la police de secours : Lato, Work Sans ou Space Grotesk n’ont pas le cyrillique, et seules Inter, Roboto, Open Sans, Source Serif 4 et Fira Code ont le grec. Aucune des 20 polices n’a de lettres arabes.

Puis-je utiliser ces polices dans un projet commercial ?

Oui. La licence SIL Open Font License autorise l’usage commercial, sans paiement ni mention obligatoire dans votre design. Seule la revente des fichiers de police seuls est interdite.