Aperçu et test de polices, gratuits

Ce que fait cet outil

Un outil de prévisualisation de polices affiche la même chaîne dans plusieurs caractères simultanément pour que vous puissiez les comparer côte à côte sans en choisir un définitivement. Tapez votre texte une seule fois en haut (le nom du projet, le titre que vous rédigez, le wordmark de marque que vous choisissez) et chaque police de la galerie affiche la même chaîne dans son propre caractère. Ajustez la taille, la couleur et l'arrière-plan pour tester l'allure de la comparaison à la taille et au contraste où elle apparaîtra réellement en production. Cliquez sur n'importe quelle police pour copier sa déclaration CSS font-family. La chaîne de comparaison typographique classique « The quick brown fox jumps over the lazy dog » est un pangramme (chaque lettre de l'alphabet anglais y apparaît au moins une fois), utile parce qu'elle exerce chaque glyphe que le caractère a à offrir en une seule courte phrase.

Polices web-safe

« Polices web-safe » est une expression du début à mi-2000, à l'époque où les polices web CSS (@font-face) n'étaient pas prises en charge de manière fiable. L'ensemble désignait les caractères pré-installés essentiellement sur tous les systèmes d'exploitation grand public, de sorte qu'un designer pouvait les spécifier avec la certitude que le navigateur de l'utilisateur les aurait localement. La liste classique des polices web-safe : Arial, Helvetica, Times New Roman, Times, Georgia, Verdana, Tahoma, Trebuchet MS, Courier New, Courier, Lucida Console, Palatino, Garamond, Bookman, Comic Sans MS, Impact, Arial Black. Chacune a son histoire, Arial fut la réponse de Monotype à la pression de licence de Microsoft pour un remplacement d'Helvetica ; Verdana et Georgia ont été commandées par Microsoft à Matthew Carter en 1996 spécifiquement pour la lecture à l'écran aux résolutions de l'époque ; Tahoma est la sœur plus serrée de Verdana. La convention web-safe a perduré bien après que @font-face soit devenu fiable (Internet Explorer le supportait depuis la version 4 en 1997, mais Firefox 3.5 en 2009 et Safari 3.1 en 2008 l'ont rendu utilisable de façon multi-navigateur) parce que les designers apprécient le rendu sans latence et savent que les polices personnalisées coûtent des allers-retours réseau. La meilleure pratique actuelle est une « pile de polices système » (Apple -apple-system, puis BlinkMacSystemFont, puis Segoe UI, puis Roboto, puis sans-serif) qui choisit la police d'interface native de l'OS de l'utilisateur sans rien télécharger, à la fois rapide et visuellement adaptée à la plate-forme.

Google Fonts et l'ère de l'hébergement de polices web

