Serif, sans serif, manuscrite : comment choisir la bonne typographie pour un site, avec une méthode en cinq étapes et des règles de lisibilité chiffrées. Aussi : polices gratuites ou payantes, intégration sans ralentir le site et typographie de logo.
Pour choisir la bonne typographie d’un site, on part de sa fonction avant son style : une police de texte très lisible à l’écran, en 16 pixels minimum, bien contrastée et bien espacée, puis une police de titre qui exprime la personnalité de la marque. Deux familles suffisent dans la grande majorité des cas. On les teste ensuite sur le vrai contenu, sur mobile, et on les charge de façon légère pour ne pas ralentir le site.
Sur un site web, l’essentiel de ce que lit un visiteur, c’est du texte. La typographie décide s’il le lit vraiment ou s’il le survole, et elle dit beaucoup de votre marque avant même qu’il ait compris ce que vous vendez. On reprend ici les bases (familles de polices et usages), une méthode en cinq étapes pour choisir, les règles de lisibilité chiffrées, la question des polices gratuites ou payantes, l’intégration technique, et le cas particulier de la typographie d’un logo.
- Pourquoi la typographie compte-t-elle autant en web design ?
- Police, fonte, typographie : de quoi parle-t-on ?
- Quelles sont les grandes familles de polices et leurs usages ?
- Comment choisir la bonne typographie en 5 étapes ?
- Quelles règles de lisibilité appliquer sur un site ?
- Polices gratuites ou payantes : que choisir ?
- Comment intégrer une police sans ralentir le site ?
- Comment choisir la typographie d’un logo ?
- Quelles erreurs éviter ?
- Questions fréquentes
- Sources
Pourquoi la typographie compte-t-elle autant en web design ?
La typographie joue trois rôles à la fois sur un site :
- Faire lire : un texte trop petit, trop serré ou trop pâle fatigue et fait fuir, même s’il est excellent. Une mise en forme soignée rend au contraire la lecture plus confortable.
- Hiérarchiser : les tailles, les graisses et les espacements indiquent ce qui est un titre, un intertitre, un paragraphe, un bouton. Ils guident l’œil dans la page, comme on l’explique dans notre article sur la hiérarchie visuelle en web design.
- Exprimer une personnalité : une même phrase ne produit pas le même effet en Garamond, en Helvetica ou en police manuscrite. Sur une maquette en noir et blanc, sans photo ni couleur, c’est même souvent la typographie seule qui donne le ton du site.
Bien choisie, elle se fait oublier au profit du message. Mal choisie, elle crée une gêne diffuse que le visiteur ne sait pas nommer, mais qui l’incite à partir.
Police, fonte, typographie : de quoi parle-t-on ?
On emploie souvent ces mots l’un pour l’autre. Pour être précis :
- la typographie est l’art de choisir et d’agencer les caractères (polices, tailles, espacements, alignements) pour rendre un texte lisible et expressif ;
- une police (ou famille de caractères) est un ensemble de caractères qui partagent le même dessin : Arial, Times New Roman, Verdana ou Roboto sont des polices ;
- une fonte est une déclinaison précise de cette police : Roboto gras italique est une fonte de la famille Roboto ;
- la graisse désigne l’épaisseur du trait (light, regular, bold…), souvent notée de 100 à 900 en CSS.
Quelles sont les grandes familles de polices et leurs usages ?
Il existe des centaines de milliers de polices, mais elles se rangent dans quelques grandes familles. Connaître leurs usages évite la plupart des mauvais choix.
| Famille | Signe distinctif | Image renvoyée | Usage conseillé sur le web | Exemples |
|---|---|---|---|---|
| Avec empattements (serif) | Petites extensions au bout des traits | Sérieux, tradition, élégance, confiance | Titres, et textes longs si la police est dessinée pour l’écran | Garamond, Times New Roman, Merriweather |
| Sans empattements (sans serif) | Traits nets, sans extensions | Modernité, clarté, neutralité | Texte courant, interfaces, boutons | Helvetica, Arial, Inter, Roboto |
| Manuscrites (script) | Imitent l’écriture à la main, lettres parfois liées | Personnel, artisanal, chaleureux | Quelques mots en accroche, jamais en texte courant | Brush Script, Lucida Handwriting |
| Décoratives (fantaisie) | Formes très marquées ou inhabituelles | Créatif, décalé, événementiel | Un titre ou un logo, avec parcimonie | Jokerman, Gigi |
| À chasse fixe (monospace) | Tous les caractères ont la même largeur | Technique, régulier, précis | Code, données, touches d’ambiance « tech » | Courier New, Lucida Console |
Longtemps, on a considéré les polices sans empattements comme les seules lisibles à l’écran, parce que les écrans basse résolution rendaient mal les empattements fins. Avec les écrans actuels, une police serif bien dessinée pour le web se lit très bien en texte courant. Le critère n’est donc plus la famille, mais la qualité du dessin et sa taille d’affichage.
Comment choisir la bonne typographie en 5 étapes ?
Étape 1 : partir de la fonction
Avant de parcourir des catalogues pendant des heures, posez la question la plus simple : est-ce lisible, à la taille où ce sera affiché ? Pour la police de texte, vérifiez :
- une hauteur d’x généreuse (la hauteur des minuscules sans hampe, comme le « x »), qui rend le texte lisible en petite taille ;
- des lettres bien distinctes : le « I » majuscule, le « l » minuscule et le chiffre « 1 » ne doivent pas se confondre ;
- la présence de tous les caractères du français (accents, « œ », guillemets « », espaces insécables) et, si besoin, d’autres langues ;
- plusieurs graisses et un italique, pour pouvoir hiérarchiser sans changer de police.
Les polices classiques restent très demandées pour une bonne raison : leur familiarité les rend faciles à lire. Chercher l’originalité dans le texte courant se paie presque toujours en confort de lecture.
Étape 2 : définir l’émotion à transmettre
C’est ici que la police de titre entre en jeu. Listez trois adjectifs qui décrivent votre marque (par exemple « artisanal, chaleureux, local » ou « précis, technique, fiable ») et cherchez des polices qui les incarnent. Un titre imposant, en grande taille et en graisse forte, qui occupe toute la largeur de l’écran, fonctionne très bien pour une marque créative. Un cabinet d’avocats sera mieux servi par une serif sobre. La typographie doit rester cohérente avec votre identité visuelle : logo, supports imprimés, réseaux sociaux.
Étape 3 : associer deux polices, pas plus
La plupart des sites réussis utilisent une police pour les titres et une pour le texte, parfois une seule famille déclinée en plusieurs graisses. Au-delà, l’ensemble devient confus et plus lourd à charger. Les associations qui fonctionnent reposent sur le contraste, pas sur la ressemblance :
- titres serif et texte sans serif (le duo le plus courant) ;
- titres dans une sans serif expressive et texte dans une sans serif neutre ;
- quelques mots en manuscrite pour une accroche, avec une sans serif pour tout le reste ;
- titres en slab serif (empattements rectangulaires) et texte sans serif pour un ton plus robuste.
Évitez d’associer deux polices presque identiques : l’œil perçoit une différence sans comprendre pourquoi, ce qui donne une impression d’erreur.
Étape 4 : tester en situation réelle
Une police séduisante dans un catalogue peut décevoir sur une vraie page. Testez vos candidates avec vos vrais contenus (un paragraphe long, un titre sur deux lignes, un bouton, un tableau de prix, des chiffres), sur un téléphone, sur un écran d’ordinateur standard, et sur plusieurs navigateurs. Notez ce qui fonctionne et ce qui ne fonctionne pas. Ce travail est un peu fastidieux, mais il évite de devoir tout reprendre après la mise en ligne.
Étape 5 : construire un système souple
Une fois les polices choisies, définissez une échelle de tailles (texte, petit texte, H3, H2, H1), les interlignes et les graisses de chaque niveau, et déclarez-les une seule fois dans le thème ou la feuille de style, sous forme de variables. Vous pourrez ainsi faire évoluer votre typographie sans reprendre chaque page. Et n’hésitez pas à la faire évoluer : de nombreuses marques retravaillent leur typographie au fil de leurs refontes d’identité.
Quelles règles de lisibilité appliquer sur un site ?
Les règles d’accessibilité du W3C (WCAG) donnent des repères chiffrés, utiles pour tous les visiteurs et pas seulement pour ceux qui ont un handicap :
| Réglage | Repère | Référence |
|---|---|---|
| Taille du texte courant | 16 px au minimum, soit la taille par défaut des navigateurs | Taille par défaut documentée par MDN |
| Contraste texte et fond | 4,5:1 minimum pour le texte courant, 3:1 pour les grands textes (18 points, ou 14 points en gras) | WCAG, critère 1.4.3 (niveau AA) |
| Interligne | Environ 1,5 fois la taille du texte | WCAG, critères 1.4.8 (AAA) et 1.4.12 |
| Longueur de ligne | 80 caractères au maximum | WCAG, critère 1.4.8 (niveau AAA) |
| Résistance aux espacements | Le site doit rester utilisable si l’utilisateur augmente l’interligne à 1,5, l’espace après paragraphe à 2 fois la taille, l’espacement des lettres à 0,12 et celui des mots à 0,16 fois la taille | WCAG, critère 1.4.12 (niveau AA) |
Ajoutez quelques règles de bon sens : pas de texte courant entièrement en majuscules, pas de gris clair sur fond blanc « pour faire élégant », peu d’italique sur de longs passages, alignement à gauche plutôt que justifié (qui crée des espaces irréguliers entre les mots), et des tailles exprimées en unités relatives (rem) pour respecter le réglage de taille choisi par l’utilisateur dans son navigateur. Pour aller plus loin sur ces critères, consultez notre guide pratique de l’accessibilité web WCAG.
Polices gratuites ou payantes : que choisir ?
Les deux options sont valables. Tout dépend du degré de singularité recherché et du budget.
Les polices libres : Google Fonts et Font Squirrel
Le catalogue Google Fonts est distribué principalement sous licence SIL Open Font License, certaines polices sous licence Apache 2 : on peut les utiliser gratuitement, y compris dans un cadre commercial, et les héberger soi-même. Font Squirrel sélectionne également des polices utilisables commercialement. Avantages : gratuité, qualité souvent excellente, large choix de graisses. Inconvénient : les polices les plus populaires sont partout, ce qui limite la singularité de votre site.
Les catalogues par abonnement : Adobe Fonts
Adobe Fonts (anciennement Typekit) donne accès à une très large bibliothèque de polices de fonderies professionnelles, utilisables pour des projets personnels et commerciaux, y compris sur un site via un « projet web ». C’est intéressant si vous avez déjà un abonnement Adobe, mais les polices sont servies par Adobe et liées à cet abonnement : vérifiez les conditions avant d’en faire la police d’une identité durable.
Les polices achetées auprès d’une fonderie
Acheter une licence auprès d’une fonderie indépendante donne accès à des polices plus rares, qui distinguent réellement une marque. Attention : la licence « bureau » (pour vos documents) et la licence « web » (pour votre site) sont souvent vendues séparément, et la licence web peut dépendre du nombre de visites. Lisez les conditions avant d’intégrer la police.
Un mot sur les sites comme Dafont : on y trouve de belles polices décoratives, mais beaucoup sont réservées à un usage personnel. Pour un site d’entreprise, vérifiez la licence de chaque police, ou contactez son auteur. Les outils d’identification comme WhatTheFont aident à retrouver le nom d’une police repérée sur une image.
Comment intégrer une police sans ralentir le site ?
Chaque fichier de police est une ressource à télécharger avant que le texte ne s’affiche dans sa forme définitive. Mal intégrées, les polices retardent l’affichage et font « sauter » la mise en page. Les recommandations de Google (web.dev) :
- Utilisez le format WOFF2, le mieux compressé et reconnu par tous les navigateurs actuels.
- Hébergez les polices sur votre propre serveur plutôt que de les appeler depuis un service tiers : on évite une connexion supplémentaire vers un autre domaine. Cela évite aussi de transmettre l’adresse IP de vos visiteurs à ce service.
- Limitez le nombre de fichiers : chaque graisse et chaque italique est un fichier. Deux familles en trois ou quatre fontes suffisent généralement. Une police variable, qui contient toutes les graisses dans un seul fichier, peut être plus économique.
- Réduisez les caractères (subsetting) aux jeux dont vous avez besoin, par exemple le latin étendu pour le français.
- Utilisez
font-display: swappour que le texte s’affiche immédiatement avec une police de secours, puis bascule vers votre police une fois chargée. - Préchargez la police principale avec
<link rel="preload">pour qu’elle soit demandée dès le début du chargement.
@font-face {
font-family: "Inter";
src: url("/fonts/inter-latin.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
}Comment choisir la typographie d’un logo ?
La typographie d’un logo obéit à des contraintes différentes de celle d’un site : elle doit rester reconnaissable du panneau de façade jusqu’à l’icône d’onglet. Une serif soignée évoque souvent l’intemporalité et la tradition, une sans serif grasse la force et la confiance. Six conseils :
- Privilégiez la lisibilité : un contraste fort entre texte et fond, et des scripts aérés (espacement des lettres, hauteur de ligne). Évitez les majuscules en police manuscrite, presque illisibles.
- Associez une police fine à un symbole ou un monogramme : les polices très fines disparaissent en petite taille (photo de profil, favicon, impression). Le symbole prend alors le relais.
- Méfiez-vous des polices très détaillées : leurs détails se perdent en réduction, et votre logo perd sa personnalité et sa lisibilité.
- Distinguez le nom et le slogan : une police différente, choisie pour s’accorder avec la première (par exemple un nom en serif et un slogan en sans serif), crée une hiérarchie claire.
- Ne comptez pas sur la couleur : le logo doit fonctionner en noir et blanc. La couleur vient après le choix de la police.
- Restez simple : un logo sera imprimé, agrandi, réduit, décliné. Plusieurs polices dans un même logo le rendent confus.
Le site n’a pas besoin de reprendre la police du logo, qui est souvent trop marquée pour du texte. Il doit en revanche s’accorder avec elle. Notre article sur ce qu’il faut faire et éviter dans la création d’un logo d’entreprise complète ces conseils, et notre équipe peut prendre en charge l’ensemble dans le cadre d’une création d’identité visuelle, logo et système typographique compris.
Quelles erreurs éviter ?
- Multiplier les polices : au-delà de deux familles, le site paraît désordonné et se charge plus lentement.
- Utiliser une police décorative ou manuscrite pour le texte courant.
- Choisir un texte trop petit ou trop pâle parce que c’est « plus fin » sur la maquette vue sur un grand écran.
- Oublier les caractères du français : certaines polices gratuites n’ont pas tous les accents, et le navigateur les remplace par une autre police au milieu d’un mot.
- Charger toutes les graisses disponibles alors que le site n’en utilise que deux.
- Utiliser une police sans vérifier sa licence, en particulier pour un usage commercial ou sur le web.
- Choisir une police uniquement parce qu’elle est à la mode : ce qui convient à un portfolio minimaliste peut sembler vide sur un site très visuel, et inversement. Aucune police ne convient à tous les sites.
Questions fréquentes
Quelle est la meilleure police pour un site web ?
Il n’y en a pas une seule. Pour le texte courant, une sans serif conçue pour l’écran (Inter, Roboto, Source Sans, par exemple) est un choix sûr. La meilleure police est celle qui reste lisible sur mobile et qui correspond à la personnalité de votre marque.
Combien de polices utiliser sur un site ?
Deux au maximum dans la plupart des cas : une pour les titres, une pour le texte. Une seule famille déclinée en plusieurs graisses peut suffire.
Quelle taille de police choisir pour le texte ?
16 pixels au minimum pour le texte courant, souvent un peu plus (17 ou 18 pixels) pour les polices à petite hauteur d’x ou les articles longs. Exprimez-la en rem pour respecter les réglages du visiteur.
Peut-on utiliser n’importe quelle police gratuite sur un site professionnel ?
Non. « Gratuite » ne veut pas dire « libre pour un usage commercial ». Les polices de Google Fonts le sont, sous réserve de leur licence ; beaucoup de polices de sites comme Dafont sont limitées à un usage personnel.
Faut-il héberger Google Fonts soi-même ?
On le recommande : les licences le permettent, le chargement est souvent plus rapide, et les navigateurs de vos visiteurs n’ont plus à contacter les serveurs de Google pour afficher le texte.
