Typographie site web : comment choisir la bonne police pour ton site

Tu as passé des semaines sur ton site, tu es content du résultat, et pourtant les visiteurs arrivent, scrollent deux secondes et repartent. Tes couleurs, ton logo, tes photos : tout est en place.

Le problème vient souvent d’un réglage auquel personne ne pense : la police, choisie en trente secondes dans un menu déroulant parce qu’elle avait l’air jolie.

Une typographie ne sert pas juste à écrire. Elle parle avant même que ton visiteur ait lu un mot : elle dit si tu es sérieux, fun, moderne ou classique, et surtout elle décide si les gens vont lire ce que tu as à dire.

Chez Palmsquare, pour nos clients je choisis des typographies pour des sites clients toutes les semaines, et il m’arrive encore de passer vingt minutes à hésiter entre deux graisses. Autant te dire que j’ai un avis sur la question.

Dans cet article, je te partage ce que chaque famille de police raconte, ma méthode pour choisir, six duos gratuits qui fonctionnent, les réglages qui font la différence et le piège des licences qui a coûté cher à un confrère.

Si tu ne dois retenir que 3 choses :

• Deux polices maximum : une pour les titres, une pour le texte.
• 16 px minimum pour le corps de texte, sur mobile comme sur desktop.
• La licence avant tout : une police gratuite n’est pas forcément utilisable pour ton activité.

Le reste, c’est de l’ajustement. Mais avec ces trois éléments, tu fais déjà mieux que la majorité des sites que je vois passer.

Pourquoi la typographie de ton site web compte autant

Imagine une marque de luxe écrite en Comic Sans, ou un cabinet d’avocats avec une police de jeu vidéo. Ça paraît caricatural, et pourtant des milliers de sites font la même erreur en plus discret, avec le même résultat : un décalage entre ce qu’ils vendent et ce que leur police raconte.

La police envoie un signal avant le message

Le cerveau associe les formes aux émotions sans qu’on lui demande son avis : une police fine et épurée dit « moderne », une police ronde dit « accessible », une serif dit « établi, sérieux, ça existe depuis longtemps ». C’est comme les vêtements.
Tu ne vas pas consulter un avocat en survêtement, et ce n’est pas une question de compétence, c’est une question de code.

Ensuite vient la lisibilité, qui est la fonction première de tout ça.

Si ton visiteur lutte pour déchiffrer ton texte, il s’en va et il ne revient pas. Une bonne typographie, c’est aussi une hiérarchie : le contraste entre un titre, un sous-titre et un paragraphe indique où commencer à lire et où continuer, sans qu’on y pense.

Et puis il y a le référencement, de façon indirecte : Google ne juge pas la forme de tes lettres, mais un site lisible retient ses visiteurs plus longtemps et leur fait consulter plus de pages. Ces signaux comptent.

Chez Palmsquare : la typo se décide dans la charte graphique, avant la première maquette. Choisir une police une fois le design terminé, c’est repeindre une maison déjà meublée.

Les 5 familles de polices et ce qu’elles racontent

Petit point vocabulaire avant d’aller plus loin, parce que tout le monde mélange (moi la première) :

• La typographie, c’est la famille, comme Inter ou Montserrat.
• La police, c’est une version précise de cette famille, comme Inter Bold ou Montserrat Light.

Dans la suite, j’utilise les deux mots comme tout le monde, mais au moins tu as l’info.

Il existe des milliers de polices, mais elles se rangent dans cinq grandes familles. Savoir ce que chacune évoque, c’est déjà 80 % du travail de sélection :

Le principe à retenir derrière ce tableau : sur un site web, seules les serif et les sans serif conviennent au corps de texte. Les script et les display se réservent à un logo ou à un gros titre, jamais à un paragraphe.

Les serif, ce sont les polices avec des petits pieds au bout des lettres, les empattements. Elles viennent de la gravure romaine et transmettent quelque chose de puissant : la tradition.