Google Fonts a été lancé en mai 2010 sous forme de bibliothèque CDN gratuite de caractères open-source. Le lancement original comptait 18 polices ; en 2026 le catalogue dépasse 1 500 familles, toutes sous licence SIL Open Font License ou similaires permissives. Open Sans (Steve Matteson, 2010), Roboto (Christian Robertson, 2011), Lato (Łukasz Dziedzic, 2010), Montserrat (Julieta Ulanovsky, 2011), Source Sans Pro (Paul Hunt pour Adobe, 2012), Inter (Rasmus Andersson, 2016), Poppins (Indian Type Foundry, 2014), Nunito (Vernon Adams, 2011), figurent parmi les caractères les plus utilisés sur le web moderne, tous disponibles gratuitement via Google Fonts. Le mécanisme de chargement du catalogue a évolué au fil des ans : le lancement original de 2010 utilisait des balises <link> vers un endpoint CSS Google ; à partir de 2018 on a mis l'accent sur le paramètre display=swap pour contrôler le comportement FOUT/FOIT ; l'API Google Fonts v2 de 2022 pré-rend des sous-ensembles pour de meilleures performances ; sur les sites soucieux de vie privée, on auto-héberge souvent les polices pour éviter les soucis de confidentialité et de conformité RGPD du CDN Google (un jugement allemand de 2022 a explicitement statué que charger les Google Fonts depuis les serveurs de Google sans consentement utilisateur violait le RGPD). Adobe Fonts (anciennement Typekit, racheté en 2011), Fontshare (polices gratuites d'Indian Type Foundry, 2021), Bunny Fonts (miroir Google Fonts respectueux de la vie privée, 2021) sont les principales alternatives.

Catégories de polices

• Les polices serif ont de petites extensions saillantes (empattements) au bout des lettres. Les serifs vieux-style (Garamond, Caslon, Goudy, Sabon) datent du XVIᵉ siècle et présentent un faible contraste entre traits épais et fins. Les serifs transitionnels (Baskerville, Times New Roman) sont apparus au XVIIIᵉ siècle avec un contraste plus élevé. Les serifs modernes (Bodoni, Didot) poussent le contraste à l'extrême. Les serifs slab (Rockwell, Roboto Slab, Courier) ont des empattements rectangulaires lourds. Pour le corps de texte web, les serifs optimisés écran comme Georgia (Matthew Carter pour Microsoft, 1996), Merriweather (Sorkin Type, 2010), Lora (Cyreal, 2011) et PT Serif (Paratype, 2009) se lisent mieux que les caractères dérivés du papier comme Times New Roman.
• Les polices sans-serif n'ont pas d'empattements. Les sans géométriques (Futura, Avenir, Avant Garde) sont construites à partir de formes géométriques pures. Les sans humanistes (Gill Sans, Frutiger, Open Sans, Source Sans Pro) empruntent leurs proportions à la lettrine romaine et tendent à être les plus lisibles pour le corps de texte. Les sans grotesques (Helvetica, Arial, Akzidenz-Grotesk) sont les bêtes de somme industrielles des XIXᵉ et XXᵉ siècles. Les néo-grotesques (Inter, Roboto, San Francisco, Segoe UI) sont les valeurs par défaut d'interface modernes des grands systèmes d'exploitation et systèmes de design. Les sans-serifs dominent le corps de texte web parce qu'elles restent lisibles à de plus petites tailles en pixels.
• Les polices monospace attribuent la même largeur à chaque caractère, conçues à l'origine pour les machines à écrire et les premiers terminaux informatiques où chaque caractère occupait une cellule fixe. Indispensables pour les éditeurs de code, terminaux, documentation technique, et tout contexte où l'alignement compte. Les polices de programmation modernes (JetBrains Mono, Fira Code, Cascadia Code, IBM Plex Mono, Inconsolata, Source Code Pro) incluent des ligatures de programmation (=> → ⇒, != → ≠) et sont conçues pour la lisibilité sur de longues sessions. SF Mono d'Apple et Cascadia Code de Microsoft sont livrées avec leurs outils de développement respectifs.
• Les polices display sont conçues pour un usage en grande taille uniquement, gros titres, affiches, wordmarks de marque, hero text de page d'accueil. Impact, Bebas Neue, Anton, Oswald, Playfair Display (la serif moderne à fort contraste), Abril Fatface, toutes se lisent mal en taille corps mais captent l'attention en taille de titre. Associer une police de titre display à une police de corps épurée est le motif typographique le plus courant sur les sites web modernes.
• Les polices manuscrites et scriptes imitent les styles d'écriture à la main. Utiles avec parcimonie pour la marque personnelle ou de type carton d'invitation ; quasi impossibles à lire en taille corps ; à utiliser comme on utilise les majuscules (brièvement, délibérément).

Polices variables, la révolution silencieuse moderne

La spécification OpenType Font Variations (TrueType GX Variations d'Apple de 1994 + contributions d'Adobe, conjointement standardisées en OpenType 1.8 en septembre 2016) permet à un seul fichier de police de décrire une famille infinie de variations associées. Là où une famille traditionnelle livre des fichiers séparés pour Light, Regular, Medium, Bold, Black, plus leurs italiques (six à dix fichiers de 50-200 Ko chacun) une police variable livre un seul fichier contenant tous les mêmes designs sous forme de variations continues le long d'axes (poids, largeur, italique, taille optique, et axes personnalisés arbitraires que le designer typographique définit). Le support navigateur est arrivé dans Chrome 62 (octobre 2017), Firefox 62 (septembre 2018), Safari 11.0 / 11.1 (2017-2018), et Edge avec Chromium (2020). Les sorties majeures de polices variables incluent Roboto Flex (Christian Robertson + Font Bureau, octobre 2022) qui a 13 axes ; Recursive (Stephen Nixon, 2019) ; Inter (Rasmus Andersson) avec axes poids + italique ; et la plupart des grandes familles typographiques livrent désormais des versions variables aux côtés des fichiers statiques traditionnels. L'économie de bande passante est spectaculaire : un fichier de police variable de 200 Ko remplace huit fichiers statiques de 100 Ko, tout en offrant plus de flexibilité de design.

Chargement des polices et le problème FOUT/FOIT

Quand un navigateur récupère un fichier de police personnalisée, qu'affiche-t-il en attendant ? Deux stratégies extrêmes. FOIT (Flash of Invisible Text), n'afficher aucun texte tant que la police n'est pas arrivée, puis montrer brusquement le texte. La page paraît cassée jusqu'au chargement de la police. FOUT (Flash of Unstyled Text), afficher immédiatement le texte dans une police de repli, puis basculer vers la police personnalisée à son arrivée. La page est lisible dès la première frame mais le basculement est visuellement brutal. La propriété CSS font-display (ajoutée dans CSS Fonts Module Level 4) donne aux développeurs le contrôle : auto (défaut navigateur, généralement orienté FOIT), block (FOIT complet), swap (FOUT complet, meilleure pratique moderne dominante), fallback (court bloc invisible puis swap, avec un repli « assez bon » après quelques secondes), optional (sauter complètement la police personnalisée si elle ne charge pas assez vite). Pour les Core Web Vitals et les scores Lighthouse en 2026, font-display: swap est la recommandation standard, accompagnée d'indices preload pour les polices critiques et d'une police de repli soigneusement choisie qui soit métriquement similaire à la police personnalisée (afin que la mise en page ne se reflowe pas lors du basculement, la nouvelle propriété size-adjust dans CSS Fonts Module Level 5 ajuste finement cela).

Choisir des polices selon l'usage

• Texte de corps d'interface: pile de polices système d'abord (Apple SF, Segoe UI, Roboto, suit l'OS de l'utilisateur) pour zéro latence et un rendu adapté à la plate-forme. Si une police personnalisée est requise pour des raisons de marque, choisissez une sans humaniste (Inter, Open Sans, Source Sans Pro) à 16 px ou plus.
• Lecture longue (articles, blogs): serif optimisé écran (Georgia, Merriweather, Lora) à 18-22 px avec un interligne généreux (1,6-1,8). Les serifs aident le suivi visuel sur de longues lignes de texte.
• Wordmark de marque: un caractère display distinctif utilisé à une seule grande taille. À associer à un caractère de corps plus neutre. Investir dans un caractère personnalisé ou commandé ici se rentabilise, c'est la décision typographique la plus visible de la marque.
• Blocs de code: une police de programmation dédiée (JetBrains Mono, Fira Code, Cascadia Code) à 14-15 px. Les ligatures de programmation sont une préférence personnelle ; beaucoup de développeurs les adorent, certains les trouvent déroutantes.
• Tableaux de chiffres: une police avec chiffres tabulaires (le chiffre 1 occupe la même largeur que 2, 3, etc.) afin que les colonnes de nombres s'alignent sans padding manuel. La plupart des polices modernes offrent des chiffres tabulaires via la propriété font-variant-numeric: tabular-nums.
• Usage décoratif uniquement: polices manuscrites, scriptes, caractères display rétro. À utiliser brièvement et délibérément ; jamais pour le corps de texte.

Questions fréquentes

Quelle est la différence entre polices web-safe et polices personnalisées ?

Les polices web-safe sont pré-installées sur les appareils des utilisateurs, donc elles s'affichent instantanément sans requête réseau. Les polices personnalisées (Google Fonts, Adobe Fonts, @font-face auto-hébergé) doivent être téléchargées, ajoutant de la latence mais offrant une variété visuelle au-delà du jeu pré-installé par l'OS. La plupart des sites web modernes utilisent un mélange : une police personnalisée comme primaire, des polices web-safe en repli via la pile font-family, et une pile de polices système (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) pour les éléments d'interface où un rendu natif à la plate-forme est préféré.

Comment utiliser une Google Font sur mon site ?

Deux façons. Hébergé sur CDN : ajoutez une balise <link> vers fonts.googleapis.com dans le <head> HTML, puis référencez la police en CSS via font-family: 'Inter', sans-serif. Auto-hébergé : téléchargez les fichiers WOFF2 depuis Google Fonts, hébergez-les sur votre propre domaine, et déclarez-les avec @font-face. L'auto-hébergement est préférable dans les contextes sensibles à la vie privée (un tribunal allemand a jugé en 2022 que charger les Google Fonts depuis le CDN de Google sans consentement viole le RGPD). Ajoutez font-display: swap pour contrôler le comportement de chargement et préchargez les polices critiques pour les performances.

Quelle est une bonne police serif pour le corps de texte ?

Georgia (Matthew Carter, commandée par Microsoft en 1996 spécifiquement pour le rendu écran) reste un excellent choix et est pré-installée sur tous les OS grand public. Depuis Google Fonts : Merriweather (Sorkin Type, 2010), Lora (Cyreal, 2011), PT Serif (Paratype, 2009), Source Serif Pro (Frank Grießhammer pour Adobe, 2014). Évitez Times New Roman pour le corps web, conçue pour l'impression journalistique aux petites tailles, elle se lit serrée et datée à l'écran. Pour des titres serif modernes à fort contraste, Playfair Display fonctionne magnifiquement (à éviter pour le corps de texte, trop fort contraste aux petites tailles).

Cet outil de prévisualisation fonctionne-t-il hors ligne ?

Les polices web-safe (Arial, Georgia, Verdana, etc.) fonctionnent hors ligne car elles sont chargées depuis votre système d'exploitation. Les Google Fonts de la galerie nécessitent une récupération réseau ponctuelle depuis le CDN de Google pour s'afficher, une fois chargées elles sont mises en cache et la prévisualisation fonctionne hors ligne par la suite. Mettez la page hors ligne (mode avion) après le chargement initial pour confirmer ; les polices installées par l'OS continuent de s'afficher, les Google Fonts utilisent ce qui était en cache.

Outils associés