Aperçu des graisses de police

• Aperçu instantané des graisses : prévisualisez instantanément toutes les graisses disponibles de n'importe quelle Google Font côte à côte. Notre aperçu des graisses de police charge la police choisie directement depuis Google Fonts et affiche toutes les graisses - de Thin (100) à Black (900) - dans une seule vue, sans rechargement de page.
• Aperçu des graisses de police en ligne sécurisé : notre aperçu des graisses de police s'exécute entièrement dans votre navigateur. Les polices sont chargées directement depuis le CDN Google Fonts - aucune donnée n'est envoyée à un serveur et votre texte d'aperçu reste totalement privé sur votre appareil.
• Aperçu des graisses de police sans installation : utilisez notre aperçu des graisses de police directement dans n'importe quel navigateur, sans téléchargement, extension ni compte. Prévisualisez les graisses de n'importe quelle Google Font depuis n'importe quel appareil, où que vous soyez, entièrement gratuitement.
• Plusieurs modes d'affichage : choisissez entre Empilé (lignes en taille réelle), Compact (lignes plus petites pour comparer rapidement) ou Comparaison. Filtrez pour n'afficher que les graisses disponibles, ajustez la taille d'aperçu de 14 px à 48 px et copiez la déclaration CSS font-weight de n'importe quelle graisse en un clic.

• Choisir la bonne graisse pour l'interface : utilisez notre aperçu des graisses de police pour comparer l'allure d'une police à différentes graisses avant de la fixer dans votre design system. Voyez si 500 ou 600 convient mieux à vos titres, ou si 300 est trop léger pour le corps de texte à la taille visée.
• Conception d'une échelle typographique : concevez une échelle typographique complète en prévisualisant l'interaction des graisses. Notre aperçu des graisses de police affiche toutes les graisses côte à côte pour choisir la bonne combinaison pour titres, sous-titres, corps de texte et légendes.
• Recherche d'associations de polices : étudiez les associations de polices en prévisualisant la plage de graisses de chaque candidate. Certaines polices ont un support limité des graisses - notre aperçu indique clairement quelles graisses sont disponibles et lesquelles ne le sont pas, vous évitant de découvrir des manques après implémentation.
• Tests d'accessibilité et de lisibilité : testez la lisibilité des graisses à différentes tailles. Notre aperçu des graisses de police vous permet d'ajuster la taille de 14 px à 48 px tout en comparant toutes les graisses, ce qui vous aide à vérifier que la graisse choisie reste lisible en petite taille pour le corps de texte.
• Référence CSS font-weight : utilisez notre aperçu des graisses de police comme référence rapide lorsque vous écrivez du CSS. Chaque carte de graisse indique la valeur numérique et le nom (Thin, Light, Regular, Medium, Bold, etc.) avec un bouton de copie en un clic de la déclaration CSS font-weight.
• Présentations clients et revues de design : montrez aux clients toute la plage de graisses d'une police proposée lors des revues de design. Notre aperçu des graisses de police affiche la police avec le texte réel de la marque du client, ce qui facilite la démonstration de son rendu dans différents contextes d'interface.

Un aperçu des graisses de police affiche toutes les variantes de graisse disponibles d'une police côte à côte - de Thin (100) à Black (900) - afin de les comparer visuellement avant de choisir les graisses à inclure dans votre projet. Toutes les polices ne prennent pas en charge les neuf graisses ; notre aperçu des graisses de police indique clairement quelles graisses sont disponibles pour chaque Google Font et grise celles qui ne le sont pas. Toutes les polices sont chargées directement depuis le CDN Google Fonts - aucune donnée n'est envoyée à un serveur et votre texte d'aperçu reste privé sur votre appareil.

1. Sélectionnez une police : recherchez n'importe quelle Google Font par nom dans le champ de recherche. L'aperçu des graisses de police affiche les plus de 80 polices disponibles avec leur catégorie et leur nombre de graisses. Cliquez sur une police pour la charger instantanément.
2. Prévisualisez toutes les graisses : l'aperçu des graisses de police affiche toutes les graisses (100-900) côte à côte avec votre texte d'aperçu personnalisé. Les graisses disponibles sont affichées en entier ; les indisponibles sont grisées. Activez « Disponibles uniquement » pour masquer les indisponibles.
3. Copiez et utilisez : cliquez sur l'icône de copie de n'importe quelle carte de graisse pour copier la déclaration CSS font-weight. La section de référence CSS en bas fournit l'URL @import Google Fonts et toutes les valeurs font-weight disponibles, prêtes à coller dans votre feuille de style.

• 100 - Thin : la graisse la plus légère. À utiliser avec parcimonie pour les grands textes d'affichage uniquement - trop légère pour le corps de texte en petite taille.
• 300 - Light : légèrement plus légère que le regular. Convient aux sous-titres et aux textes secondaires lorsqu'elle est associée à une graisse plus forte pour les titres.
• 400 - Regular : la graisse par défaut. Le choix standard pour le corps de texte et la base de la plupart des échelles typographiques.
• 700 - Bold : la graisse grasse standard. Utilisée pour les titres, les mises en avant et les libellés d'interface. La graisse la plus utilisée après Regular.

Chaque graisse que vous chargez depuis Google Fonts augmente les requêtes réseau de votre page et la taille totale du fichier de police. Pour la plupart des projets, charger 2 à 3 graisses suffit - généralement Regular (400), Medium ou SemiBold (500-600) pour les libellés d'interface, et Bold (700) pour les titres. Évitez de charger des graisses que vous n'utilisez pas. Notre aperçu des graisses de police vous aide à identifier exactement les graisses dont vous avez besoin avant de les ajouter à votre URL d'import Google Fonts, ce qui évite le chargement inutile de graisses qui ralentit votre page.