Le choix d'une police d'ecriture peut faire varier votre taux de conversion de 38 %. Un simple changement de typographie -- taille, interligne, famille de caractères -- et votre taux de rebond baisse de 10 %, vos pages vues augmentent de 24 %, et vos formulaires convertissent jusqu'a 133 % de plus (source : étude CXL Institute). La typographie n'est pas un détail esthetique. C'est un levier business.
Pourtant, la majorite des sites web traitent encore leurs polices comme un choix cosmetique : "celle-la est jolie, on la prend." Résultat : des fichiers de polices qui pesent 400 Ko, des textes illisibles sur mobile, et des performances qui s'effondrent. Chez Transacts, après 25 ans de création de sites internet, nous voyons ce schema se repeter chez un client sur deux.
Ce guide vous donné tout ce qu'il faut pour choisir, implementer et optimiser vos polices d'ecriture pour le web -- sans sacrifier la performance, l'accessibilite ou l'identité visuelle.
Police, fonte, typographie : les distinctions qui comptent
Ces trois termes sont utilisés de manière interchangeable, mais ils designent des choses différentes. Comprendre la nuance vous evitera des malentendus avec votre designer ou votre développeur.
La typographie est la discipline complète. Elle englobe tout ce qui concerne la mise en forme du texte : le choix des polices, les tailles, l'interligne (line-height), l'espacement des lettres (letter-spacing), les marges, l'alignement, la hiérarchie visuelle. Quand on parle de "typographie web", on parle de l'ensemble de ces décisions appliquees a un site.
La police d'ecriture (ou police de caractères, ou typeface en anglais) designe une famille typographique. Roboto est une police. Inter est une police. Garamond est une police. C'est le design global des caractères : leurs formés, leurs proportions, leur personnalite visuelle.
La fonte (ou font en anglais) designe une variante spécifique d'une police. Roboto Bold 16px est une fonte. Inter Italic 400 est une fonte. La fonte combine la police avec une graisse (poids), un style (romain ou italique) et une taille.
En pratique, dans le contexte du web, le terme "police" couvre les deux usages. Quand un client nous dit "je veux changer la police de mon site", il parle de la famille typographique -- et c'est la bonne conversation a avoir. La distinction police/fonte est surtout utile quand on parle de fichiers a charger et de performance, car chaque fonte est un fichier WOFF2 supplémentaire.
Les grandes familles de polices d'ecriture
Toutes les polices d'ecriture se classent dans cinq grandes familles. Chacune a ses forces, ses usages privilegies, et ses limites sur le web.
Serif (avec empattements)
Les polices serif portent de petits traits decoratifs a l'extremite de chaque caractère -- les empattements. Elles evoquent la tradition, l'autorité, le sérieux. Georgia, Times New Roman, Playfair Display, Source Serif 4, Lora. Longtemps delaissees sur le web au profit des sans-serif, les serifs connaissent un retour en force en 2026. Les écrans haute resolution (Retina, OLED) rendent désormais les empattements parfaitement lisibles, même a petite taille.
Quand les utiliser : titres et sous-titres pour créer un contraste avec un corps en sans-serif, sites editoriaux, cabinets d'avocats, immobilier de prestige, marques patrimoniales.
Sans-serif (sans empattements)
Pas d'empattements, des formés epurees, une lisibilite maximale sur écran. Inter, Roboto, Open Sans, Montserrat, Source Sans 3. C'est la famille dominante sur le web depuis 15 ans, et pour une bonne raison : elle fonctionne partout, a toutes les tailles, sur tous les écrans.
Quand les utiliser : corps de texte, interfaces utilisateur, applications, sites corporate, e-commerce, SaaS. C'est le choix par défaut, et il est rarement mauvais.
Monospace (chasse fixe)
Chaque caractère occupé exactement la même largeur. Fira Code, JetBrains Mono, Source Code Pro, Roboto Mono. Pensees a l'origine pour les machines a écrire et les terminaux, elles sont aujourd'hui essentiel pour afficher du code, des données techniques ou des tableaux a colonnes alignees.
Quand les utiliser : blocs de code, documentations techniques, données chiffrees, design retro-tech. Ne les utilisez jamais pour du texte courant -- elles reduisent la vitesse de lecture de 10 a 15 %.
Display (decoratives)
Conçues pour être vues de loin et en grand. Lobster, Abril Fatface, Permanent Marker, Bebas Neue. Elles ont une personnalite forte -- et c'est a la fois leur force et leur limite. Une police display dans un titre de hero peut créer un impact immediat. La même police dans un paragraphe de 200 mots devient illisible.
Quand les utiliser : titres de hero, logos, elements de branding. Jamais en dessous de 24px, jamais pour du texte courant.
Handwriting (manuscrites)
Elles imitent l'ecriture a la main. Dancing Script, Caveat, Pacifico, Satisfy. Elles apportent de la chaleur et de la proximite, mais posent des problèmes sérieux de lisibilite sur écran, surtout a petite taille et sur mobile.
Quand les utiliser : signatures, citations, accents decoratifs ponctuels. A proscrire absolument pour le corps de texte et la navigation.
Comment choisir sa police d'ecriture pour le web
Le choix d'une police d'ecriture pour un site web repose sur trois criteres, dans cet ordre de priorite.
1. La lisibilite d'abord, l'esthetique ensuite
Votre police doit être lisible a 16px sur un écran de smartphone tenu a bout de bras. Testez-la sur un vrai appareil, pas sur votre écran 27 pouces Retina. Les polices avec une grande x-height (hauteur des lettres minuscules par rapport aux majuscules), des compteurs ouverts (les espaces a l'intérieur des lettres comme le "e" ou le "a") et une distinction claire entre caractères similaires (l, 1, I -- b, d, p, q) sont les plus performantes en lecture écran.
2. La performance avant tout
Chaque police chargee est un fichier supplémentaire qui bloque potentiellement le rendu de votre page. Deux questions a se poser : combien de graisses (poids) vais-je réellement utiliser ? Ai-je besoin de l'italique ? Chaque graisse supplémentaire represente entre 20 et 80 Ko. Trois graisses d'une même police (regular, semi-bold, bold) suffisent pour 95 % des sites.
Si votre designer insiste pour utiliser 5 polices différentes, changez de designer. Deux familles maximum -- une pour les titres, une pour le texte -- c'est la règle. Et si vous trouvez une seule police qui fonctionne dans les deux contextes (Inter, Source Sans 3, Manrope), c'est encore mieux.
3. La cohérence avec votre identité
Votre police de caractères communique autant que vos mots. Un cabinet d'avocats en Comic Sans perd toute crédibilité. Une startup tech en Times New Roman parait depassee. Le choix doit être cohérent avec votre secteur, votre positionnement et votre charte graphique. Si vous n'avez pas encore défini votre identité visuelle, commencez par la -- la typographie suivra naturellement.
Top 15 des polices d'ecriture pour le web en 2026
Cette sélection est basée sur les données d'utilisation réelles (HTTP Archive Web Almanac 2025, Google Fonts analytics) et notre expérience terrain chez Transacts. Chaque police a été testee sur des dizaines de projets clients.
| Police | Famille | Usage idéal | Gratuite | Variable |
|---|---|---|---|---|
| Inter | Sans-serif | Interfaces, SaaS, corporate, texte courant | Oui | Oui |
| Roboto | Sans-serif | Applications, contenu long, e-commerce | Oui | Oui |
| Source Sans 3 | Sans-serif | Sites institutionnels, documentation, UI | Oui | Oui |
| Manrope | Sans-serif | Tech, services pro, landing pages | Oui | Oui |
| Open Sans | Sans-serif | Polyvalente, tous types de sites | Oui | Oui |
| Montserrat | Sans-serif | Titres, branding, mode, lifestyle | Oui | Oui |
| Lato | Sans-serif | Corporate, finance, sites sérieux | Oui | Non |
| Playfair Display | Serif | Titres, editorial, luxe, immobilier | Oui | Oui |
| Source Serif 4 | Serif | Corps de texte editorial, articles longs | Oui | Oui |
| Lora | Serif | Blogs, magazines en ligne, culture | Oui | Oui |
| DM Sans | Sans-serif | Startup, tech, design minimaliste | Oui | Oui |
| Lexend | Sans-serif | Accessibilite, éducation, sante | Oui | Oui |
| Outfit | Sans-serif | Design moderne, portfolio, agences | Oui | Oui |
| JetBrains Mono | Monospace | Code, documentation technique, terminal | Oui | Oui |
| Satoshi | Sans-serif | Design premium, tech, produit digital | Freemium | Oui |
Le choix de Transacts : sur nos propres projets clients, nous utilisons principalement Inter (interfaces, SaaS) et Manrope (sites corporate, agences). Pour les titres qui necessitent une touche editoriale, Playfair Display en variable font offre le meilleur rapport impact/poids de fichier.
Google Fonts vs self-hosting : avantages et pièges
Google Fonts est la première source de polices web au monde. La plateforme est utilisée par environ 54 % des sites desktop et 47 % des sites mobile (Web Almanac 2025). Mais "populaire" ne signifie pas "optimal".
Google Fonts : les avantages
- Gratuit et open source : plus de 1 700 familles de polices, libres de droits pour tout usage commercial.
- CDN performant : serveurs distribues mondialement, fichiers compresses en WOFF2 automatiquement.
- Simplicite d'intégration : deux lignes dans le
<head>et c'est en place. - Mises a jour automatiques : Google optimisé les fichiers en continu (subsetting, compression).
Google Fonts : les pièges
- Problème RGPD : en janvier 2022, un tribunal allemand a condamne un site pour violation du RGPD. Motif : en chargeant Google Fonts depuis les serveurs de Google, le site transmettait les adresses IP de ses visiteurs a Google sans consentement. Amende initiale de 100 EUR, mais le précédent juridique est clair -- et les menaces de poursuites se multiplient en Europe. L'amende peut atteindre 250 000 EUR en cas de recidive.
- Double connexion : charger Google Fonts nécessité une connexion supplémentaire vers
fonts.googleapis.compuisfonts.gstatic.com. C'est un aller-retour réseau en plus (DNS + TLS handshake), soit 100 a 300 ms de delai. - Perte de contrôle : Google peut modifier les fichiers servis a tout moment. Vous ne maitrisez ni le caché, ni le format exact, ni le subset de caractères.
Self-hosting : la solution recommandée en 2026
Télécharger les fichiers WOFF2 depuis Google Fonts et les heberger sur votre propre serveur. C'est la meilleure pratique en 2026 pour trois raisons : conformite RGPD garantie (aucun transfert de données vers un tiers), performance supérieure (une seule connexion serveur), et contrôle total sur le caché et les fichiers.
L'outil google-webfonts-helper génère les fichiers WOFF2 et le code CSS @font-face en quelques clics. C'est la méthode que nous utilisons chez Transacts sur tous nos projets clients depuis 2023.
Typographie et SEO : l'impact sur les Core Web Vitals
Google ne classé pas les sites en fonction de leur choix typographique. Mais les polices d'ecriture ont un impact direct sur trois Core Web Vitals qui, eux, influencent votre classement. C'est un point que toute agence SEO sérieuse intégré dans ses audits techniques.
LCP (Largest Contentful Paint)
Si votre plus grand element visible est un bloc de texte, le navigateur attend que la police soit chargee pour le rendre. Chaque graisse supplémentaire retarde le LCP. Un site e-commerce mode que nous avons accompagne est passe de 4 polices a 2 : son LCP a baisse de 800 ms. Sur mobile en 4G, c'est la différence entre un "bon" et un "doit être amélioré" dans Google Search Console.
CLS (Cumulative Layout Shift)
Quand la police web remplacé la police de fallback (le fameux "flash" de texte), les dimensions du texte changent -- et tout le contenu en dessous se decale. C'est un shift de layout, et Google le mesure. La solution : font-display: swap combine avec des metriques de fallback ajustees (proprietes CSS size-adjust, ascent-override, descent-override) pour que la police de fallback occupé exactement le même espace que la police finale.
INP (Interaction to Next Paint)
Des fichiers de polices trop lourds monopolisent la bande passante et retardent le chargement des scripts d'interaction. Moins de Ko de polices = plus de bande passante pour le JavaScript critique.
Checklist performance typographique
- Format WOFF2 exclusivement : compression supérieure de 30 a 50 % par rapport au WOFF. Supporte par 98 % des navigateurs en 2026.
font-display: swap: affiche le texte immediatement avec la police de fallback, puis remplacé quand la police web est prete.- Preload critique :
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>sur 1 a 2 polices maximum (celle du corps et celle des titres). Au-dela, le preload encombre la file d'attente réseau. - Subset latin : ne chargez que les caractères nécessaires. Un fichier complet peut peser 400 Ko ; le subset latin descend a moins de 30 Ko -- une réduction de 90 %.
- Variable fonts : un seul fichier pour toutes les graisses. Si vous utilisez 3 poids ou plus d'une même famille, la variable font réduit le poids total de 40 a 60 %.
- Caché long : les fichiers de polices ne changent jamais. Configurez un caché HTTP d'au moins 1 an (
Caché-Control: public, max-age=31536000, immutable).
Typographie et accessibilite : ce que dit le WCAG
L'accessibilite typographique n'est pas un bonus éthique -- c'est une obligation légale dans de nombreux pays et un facteur d'expérience utilisateur qui concerne tout le monde. Voici les règles non negociables.
Taille minimale : 16px pour le corps de texte
Le WCAG ne fixe pas de taille minimale absolue, mais imposé que l'utilisateur puisse zoomer a 200 % sans perte de contenu (critere 1.4.4). En pratique, partir a 16px (1rem) pour le corps de texte est le standard. En dessous, la lisibilite chute sur mobile, et vous forcez l'utilisateur a zoomer -- ce que 80 % des visiteurs ne feront pas. Ils partiront.
Interligne et espacement
Le WCAG 1.4.12 imposé que l'utilisateur puisse modifier sans perte de contenu : l'interligne a au moins 1,5 fois la taille de la police, l'espacement des lettres a au moins 0,12 fois la taille de la police, et l'espacement des mots a au moins 0,16 fois la taille de la police. En CSS : line-height: 1.5; letter-spacing: 0.12em; word-spacing: 0.16em;.
Contraste texte/fond
Le niveau AA du WCAG exige un ratio de contraste d'au moins 4,5:1 pour le texte courant et 3:1 pour les grands textes (18px bold ou 24px regular et au-dessus). Un texte gris clair (#999) sur fond blanc (#FFF) a un ratio de 2,85:1 -- en dessous du minimum. C'est pourtant un pattern que nous voyons sur un site sur trois.
Polices et dyslexie
Environ 10 % de la population est dyslexique. Trois polices sont spécifiquement conçues pour faciliter la lecture : OpenDyslexic (caractères lestes en bas pour éviter les rotations mentales), Lexend (disponible sur Google Fonts, optimisée pour la vitesse de lecture), et Atkinson Hyperlegible (conçue par le Braille Institute, avec une distinction maximale entre caractères similaires). Pour un site grand public, privilegiez les polices sans-serif a formés ouvertes et grande x-height : Inter, Source Sans 3, ou Lexend.
Ce qu'il faut proscrire
- Texte en image : Google ne peut pas le lire, les lecteurs d'écran non plus, et l'utilisateur ne peut pas zoomer.
- Texte justifie (
text-align: justify) : créé des espaces irreguliers entre les mots qui compliquent la lecture pour les personnes dyslexiques. user-scalable=0dans le viewport : empêche le zoom, viole le WCAG 1.4.4, et Google peut penaliser votre site pour ca.- Lignes de plus de 80 caractères : la largeur idéale est de 45 a 75 caractères par ligne. Au-dela, l'oeil perd la ligne.
Les 7 erreurs typographiques les plus courantes
Voici les problèmes que nous detectons le plus souvent en audit technique chez nos clients.
1. Charger trop de graisses. Le record chez un de nos clients : 7 poids de Roboto (Thin, Light, Regular, Medium, Semi-bold, Bold, Black). Il en utilisait 3 dans son CSS. Les 4 autres pesaient 280 Ko pour rien. Règles : listez les graisses réellement utilisées dans vos feuilles de style avant de les charger.
2. Utiliser plus de 2 familles. Deux polices, c'est un système typographique. Trois, c'est du bruit visuel. Quatre ou plus, c'est un site qui ne sait pas ce qu'il est. Exception : les polices monospace pour les blocs de code, qui comptent comme un outil fonctionnel, pas comme un choix esthetique.
3. Charger Google Fonts via @import dans le CSS. C'est le piège classique. Le navigateur doit d'abord télécharger votre fichier CSS, puis découvrir le @import, puis télécharger la feuille de style Google Fonts, puis télécharger les fichiers de polices. Quatre étapes en cascade. Solution : un <link> dans le <head>, ou mieux, le self-hosting.
4. Oublier font-display: swap. Sans cette propriete, le navigateur peut masquer le texte pendant 3 secondes en attendant que la police soit chargee. Vos visiteurs voient une page blanche -- et partent. Ajoutez font-display: swap dans chaque declaration @font-face.
5. Ignorer la police de fallback. Écrire font-family: "Montserrat" sans fallback est une bombe a retardement. Si la police ne charge pas, le navigateur utilisé sa police par défaut (souvent Times New Roman). Toujours specifier une stack complète : font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
6. Charger le jeu de caractères complet. Une police avec support Cyrillique, Grec, Vietnamien et Latin pese 4 a 5 fois plus que le subset Latin seul. Si votre site est en français, vous n'avez besoin que du Latin etendu (avec les accents). Tout le reste est du poids mort.
7. Ne pas tester sur mobile. Une police elue "plus belle de l'année" sur un écran 27 pouces peut devenir illisible a 14px sur un iPhone SE. Testez toujours vos choix typographiques sur de vrais appareils mobiles, en conditions réelles (4G, écran 6 pouces, luminosite exterieure).
Questions fréquentes sur les polices d'ecriture
Quelle est la différence entre une police et une fonte ?
Une police d'ecriture designe une famille typographique complète : Roboto, Inter, Garamond. Une fonte designe une variante spécifique de cette famille : Roboto Bold 16px, Inter Italic 400. En pratique sur le web, le terme "police" est utilisé dans les deux sens, et c'est parfaitement acceptable. Cette distinction, heritee de la typographie traditionnelle ou chaque graisse et chaque corps constituait physiquement une fonte distincte coulee dans le plomb, s'est largement perdue avec le numerique. Les navigateurs et les logiciels de design utilisent aujourd'hui le terme "font-family" pour designer la famille, et "font-weight" ou "font-style" pour les variantes. Concrètement, quand vous choisissez une typographie pour votre site, vous selectionnez une famille puis vous chargez les graisses dont vous avez besoin. 3 a 4 fontes suffisent généralement pour un site professionnel, chaque fichier supplémentaire ajoutant 15 a 50 Ko qui ralentissent le LCP.
Combien de polices utiliser sur un site web ?
Deux polices maximum : une pour les titres, une pour le corps de texte. Au-dela, vous alourdissez le temps de chargement (chaque police supplémentaire represente 20 a 80 Ko) et vous diluez l'identité visuelle. Si vous utilisez une seule police en variant les graisses (regular, semi-bold, bold), c'est encore mieux pour la performance.
Google Fonts est-il gratuit ?
Oui, Google Fonts est entièrement gratuit et open source. Vous pouvez utiliser les polices sur n'importe quel projet commercial sans licence. Cependant, attention au RGPD : charger les polices depuis les serveurs de Google transmet l'adresse IP de vos visiteurs a Google. Pour être conforme, hebergez les polices sur votre propre serveur.
Quelle est la meilleure police pour un site web en 2026 ?
Il n'existe pas de police universelle. Inter est la plus populaire au monde (414 milliards de requetes sur Google Fonts en un an), idéale pour les interfaces et les sites corporate. Roboto reste essentiel pour les applications. Pour un site a forte identité de marque, explorez les serifs modernes comme Playfair Display. Le critere décisif : la lisibilite sur mobile a 16px.
Comment optimiser les polices pour le SEO ?
Trois leviers principaux : utilisez le format WOFF2 exclusivement (compression supérieure de 30 a 50 %), ajoutez font-display: swap dans votre @font-face, et limitez-vous a 2-3 graisses par police. Ces optimisations impactent directement le LCP et le CLS, deux Core Web Vitals qui influencent le classement Google.
Le self-hosting est-il meilleur que Google Fonts ?
En 2026, oui. Le self-hosting offre trois avantages : conformite RGPD garantie, performance supérieure (une seule connexion serveur), et contrôle total sur le caché et le format. Le seul inconvenient est la maintenance des mises a jour de polices, mais c'est un compromis largement favorable pour la majorite des sites.
Quelles polices sont les plus lisibles pour les personnes dyslexiques ?
Trois polices sont spécifiquement conçues pour la dyslexie : OpenDyslexic (lettres lestees), Lexend (optimisée pour la vitesse de lecture, disponible sur Google Fonts), et Atkinson Hyperlegible (distinction maximale entre caractères similaires). Pour un site grand public, une police avec une grande x-height et des compteurs ouverts (Inter, Source Sans 3) offre un bon compromis entre esthetique et lisibilite universelle.