On les retrouve chez Vogue, Rolex, Dior, dans les journaux et les livres. Imagine Rolex avec une police futuriste : tout l’univers s’effondre, parce que Rolex ne vend pas des montres, elle vend un héritage.

Les sans serif, sans empattements, sont devenues le standard du web pour une raison simple : elles sont plus lisibles sur écran, surtout sur smartphone.

Google a d’ailleurs abandonné sa serif en 2015 pour une sans serif, parce que son logo devait fonctionner sur une montre connectée comme sur une télé.
Burberry, Saint Laurent et Balenciaga ont suivi le même chemin.

Les script imitent l’écriture manuscrite et donnent instantanément une sensation humaine, chaleureuse, artisanale : Instagram, Coca-Cola, les marques de beauté, les faire-part de mariage. Mais attention : un logo, une signature, un titre court, et c’est tout. Un paragraphe en script est illisible.

Les display fonctionnent presque comme une illustration : elles ne cherchent pas la lisibilité, elles cherchent à provoquer quelque chose.

À réserver aux gros titres, avec une réserve : une display à la mode aujourd’hui peut paraître datée dans deux ans. Si le sujet t’intéresse, on a passé en revue les tendances webdesign 2026 dans un article dédié.

Les monospace donnent la même largeur à chaque caractère, comme une machine à écrire : aspect brut, technique, codé. Parfait pour une marque tech ou un studio créatif qui veut un côté atelier.

Ma méthode en 5 étapes pour choisir la typographie de ton site web

Voilà pour la théorie. Maintenant, la méthode que j’applique sur chaque projet :

1️⃣ Pars de ta cible et de ton message, pas de tes goûts :

À qui tu t’adresses ? Un public senior appréciera une police classique et un texte plus grand, un public jeune et tech acceptera quelque chose de plus épuré. Et quel sentiment tu veux provoquer : sérieux, ludique, premium, accessible ?

2️⃣ Choisis d’abord ta police de texte :

C’est celle qu’on va lire le plus, elle doit rester confortable pendant plusieurs minutes. Une sans serif simple ou une serif très lisible. Vérifie aussi qu’elle gère bien les accents français : certaines polices créées à l’étranger ont un « é » bricolé, et tu t’en rends compte après la mise en ligne.

3️⃣ Trouve-lui un partenaire pour les titres :

Il doit se démarquer, contraster un peu, mais s’accorder avec ta police principale. Une serif élégante sur une sans serif sobre, c’est le duo classique qui fonctionne presque à tous les coups.

4️⃣ Limite-toi à deux polices :

Une pour les titres, une pour le texte. Trois au grand maximum si tu as des légendes ou des citations. Au-delà, ton site ressemble à une affiche de kermesse.

5️⃣ Teste avant de valider :

Crée une page de test avec un titre, des sous-titres, un paragraphe, une liste, un bouton. Regarde-la sur ordinateur et sur mobile, puis montre-la à deux ou trois personnes extérieures. Si la majorité trouve ça difficile à lire, ce n’est pas la bonne police, même si tu l’adores.

Chez Palmsquare : notre site tourne avec Satoshi, une sans serif géométrique trouvée sur Fontshare et hébergée sur notre propre serveur. Elle dit « propre et actuel » sans dire « froid », c’est exactement ce qu’on voulait.

6 duos de polices gratuits qui fonctionnent

C’est la question qu’on me pose le plus : « tu me conseilles quoi ? ». Voici les associations que j’utilise ou que je recommande, toutes gratuites et utilisables commercialement, disponibles sur Google Fonts ou Fontshare :

Le dernier n’est pas vraiment un duo, et c’est volontaire. Utiliser une seule famille en jouant sur les graisses, Bold pour les titres et Regular pour le texte, c’est la solution la plus simple et la plus sûre quand on débute. Énormément de sites tournent uniquement en Inter ou en Montserrat, et ils sont parfaitement pros.

Je t’entends déjà : « mais Marie-Rose, avec une police aussi classique, je ne vais pas me démarquer ». 😗

Rassure-toi. Quand tu regardes de près, 90 % des identités visuelles qui fonctionnent utilisent des polices relativement simples, mais bien combinées. Ce qui compte, ce n’est pas d’en mettre plein la vue : c’est la cohérence.

Pour associer deux polices sans te tromper, trois règles suffisent :

• Du contraste : une serif avec une sans serif, ou une graisse forte avec une graisse légère. Deux polices trop proches se gênent.
• De la hiérarchie : on doit distinguer instantanément le titre du texte.
• De la cohérence : les mêmes polices aux mêmes endroits sur tout le site, tous les H2 identiques, tous les paragraphes identiques.

Et si tu veux élargir ta sélection, on a listé nos polices d’écriture modernes préférées dans un article à part.

👉 Pour tester des associations avant de tout télécharger, Fontpair propose des duos prêts à l’emploi et Fontjoy te les montre en contexte.

Et pour identifier la police d’un site que tu aimes, l’extension WhatFont fait le travail en un survol, Fonts Ninja te dit en plus où la télécharger.

Les réglages qui changent tout

Choisir les bonnes polices, c’est bien. Les régler correctement, c’est ce qui sépare un site pro d’un site « presque ». Et c’est là que beaucoup de sites se plantent alors qu’ils avaient fait les bons choix.

La taille du texte : 16 px minimum sur écran, 17 ou 18 px si ta cible est plus âgée ou si tes contenus sont longs. Ce n’est pas une norme légale, c’est la taille par défaut des navigateurs et le consensus de tout le métier : en dessous, on plisse les yeux sur mobile.

Pour la hiérarchie complète des titres, desktop et mobile, on a détaillé quelle taille de police utiliser dans un article dédié, avec le tableau exact qu’on applique à l’agence.

L’interligne : c’est le réglage le plus négligé. Trop serré, c’est illisible. Trop large, ça fait amateur et ça mange de l’espace. Vise 1,4 à 1,6 fois la taille de la police, soit un interligne de 24 à 26 px pour un texte en 16 px.

La longueur de ligne : évite les lignes qui font toute la largeur de l’écran, l’oeil se perd en revenant à la ligne. L’idéal se situe entre 45 et 75 caractères par ligne, soit une colonne de texte de 600 à 700 px de large sur ordinateur.

Le contraste : c’est le seul réglage sur lequel tu n’as pas à donner ton avis, parce qu’il est normé. Le référentiel WCAG et le RGAA français imposent un ratio de contraste d’au moins 4,5:1 entre ton texte et ton fond. Noir sur blanc passe sans problème. Gris clair sur blanc, c’est élégant sur une maquette et illisible sur un téléphone en plein soleil, et une graisse Light sur du texte courant produit le même effet : garde Light et Thin pour les titres.

Mon astuce terrain : passe tes couleurs dans WebAIM Contrast Checker avant de valider ta charte, pas après. Ça prend deux secondes, et ça t’évite de tout reprendre une fois le site intégré.

Les unités : raisonne en REM plutôt qu’en pixels pour tes tailles de texte, ton site s’adapte alors aux réglages du navigateur de tes visiteurs. J’ai détaillé la différence dans mon article sur les pixels ou les REM.

Intégrer tes polices sur WordPress sans plomber ton site

C’est la partie que les articles sur la typographie oublient toujours. Choisir une belle police ne sert à rien si elle est mal intégrée : une mauvaise intégration te coûte en vitesse de chargement, et parfois en tranquillité juridique.

Configure tes polices globalement

Sur Elementor, ça se passe dans Réglages du site, puis Polices globales : tu définis ta police de titres et ta police de texte une seule fois, chaque nouvelle page les utilise automatiquement, et si tu changes d’avis, tout le site suit. C’est la base d’un design system cohérent.

Héberge tes polices sur ton propre serveur.

Par défaut, WordPress et Elementor chargent les Google Fonts depuis les serveurs de Google, ce qui ajoute une requête externe et ralentit le chargement.
Elementor propose l’hébergement local dans ses réglages avancés, et une extension comme OMGF le fait automatiquement.

Il y a aussi un angle RGPD, et je préfère te le donner avec ses nuances plutôt que de te faire peur. En 2022, un tribunal de Munich a condamné un site à verser 100 € à un visiteur, parce que l’appel aux Google Fonts transmettait son adresse IP à Google.

Depuis, le contexte a beaucoup évolué : la vague de mises en demeure qui a suivi a été jugée abusive, un accord d’adéquation entre l’Europe et les États-Unis est entré en vigueur en 2023, et la CNIL ne s’est jamais prononcée sur le sujet.

Pour le dire autrement : tu n’es pas hors la loi si tu charges une Google Font. Mais l’auto-hébergement reste la solution la plus propre, pour deux raisons qui ne se discutent pas : ton site charge plus vite, et tu as une ligne de moins à justifier dans ta politique de confidentialité.

Limite les graisses que tu charges

Chaque graisse (Light, Regular, Medium, Bold) est un fichier à télécharger : deux polices avec cinq graisses chacune, c’est dix fichiers et un site qui rame.

Charge uniquement celles que tu utilises vraiment, en général Regular et Bold, et privilégie le format WOFF2, le plus léger, que Google Fonts et Fontshare fournissent.

Une fois tout ça en place, teste la vitesse de ton site : les polices sont souvent responsables d’un mauvais score de chargement, et c’est l’un des points les plus faciles à corriger.

Le piège des licences

Une histoire vraie, racontée par un confrère qui crée des sites depuis vingt ans.

À ses débuts, il tombe amoureux d’une police trouvée sur internet et l’utilise partout : site, logo, cartes de visite, flyers. Quelques mois plus tard, un courrier recommandé.

La police est protégée par une licence, il l’utilise illégalement, il doit payer ou tout arrêter. Le montant était considérable pour une jeune entreprise. Résultat : refonte du site, et plusieurs centaines de cartes de visite à la déchetterie.

Les polices sont soumises à des licences, exactement comme les photos ou la musique. Ce n’est pas anormal, un créateur de police a des droits sur son travail. Mais ça veut dire qu’avant d’adopter une police, tu vérifies deux choses : qu’elle autorise un usage commercial, et qu’elle autorise un usage web. Ce sont deux licences différentes.

• ✅ Google Fonts : licence libre, usage commercial autorisé, sur tous tes supports. Aucun risque.
• ✅ Fontshare : gratuit, usage commercial autorisé, et des polices plus originales.
• ⚠️ Adobe Fonts : inclus dans Creative Cloud, mais uniquement tant que ton abonnement est actif.
• 🚩 DaFont et les sites similaires : un mélange de polices gratuites, « gratuites pour usage personnel uniquement » et payantes. Lis la licence de chacune.

Méfie-toi aussi des générateurs de logo en ligne : certaines de leurs polices ont une licence limitée à leur plateforme. Si tu bâtis ton identité dessus et que tu veux la réutiliser sur ton site WordPress ou tes supports imprimés, tu peux te retrouver bloqué.

En résumé

La typographie n’est pas un détail : c’est la voix visuelle de ton site web, celle qui dit qui tu es avant que ton visiteur ait lu un mot.

Pars de ta cible, choisis une police de texte ultra lisible, trouve-lui un partenaire pour les titres, limite-toi à deux, règle tes tailles et ton interligne, héberge tes polices en local et vérifie les licences. Avec ça, tu es déjà devant 80 % des sites.

Et la prochaine fois que tu choisis une police, ne te demande pas seulement si elle est jolie. Demande-toi ce qu’elle fait ressentir.

Tu veux une typographie choisie pour ta marque et intégrée dans une identité visuelle complète ? Chez Palmsquare, chaque projet démarre par la charte graphique, typo comprise, avant la première maquette. Discutons de ton projet. 🌴

FAQ